VuePress是支持 Vue 子项目的文档需求而创建的，利用markdown写法可以生成静态的html页面，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面，具体介绍可以看VuePress官方文档
安装
新建文件夹并安装或在已有项目中安装
mkdir vuePressDemo
cd vuePressDemo
在vuePressDemo下安装如下：
yarn add -D vuepress # 或 npm install -D vuepress
npm init
// 初始化生成 package.json文件
配置 package.json
{
"scripts": {
"docs:dev": "vuepress dev docs", // add
"docs:build": "vuepress build docs" // add
}
}
创建一个docs目录
mkdir docs
// 创建一个 markdown 文件
echo '# Hello VuePress' > docs/README.md
运行
yarn docs:dev # 或 npm run docs:dev
在浏览器访问，例如我的访问地址是 http://localhost:8080/
生成静态文件并打包
npm run docs:build
根目录下出现node_modules包， docs下多了 .vuepress文件夹
在vuepress下有个dist文件夹，里面是经过打包后的文件
config,js设置
首先在.vuepress下新建个config,js文件
然后添加下面的代码
module.exports = {
title: '博客标题',
description: '描述',
head: [ // 注入到当前页面的 中的标签
['link', { rel: 'icon', href: '/images/logo.png' }],
['link', { rel: 'manifest', href: '/images/logo.png' }],
['link', { rel: 'apple-touch-icon', href: '/images/logo.png' }],
],
serviceWorker: true, // 是否开启 PWA
base: '/', // 部署到github相关的配置
markdown: {
lineNumbers: true // 代码块是否显示行号
},
themeConfig: {
// 导航栏配置
nav:[
{text: 'xxx', link: '/demo/' },
],
sidebar:[
{
title: '侧边栏名称', // 侧边栏名称
collapsable: true, // 可折叠
children: [
'/md文件地址/', // 你的md文件地址
]
},
]
}
}
静态资源处理
上传静态图片
公共文件
在.vuepress创建public，把静态资源放进去
部署发布
发布之前需要打包，在打包的过程中会把.md文件打包成.html静态文件
- 如果有github账号可以直接上传部署到github服务器上
在github上访问的根目录和config文件中设置的base要一致，例如：base: /vuepress/，那么访问的路径是 https://xxx.github.io/vuepress/ - 在根目录下创建deploy.sh文件，设置每次 push 代码时自动运行上述脚本。
// !/usr/bin/env sh
// 确保脚本抛出遇到的错误
set -e
// 生成静态文件
npm run build
// 进入生成的文件夹
cd docs/.vuepress/dist
// 如果是发布到自定义域名
// echo 'www.zhangyunchen.cc' > CNAME
git init
git add -A
git commit -m 'deploy'
// 如果你想要部署到 https://.github.io
git push -f [email protected]:beginner-g/beginner-g.github.io.git master
// 如果发布到 https://.github.io/ REPO=github上的项目
// git push -f [email protected]:/vuepress.git master:gh-pages
cd -
下一篇继续讲用Netlify来实现自动部署