背景
随着项目业务逐渐积累,一些公共组件和公共方法也越来越多,搭建在线预览的文档可以实时查看.
目标:
- 防止重复造轮子
- 提升开发效率
- 标准规范化
解决方案
vuepress:vue官方提供的开源文档方案 官网链接
快速上手
mkdir vuepress
cd vuepress
npm init
npm install -D vuepress
目录结构
具体说明: .vuepress目录
- docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
- docs/.vuepress/styles: 用于存放样式相关的文件。
- docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件,会生成在最终的 CSS 文件,具有比默认样式更高的优先级
- docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量,或者设置新的 stylus 颜色常量。
- docs/.vuepress/public: 静态资源目录。
- docs/.vuepress/config.js: 配置文件的入口文件,也可以是 YML 或 toml。
guide为md格式的文档文件
- instruction为文档目录
README.md 为默认首页
文档提交说明
如果新增菜单项,需要再config.js 中进行配置,保持文件名一致即可
比如使用文档菜单新增登录页面,需要如下操作:
- 在使用文档的children中增加 'instruction/login' 配置
- 在instruction目录中,新增login.md文件
导出pdf
如果想导出pdf,可以安装插件vuepress-plugin-export 执行:vuepress export docs即可 ,导出pdf插
完整可运行demo已放github