Vuepress介绍
官网：https://vuepress.vuejs.org/
类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。
Vuepress特点
- 响应式,也可以自定义主题与hexo类似
- 内置markdown(还增加了一些扩展),并且可以在其使用Vue组件
安装
初始化项目
npm install -g vuepress
创建一个MarkDown文档
echo '# Hello VuePress' > README.md
编写文档
vuepress dev
编译文档
vuepress build
结构目录
├── docs
│ ├── .vuepress
│ │ ├── public
│ │ └── config.js
│ │
│ └── README.md
│
└── package.json
配置config.js文件
module.exports = { title: "这里是标题", description: "每天都有进步就是最大的进步。", base: '/', // 项目根路径 dest: '/dist/', // 打包后的文件夹路径 // head 标签中的额外内容 head: [ ['link', { rel: 'icon', href: '/favicon.ico' }] // 这个是标签页 logo ], // 语言配置 locales: { // 键名是该语言所属的子路径 // 作为特例，默认语言可以使用 '/' 作为其路径。 '/': { lang: 'zh-CN', // 将会被设置为 <html> 的 lang 属性 } } }
主题配置
themeConfig同样是配置在config.js中的
// 主题配置 themeConfig: { // 顶部导航 nav: [ { text: '首页', link: '/' }, { text: '归档', link: '/archives/'}, { text: '分类', link: '/categories/' }, { text: '标签', link: '/tags/' }, { text: '关于我', link: '/about/' } ], // 侧边栏 sidebar: [ '/' ], sidebarDepth: 2, // 默认 1 提取到 h2，0 为禁用，2 为 h2，h3 displayAllHeaders: false, // 默认值：false 侧边栏只会显示由当前活动页面的标题组成的链接 activeHeaderLinks: true, // 默认值：true 滚动时通过 hash 高亮侧边栏标题 // Git 仓库和编辑链接 repo: 'username/repo', // 你的仓库 repoLabel: 'GitHub', // 导航栏上的文本 editLinks: true, // 默认为 "Edit this page" editLinkText: '编辑此页面' }
首页
配置 docs 下的 README.md
--- home: true heroImage: /hero.jpg heroText: Hero tagline: Hero 副标题 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 © 2018-present Evan You ---
ps：首页必须设置 home 为 true。默认样式与官方文档首页一致。
至此，就完成了基础的搭建，下一章使用netlify实现vuepress自动化构建。