Highlights:
1. npm have a variety of operating problems, be replaced by the Yarn;
2.yarn can npm global installed and npm node environment is built, node environment Quguan network to download and install;
3. There is no need to install global vuepress
operating:
1. Create a new empty folder, where I named the learn-vuepress, note the project name instead of writing hump writing (learnVuepress), because the configuration dependencies inside, so the project name is not legitimate. New projects under the project root directory empty file called docs folder, file folder in the docs, build a .vuepress folder. Structured as follows:
If you do not want to build a folder using the command line, then manually, it is the same. The last is like this, a three-layer structure.
2. Initialize dependent configuration table. That initialize a package.json. Here to perform yarn init -y. Representatives -y "yes", that is, no inquiry initial configuration table.
3. For the project to install the production environment vuepress. Console runs yarn add -D vuepress @ next. It is the production installation vuepress, while also download node_modules good step.
4. Add the following key to the inside package.json:
"scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }
The key to very clearly tell us: running yarn run docs: dev, the project can run up.
5. Add md file in the root directory docs, which is the default page when showing the entrance into the project in the absence of any manual selection path, which is in / root path.
6.在docs的根目录再建模块文件夹，模块文件夹里面为具体的md文件，想取什么名字都行。
7.在每个md文件书写相应的内容，都以一级标题开头。
8.在.vuepress根目录下新建public目录，这通常用来存个favicon啥的，而config.js则是重头戏了。
9.配置config.js
配置代码截图：
完整代码：
module.exports = { title: '学习vuepress', //网站标题 base: '/', //打包后的base路径 themeConfig: { //主题配置 head: [ ['link', { rel: 'icon', href: '/favicon.ico' }] //引入favicon ], search: false, //不要搜索框 sidebarDepth: 0, sidebar: [ //侧边栏 { title: '介绍', collapsable: false, children: [ '/' ] }, { title: '后端', collapsable: false, children: [ '/back-end/node.md' ] }, { title: '前端', collapsable: false, children: [ '/font-end/html.md', '/font-end/css.md', '/font-end/javascript.md' ] } ] } }
在sidebar的第一项中，我们引入了README.md文件，效果如下：
