标签：默认 环境 sed cli mem theme public 帮助 添加内容
VuePress是一个用来构建博客以及简易网站的项目，基于vuejs，由尤雨溪亲自主持的一个静态项目，静态打包。
基于这样的系统，可以方便用于小型文章发布，如帮助中心、官方博客，支持解析md文件。
VuePress由两部分组成：一部分是支持用 Vue 开发主题的极简静态网站生成器，另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
它以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作；享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题；它会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。
VuePress官网：[https://vuepress.vuejs.org/zh/]
其中默认主题包含
上述都是官网所提供的内容；下面让我们来真正实践下如何快速建立一个技术文档，当然，你熟悉它的操作* 后，优化成为自己的博客也是不错的选择！本着尤大出品必是精品的原则，相信VuePress未来发展会很不错!
*本教程目的在于快速搭建技术文档的基本模型，更具体的配置和说明请参考官网配置
*https://vuepress.vuejs.org/zh/config/
https://vuepress.vuejs.org/zh/default-theme-config/
查看nodejs版本
注意：Node.js 版本 >= 8
node -v
npm install -g vuepress
| mkdir vuepress-demo | |
| cd vuepress-demo |
npm init -y
进入package.json，修改脚本内容
| { | |
| "scripts": { | |
| "docs:dev": "vuepress dev docs", | |
| "docs:build": "vuepress build docs" | |
| } | |
| } |
| vuepress-demo | |
| ├─package.json | |
| ├─docs | |
| | ├─README.md | |
| | ├─.vuepress | |
| | | ├─config.js | |
| | | ├─public | |
| | | | └favicon.ico |
| module.exports = { | |
| title: ‘Hello VuePress‘, | |
| description: ‘Hello, my friend!‘, | |
| head: [ | |
| [‘link‘, { | |
| rel: ‘icon‘, | |
| href: `/favicon.ico` | |
| }] | |
| ], | |
| dest: ‘./docs/.vuepress/dist‘, | |
| ga: ‘‘, | |
| evergreen: true, | |
| } |
VuePress 提供了对 YAML front matter 开箱即用的支持，我们可以模仿vuepress首页进行如下优化：
| --- | |
| home: true | |
| heroImage: /favicon.ico | |
| actionText: 快速上手 → | |
| actionLink: /guide/ | |
| features: | |
| - title: 简洁至上 | |
| details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。 | |
| - title: Vue驱动 | |
| details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。 | |
| - title: 高性能 | |
| details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。 | |
| footer: MIT Licensed | Copyright © 2018-present xxxxxx | |
| --- |
vuepress dev docs
运行上述代码，最后会提示预览的网址http://localhost:8080/（端口号可根据配置进行修改https://vuepress.vuejs.org/zh/config/#port）
打开网址，我们就可以看到如下画面：
README.md中的内容已完美呈现！
首先在docs目录下建立文件
每个文件夹下的README.md就是当前目录的内容；
让我们通过config.js文件配置相应导航
| themeConfig: { | |
| nav: [ | |
| { text: ‘Home‘, link: ‘/‘ }, | |
| { text: ‘Guide‘, link: ‘/guide/‘ }, | |
| { | |
| text: ‘Languages‘, | |
| items: [ | |
| { text: ‘Chinese‘, link: ‘/language/chinese‘ }, | |
| { text: ‘English‘, link: ‘/language/english‘ } | |
| ] | |
| }, | |
| { text: ‘External‘, link: ‘https://www.baidu.com‘ }, | |
| ] | |
| } |
为guide文件下的README.md添加内容：
| ## This is guide | |
| content... | |
| ### title3 | |
| content... | |
| ### title3-01 | |
| ## small title | |
| content... |
这时，我们使用完整的命令来运行项目：
| # 开发调试状态 | |
| npm run docs:dev | |
| # 项目发布 | |
| npm run docs:build |
运行项目点击导航Guide，或是通过Home页点击“快速上手”会看到如下画面：
此时我们能够看到guide内容已成功显示，点击Lanuages能看到下拉，点击External会跳转到百度.
依旧在config.js文件下的themeConfig属性下添加：
| sidebarDepth: 2, | |
| sidebar: [ | |
| { | |
| title: ‘Guide‘, | |
| collapsable: false, | |
| children: [‘/guide/‘] | |
| } | |
| ] |
注：通过 themeConfig.sidebarDepth 来修改它的行为。默认的深度是 1，它将提取到 h2 的标题，设置成 0 将会禁用标题（headers）链接，同时，最大的深度为 2，它将同时提取 h2 和 h3 标题。
配置好后，运行项目
通过上述操作，本项目已成功完成了技术文档的基本模型，如更个性化的配置可通过官网按需求优化。
VuePress支持自由主题定义，在官方网站提供了一系列的主题插件，相关网址：
https://github.com/vuepressjs/awesome-vuepress
| # 自动边栏插件 | |
| vuepress-plugin-auto-sidebar |
评论插件：
https://valine.js.org/quickstart.html
优秀案例：
www.z01.com/cli
http://wp.z01.com
https://vuepress-theme-reco.recoluan.com/
https://github.com/zoomla/waipo
【全文完】
基于VuePress构建高基于markdown语法的网站全教程
标签：默认 环境 sed cli mem theme public 帮助 添加内容
原文地址：https://www.cnblogs.com/zoomlaCMS/p/12784392.html
