vuepress的使用原先接触过vuepress，但是后来因为过于在意他的主题，找主题找着找着反而忘了vuepress的

用vuepress的原因

原先接触过vuepress，但是后来因为过于在意他的主题，找主题找着找着反而忘了vuepress的初始作用，慢慢就忘了这玩意，后来觉得还是需要一个工具去总结自己学习中遇到的问题，以及总结自己的一些想法，所以重新用起了vuepress。

全局安装vuepress: npm install -g vuepress

新建`package.json`

{
    "scripts": {
        "dev": "vuepress dev docs",
        "build": "vuepress build docs"
    }
}
// 本地运行文档
npm run dev

// 编译打包生产静态 HTML 文件
npm run build

新建`config.js`

// dcos/.vuepress/config.js
module.exports = {
    title: 'blog',  // 设置网站标题
    dest: './dist',    // 设置输出目录
}

新建如下路径文件

docs
 ├── README.md
 ├── testa
 │    ├─ README.md
 │    ├─ one.md
 │    └─ two.md
 └── testb
      ├─ README.md
      ├─ three.md
      └─ four.md

配置侧边栏与导航栏

// dcos/.vuepress/config.js
module.exports = {
    themeConfig: {
        // 导航栏的配置
        nav: [
            // 有下拉选项的导航
            {
                text: 'testa',
                items: [
                    { text: 'one', link: '/testa/one' },
                    { text: 'two', link: '/testa/two' }
                ]   
            },
            // 没有下拉选项的导航
            { text: 'testb', link: '/testb/' }
        ],
        // 侧边栏的配置
        sidebar: {
            '/testa/': [
                '', // 这个是README.md文件
                'one',
                'two'
            ],
            '/testb/': [
                {
                    title: 'testb', // 这是可展开侧边栏的名称
                    collapsable: true, // 可选的, 默认值是 true,
                    sidebarDepth: 1,    // 可选的, 默认值是 1
                    // 如果想在可展开侧边栏的某一个里面加入可展开的菜单
                    children: [
                        'testb/four',
                        'testb/three',
                    ]
                }
                'three',
                'four',
            ]
        }
    }
}

填充`README.md`

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

执行`npm run dev`即可

踩坑记录

需要检查package.json中是否有vuepress，如果没有需要手动添加安装，不然可能会影响vuepress的默认主题的内容，如自定义的容器

在vuepress中使用vue

vuepress是支持在md文件中直接写原生的js和css的，但是我不是很喜欢在md中直接写，因为vuepress也支持组件化形式的vue，也就是说可以安装vue组件的写法写一个vue文件，在md文件中引入就行了。

新建组件文件.vuepress/components/XXX.vue
按照vue的语法在vue文件中写内容
在需要引入的md文件中添加

<XXX />  // XXX是component下组件的命名

如果需要在vue中使用别的库，如elementUI

安装elementui npm i element-ui -S
新建.vuepress/enhanceApp.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 使用异步函数也是可以的
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  Vue.use(ElementUI)
  // ...做一些其他的应用级别的优化
}

如果需要在vue中使用axios
- 在vuepress中安装axios npm install axios
- 直接在vue文件中import axios from 'axios'

在vuepress中好用的插件

vuepress-plugin-container
vuepress-plugin-clean-urls

vuepress的使用

用vuepress的原因

新建package.json

新建config.js