vuepress 快速搭建 | 大前端杂记

# vuepress 快速搭建

WARNING

node版本>= 8.6

# nodejs安装

如何安装nodejs，请参考及安装nodejs安装 (opens new window)

# 安装vuepress

创建并安装vuepress

mkdir vuepress-starter && cd vuepress-starter
yarn init
yarn add -D vuepress

1
2
3

  project
    ├─── docs
    │   ├── README.md
        ├── front-end
        │   ├── README.md
        │   ├── react
        │   │   └── react01.md
        │   ├── vue
        │   │   └── vue01.md
        └── hero.png
    └── package.json
    
    project：是工程的根目录名称，例如（D:\vuepress-test01，project就是vuepress-test01）
    docs和.vuepress都是文件夹
    其它都是文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

package.json内容

{
      "name": "vuepress-test01",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "dev": "vuepress dev docs",
        "build": "vuepress build docs"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

1
2
3
4
5
6
7
8
9
10
11
12
13

README.md

 ---
    home: true
    actionText: 快速上手 →
    actionLink: /zh/guide/
    features:
    - title: 简洁至上
      details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
    - title: Vue驱动
      details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
    - title: 高性能
      details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
    footer: MIT Licensed | Copyright © 2020 （可以根据实际情况写）
    ---

1
2
3
4
5
6
7
8
9
10
11
12
13

设置config.js

module.exports = {
      title: '前端',// 设置网站标题
      description: '前端xxxx',
      base: '/',// 设置站点根路径
      head: [],
      plugins: [],
      themeConfig: {
          // 添加导航栏
          nav: [
  				{ text: '主页', link: '/' },
  				{ text: '前端',
  					items: [
  						{ text: 'vue', link: '/front-end/vue/' },
  						{ text: 'react', link: '/front-end/react/' }
  					]
  				},
  			],
          sidebar: {
              '/front-end/vue/': [{
				title: 'vue笔记',
				collapsable: false,
				children: [{
						title: 'vue11111',
						path: '/front-end/vue/vue01.md'
					}
				]
			}],
			'/front-end/react/': [{
				title: 'react笔记',
				collapsable: false,
				children: [{
						title: 'react1111',
						path: '/front-end/react/react01.md'
					}
				]
			}],
          },
          sidebarDepth: 2,
          lastUpdated: 'Last Updated'
      }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

运行

yarn dev

打开localhost:8000 进行预览

目录结构 →