配置 VuePress | 学习笔记

简介: 快速学习配置 VuePress。

开发者学堂课程【场景实践 - 新手玩转云计算 - 搭建自己专属的静态网站与云笔记配置 VuePress】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/458/detail/5642


配置 VuePress


内容介绍

一、目录结构

二、配置 VuePress

 

一、目录结构

首先根目录是 try blogs,docs 是用来放文章的,README.md 和 package.json 是演示最主要的两个配置,README.md 作为首页、package.json 是项目最基本的模块和配置。


二、配置 VuePress

1、首先登录到 ECS上,拷贝弹性的 ip 地址,并输入密码,进入到 try_blogs 目录里

Last login: Wed Mar 25 10:47:51 on ttys001

localhost:~ jiangning$ ssh root@123.57.231.152

root@123.57.231.152's password:

Last login: Wed Mar 25 10:48:05 2020 from 111.192.244.89

Welcome to Alibaba Cloud Elastic Compute Service !

[root@iZ2ze4ty14huuygfahb73wZ ~]# ls

node- -v13.9.0-1inux-x64.tar.xz try_ ,blogs

[root@iZ2ze4ty14huuygfahb73wZ ~]# cd try_ blogs

[ root@iz2ze4ty14huuygfahb73wZ try_ blogs]# ls

package. json

输入:vim package.jso

"name":” try_ blogs "

"version": "1.0.0",

"description":””,

"main": "index.js",

"scripts": {

"docs :dev: "vuepress dev docs”,

"docs: build":”vuepress build docs"

},

"keywords": [ ],

"author" :””,

"license": "ISC"

 2VuePress 的两个命令

