VuePress快速踩坑小结

npm install -D vuepress // 或者 yarn add -D vuepress

// 在项目根目录下新加 docs 文件夹
mkdir docs

// 新建一个 Markdown 文件
echo "# Hello VuePress!" > docs/README.md

// package.json
"scripts": {
 "docs:dev": "vuepress dev docs",
 "docs:build": "vuepress build docs"
}

// 本地运行文档
npm run docs:dev

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

---
// 该语法表示使用当前页面标题自动生成侧边栏
sidebar: auto
---

// dcos/.vuepress/config.js
module.exports = {
 title: 'my-blog', // 设置网站标题
 dest: './dist'，  // 设置输出目录
 base: '/mt-blog/'，// 设置站点根路径
 repo: 
 'https://github.com/TaoXuSheng/mt-blog' // 添加 github 链接
}

// dcos/.vuepress/config.js
module.exports = {
 themeConfig: {
  // 添加导航栏
  nav: [
   { text: 'vue', link: '/' },
   { text: 'css', link: '/blog/' },
   { text: 'js', link: '/zhihu/' },
   {
    text: 'github',
    // 这里是下拉列表展现形式。
    items: [
     { text: 'focus-outside', link: 'https://github.com/TaoXuSheng/focus-outside' },
     { text: 'stylus-converter', link: 'https://github.com/TaoXuSheng/stylus-converter' },
    ]
   }
  ],
  // 为以下路由添加侧边栏
  sidebar: ['/', '/git', '/vue']
 }
}

docs
 ├── README.md
 ├── vue
 │  ├─ README.md
 │  ├─ one.md
 │  └─ two.md
 └── css
   ├─ README.md
   ├─ three.md
   └─ four.md

// dcos/.vuepress/config.js
module.exports = {
 themeConfig: {
  sidebar: {
   '/vue/': [
    'one',
    'two'
   ],
   '/css/': [
    'three',
    'four'
   ]
  }
 }
}

// .vuepress/enhanceApp.js
// 全局注册 Element 组件库
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default ({
 Vue,
 options,
 router
}) => {
 Vue.use(Element)
}

// 注册一个自定义组件
// docs/.vuepress/components/hello.vue

// docs/.vuepress/vue/README.md

// 1.下载 gh-pages 包
npm install -D gh-pages

// 2\. 在 package.json 文件上添加脚本命令
"scripts": {
 "docs:dev": "vuepress dev docs",
 "docs:build": "vuepress build docs",
 // 上面我修改了 VuePress 的输出目录，所以您如果没有修改 .vuepress/config.js
 // 的 dest 属性，应该将这里的 dist 改为 .vuepress/dist
 "deploy": "gh-pages -d dist",
 "deploy:build": "npm run docs:build && gh-pages -d dist"
}

// 3\. 打包并推送到 gh-pages 分支
npm run deploy:build

// 4.打开你的 Github pages, 地址是 https:///github.io/