vuepress学习记录

基于node.js发布的应用，所以 Node.js 版本 >= 8

第一步 安装到已有项目

直接在自己项目需要的位置运行，最后生成的是静态文件；

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

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

# 开始写作
npx vuepress dev docs

第二步

在当前目录下新建一个docs文件和package.json
package.json配置
{
“scripts”: {
“docs:dev”: “vuepress dev docs”,
“docs:build”: “vuepress build docs”
}
}
用来cmd命令行运行 和 生成静态文件 的命令配置

docs 下新建 .vuepress config.js public(用来之后放静态文件的)

config.js 配置应用

module.exports = {
    title: '操作手册',
    description: '操作手册',
    base: '/vuepress/dist/',
    dest: './dist/',
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { text: '文档', link: '/guide/' },
            { text: '平台首页', link: 'http://www.china9.cn' }
        ],
        sidebar: {
            '/guide/': [
                {
                    title: '注册',
                    path: '/guide/注册/',
                    collapsable: false,
                },
                {
                    title: '企业设置',
                    path: '/guide/企业设置/',
                    collapsable: false,
                },
                {
                    title: '员工档案',
                    path: '/guide/员工档案/',
                    collapsable: false,
                },
                {
                    title: '授权通过',
                    path: '/guide/授权通过/',
                    collapsable: false,
                },
                {
                    title: '考勤管理',
                    path: '/guide/考勤管理/',
                    collapsable: false,
                },
                {
                    title: '外出管理',
                    path: '/guide/外出管理/',
                    collapsable: false,
                },
                {
                    title: '工资管理',
                    path: '/guide/工资管理/',
                    collapsable: false,
                },
                {
                    title: '人才招聘',
                    path: '/guide/人才招聘/',
                    collapsable: false,
                },
                {
                    title: '培训管理',
                    path: '/guide/培训管理/',
                    collapsable: false,
                },
                {
                    title: '信息发布',
                    path: '/guide/信息发布/',
                    collapsable: false,
                },
                {
                    title: '手机端',
                    path: '/guide/手机端/',
                    collapsable: false,
                    children:genNewsSidebar（）
                },
            ]
        }
    }
}
function genNewsSidebar(type ='') {
    const mapArr = [
        '/guide/员工档案/新闻分类.md',
        '/guide/员工档案/新闻列表.md',
        '/guide/员工档案/新闻详情.md',
    ]
    return mapArr.map(i => {
        return type + i
    })
}

最后形成的目录如下

然后就是开始调试了

npm run docs:dev    运行

会生成一个 http://localhost:8080/vuepress/dist/ 的本地运行app，修改.md可以直接预览
等应用写好之后运行

`npm run docs:build`  

生成静态文件，目录在你base指定的dest里面，之后就是纯静态网页，可以随便拿去用了。

特别重要，config下面的配置目录，可能会导致样式文件和js路径不一致，可以多生成几次尝试。