1vuepress dev docs 命令︰运行本地服务,通过访问(http://localhost:8080)即可预览网站

2vuepress build docs 命令∶用来生成静态文件,默认情况下,放置在docs/.vuepress/dist 目录中,当然你也可以在 docs/.vuepress/config.js中的dest字段来修改默认存放目录。

在这里将两个命令封装成脚本的方式,直接使用npm rundocs:dev和npm run docs:build即可。

Last login: wed Mar 25 10:47:51 on ttys001

llocalhost:~ jiangning$ ssh root0123.57.231.152

root@123.57.231.152's password:

Last login: wed Mar 25 10:48:05 2020 from 111.192.244.89

welcome to Alibaba Cloud Elastic Compute Service !

[root@iz2ze4ty14huuygfahb73wZ~]# ls

node-v13.9.0-linux-x64.tar.xz try_blogs

[root@iz2ze4ty14huuygfahb73wZ~]# cd try_blogs

[[root@iz2ze4ty14huuygfahb73wz try_blogs]# lspackage.json

[root@iz2ze4ty14huuygfahb73wZtry_blogs]#vim package.json[root@iz2ze4ty14huuygfahb73wz try_blogs]#ls

package.json

[root@iz2ze4ty14huuygfahb73wZ try_blogs]# mkdir docs//创建一个文档目录

[root@iz2ze4ty14huuygfahb73wZ try_blogs]# cd docs//进入到目录当中

[root@iZ2ze4ty14huuygfahb73wZ docs]# mkdir .vuepress// vuepress存配置和组件的

[rootQiz2ze4ty14huuygfahb73wZ docs]# echo '# Hello VuePress - first blog!' >README.md//首页文件

[root@iz2ze4ty14huuygfahb73wZ docs]# vi README.md //进入文件当中  # Hello VuePress -first blog!

|[ root@iz2ze4ty14huuygfahb73wZ docs]# vi README .md

[ root@iz2ze4ty14huuygfahb73wZ docs]# cd . vuepress

[ root@iz2ze4ty14huuygfahb73wZ . vuepress]# echo >config.js

[ root@iz2ze4ty14huuygfahb73wZ . vuepress]# mkdir public

[root@iz2ze4ty14huuygfahb73wZ . vuepress]# vuepress dev docs

目录有问题,返回上级目录

[ root@iZ2ze4ty14huuygfahb73wZ docs]# cd

[ root@iz2ze4ty14huuygfahb73wZ try_ _blogs]# pwd

/root/try_ blogs

[root@iz2ze4ty14huuygfahb73wZ try_ blogs]# vuepress dev docs

执行代码

执行成功:

Success [11:44:45] Build 51aa23 finished in 291 ms! ( http://localhost:8080/ )

浏览器输入:

123.57.231.125:8080

显示结果:

image.png

Last login: Wed Mar 25 11 :44:54 on ttys002

localhost:~ jiangning$ ssh root@123.57 .231.152

root@123.57.231.152's password:

Last login: Wed Mar 25 11:34:12 2020 from 111. 192.244.89

Welcome to Alibaba Cloud Elastic Compute Service !

[ root@ iz2ze4ty 14huuygfahb73wZ ~ ]# ls

node-v13.9。0-1 inux-x64。tar .XZ

try_ blogs

! [ root@ i z2 ze4ty14huuygfahb73wZ ~]# cd try_ blogs/

[ root@ iz2 ze4ty 14huuygfahb73wZ try_ blogs]# ls

Docs package. j son

[ root@ iz2 ze4ty 14huuygfahb73wZ try_ blogs]# cd docs

[ root@ iz2 ze4ty14huuygfahb73wZ docs]# ls

README.md

[ root@ iz2 ze4ty14huuygfahb73wz docs]# vi README . md

home: true

heroText: Vue 技术博客初试

tagline:项目结构,关注讨论,每日分享

actionText:每日更新→

actionLink: /testlink/

features:

- title:项目结构

details:以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。

- title:关注讨论

details:享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可

以使用 Vue 来开发自定义主题。

- title:每日分享

details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,

将作为 SPA 运行。

footer: LearnVueonECS Licensed | Copyright@ 2020-present

在此基础上可以设置滑块,滚动条等等其他的。

相关文章
|
1月前
|
JavaScript
tailwindcss使用教程
【8月更文挑战第1天】
40 3
|
4月前
|
JavaScript 前端开发 Go
8 大博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 对比
探索各类博客引擎:Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman的对比,包括语言、模板引擎、速度、社区活跃度等。了解每种引擎的优缺点,助你选择合适的博客构建工具。查看详细文章以获取更多实战和安装指南。
|
10月前
|
资源调度 JavaScript 应用服务中间件
VuePress介绍及使用指南
VuePress是一个基于Vue.js的静态网站生成工具,它专注于以Markdown为中心的项目文档。VuePress具有简单易用的特性,同时提供了强大的自定义和扩展性。
161 2
VuePress介绍及使用指南
|
4月前
|
搜索推荐
【卡夫卡的岛上书店】:一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客
【卡夫卡的岛上书店】:一个利用 vuepress 的主题 vuepress-theme-reco 以及 vuepress-theme-vdoing 搭建自己的静态博客
80 0
|
9月前
vuepress获取所有页面frontmatter
vuepress获取所有页面frontmatter
42 0
Hexo、Jekyll、Sphinx、mkdocs、docsify等静态博文档汇总
Hexo、Jekyll、Sphinx、mkdocs、docsify等静态博文档汇总
217 0
Hexo、Jekyll、Sphinx、mkdocs、docsify等静态博文档汇总
|
弹性计算 JSON JavaScript
安装 VuePress | 学习笔记
快速学习安装 VuePress。
731 0
|
JavaScript 开发者 SEO
vuepress入门教程
vuepress入门教程
1454 0
|
资源调度 JavaScript 前端开发
从零实现一个 VuePress 插件
在搭建 VuePress 博客的过程中,也并不是所有的插件都能满足需求,所以本篇我们以实现一个代码复制插件为例,教大家如何从零实现一个 VuePress 插件。
266 0
从零实现一个 VuePress 插件
|
JavaScript
搭建 VuePress 博客,你可能会用到的一些插件
「这是我参与2022首次更文挑战的第8天,活动详情查看:2022首次更文挑战」。
743 0
搭建 VuePress 博客,你可能会用到的一些插件