VuePress入门
0.参考资料
- 官方文档
- 配置文档
配置文档 https://vuepress.vuejs.org/zh/config/#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE
1.切换node版本
>nvm list
19.6.0
16.17.0
* 14.19.3 (Currently using 64-bit executable)
>nvm use 16.17.0
Now using node v16.17.0 (64-bit)
- 查看是否安装了yarn,如果报错执行下一步的安装yarn命令
> yarn -v
1.22.19
> npm install -g yarn
2.安装vuepress
$ yarn install -g vuepress
3.初始化node目录
$ yarn init -y
Wrote to E:\xk-workspace\xk-note\package.json:
{
"name": "xk-note",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
4.目录结构设置
命令行方式创建推荐目录
mkdir -p docs/.vuepress
cd docs/.vuepress
mkdir components theme styles public templates
touch config.js
cd ..
touch README.md
mkdir guide
touch config.md
touch guide/README.md
VuePress 推荐目录结构
docs/.vuepress: 用于存放全局的配置、组件、静态资源等。docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。docs/.vuepress/theme: 用于存放本地主题。docs/.vuepress/styles: 用于存放样式相关的文件。docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。docs/.vuepress/public: 静态资源目录。docs/.vuepress/templates: 存储 HTML 模板文件。docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。docs/.vuepress/config.js: 配置文件的入口文件，也可以是YML或toml。docs/.vuepress/enhanceApp.js: 客户端应用的增强。
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
