实现效果
依赖环境
安装
- 步骤1：创建一个新目录
mkdir vuepress-starter
cd vuepress-starter
- 步骤2：初始化项目
yarn init // 弹出的选项不停回车即可
- 步骤3：在该文件夹环境内安装 VuePress
yarn add -D vuepress
-
步骤4： 在
package.json中添加一些 scripts
// vuepress-starter/package.json
{
...
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
- 步骤5：创建你的第一篇文档
mkdir docs
echo # Hello VuePress! > docs/README.md
- 步骤6：在本地启动服务器来开发你的文档网站
yarn docs:dev
VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
修改主题
- 步骤1：在该文件夹环境内安装 vuePress-theme-reco
yarn add -D vuepress-theme-reco
步骤2：在 docs 文件夹内新建一个
.vuepress文件夹，并在里面创建一个config.js文件步骤3：在
docs/.vuepress/config.js填入以下内容
// vuepress-starter/docs/.vuepress/config.js
module.exports = {
title: 'vuepress', // 网页标题
locales: {
'/': {
lang: 'zh-CN' // 修改网页的语言为中文
}
},
theme: 'reco',
themeConfig: {
type: 'blog'
}
}
-
步骤4： 重新执行
yarn docs:dev，然后打开 http://localhost:8080
