开发者学堂课程【场景实践 - 新手玩转云计算 - 搭建自己专属的静态网站与云笔记：配置 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"
2、VuePress 的两个命令
（1）vuepress dev docs 命令︰运行本地服务，通过访问(http://localhost:8080)即可预览网站。
（2）vuepress 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
显示结果：
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
在此基础上可以设置滑块，滚动条等等其他的。
