Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use VuePress for everyone. Xiaobian thinks it is quite practical, so share it with everyone for reference. I hope you can gain something after reading this article.

Join VuePress for projects

The first step is to install VuePress for your project. If you don't have a package.json file in your project code, run npm init.

npm install -D vuepress //or yarn add -D vuepress//add docs folder mkdir docs//create Markdown file echo "# Hello VuePress! " > docs/README.md

The second step is to add these scripts to package.json and run them.

//package.json "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs"}//local run docs npm run docs:dev//compile package production static HTML files npm run docs:build

VuePress extends Markdown so that we can use YAML syntax in Markdown files, VuePress uses---to isolate Markdown syntax.

---//This syntax means to automatically generate a sidebar using the current page title sidebar: auto---

VuePress Basic Configuration

Through the VuePress profile we can use some custom features, such as adding sidebars, adding navigation bars, etc. First, create a new.vuepress directory under the docs directory, and create config.js under that directory.

VuePress packages files in the.vuepress/dist directory by default. We can modify the file output directory through the dest attribute, for example, output files in the dist folder under the project root directory.

By setting the repo property, VuePress adds a link to the Github repository in the navigation bar.

In VuePress, set the title of the site by setting the title property. It will be used as a prefix for all page titles. Under the default theme, it will be applied to the navigation bar.

When writing a blog using VuePress and publishing it to Github pages, we may encounter the problem shown below. The page is already available, but the style and js do not load successfully. We can solve this problem by configuring the base attribute, which defaults to/. If you are going to deploy code to taoxusheng.github.io/mt-blog/, the base attribute should be set to/mt-blog/. Note: The value of the base attribute always starts with/and ends with/.

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

导航栏与侧边栏

在 VuePress 中如果想要为您的网站添加导航栏，可以通过设置 themeConfig.nav 来添加导航链接，通过设置 themeConfig.sidebar 属性来添加侧边栏。如果您的导航是一个下拉列表，可以通过 items 属性来设置。

// dcos/.vuepress/config.jsmodule.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

对于多级目录的侧边栏，我们需要用使用对象描述的写法，下面的 /git/ 表示在 git 目录，默认指向 /git/README.md 文件。

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

在 VuePress 中注册组件

在 VuePress 中编写 Vue 代码，和我们通常的编写单文件的方式一致，有些时候我们有可能需要使用 Vue 的 UI 组件库。例如 Element，Mint 等，通常我们在项目中使用这些 UI 组件库的时候，我们都会在 main.js 或 botostrap.js 文件中统一注册。好在 VuePress 中也支持这种功能，我们可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置，这个文件 exprot default 一个钩子函数，在这个钩子中你可以做一些特殊处理，例如添加全局路由钩子，注册外部组件库。

// .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)}

在 Vue 正常开发中，有些时候我们可能会需要做一些自定义的组件，在 VuePress 中我们可以在 .vuepress/components 目录中编写我们的自定义组件，VuePress 在编译时遍历该目录中所有的 *.vue 文件，并见它们注册为全局组件。

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

这样我们在 Markdown 文件编写 Vue 代码的时候就不需要注册注册这些组件，边可以直接在 Markdown 中使用了。

// docs/.vuepress/vue/README.md {{ msg }} button export default { data () { return { msg: 'Hello VuePress!' } }}

部署到 Github pages

当我们将文档写好后就到了我们最关心的地方了，怎么将打包后的代码推送到远程仓库的 gh-pages 分支上，网上应该有很多文章描述怎么做，但是很多方法比较麻烦，还好有工具已经为我们解决了这个麻烦了。

// 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/关于"VuePress怎么用"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.