目录
- 前言
- 官方文档
- 创建项目
- 创建目录
- 安装VuePress
- 初始化项目
- 创建文档
- 修改package.json
- 运行项目
- 修改README.md的编码
- 显示官方默认主题
- 创建.vuepress文件
- 创建config.js
- 修改README.md
- 补充logo资源
- 运行效果
- 更多默认主题配置
- 开源主题
- vuepress-theme-reco
- 安装脚手架
- 初始化项目
- 安装npm
- 运行查看
- VuePress Theme Hope
- 推送
- 结语
前言
基本学习了和html还有CSS相关的知识，了解了Vue的部署，简单写了个页面发布在自己的云服务器上，现在想要搭建一个更精致的页面，通过搜索了解到还有一个VuePress这个东西，是一个静态网页发布器，基于Vue，学习试一下
官方文档
http://caibaojian.com/vuepress/
官网是最全最详细的介绍
创建项目
创建目录
第一步我们需要创建一个文件夹，然后用VS Code打开
安装VuePress
npm install -D vuepress
在VS Code里打开命令行，输入
npm install -D vuepress,安装vuepress，会在目录下安装相应模块
初始化项目
npm init -y
这将会在目录下创建一个
package.json文件
创建文档
mkdir docs echo '# Hello VuePress' > docs/README.md
这会在目录下创建第一个docs文件夹，文件夹下包含一个
README.md的markdown文件
修改package.json
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}
修改package.json文件，在scripts内补充运行入口和构建入口
运行项目
npm run docs:devhttp://localhost:8080/
在命令行运行项目，成功后，打开内网地址路径，可以看到最简单的一个通过md文件显示的页面
修改README.md的编码
打开页面发现是乱码，原因是README文件的编码格式不对，修改成UTF-8，保存后，页面显示正确
显示官方默认主题
VuePress有一个官方默认的主题，和Vue的主页相似，我们可以设置一下看看
创建.vuepress文件
在docs文件下创建.vuepress文件，这是放置所有 VuePress 特有(VuePress-specific) 文件的地方
创建config.js
module.exports = {title: 'Hello VuePress',description: 'Just playing around'
}
在.vuepress文件下创建config.js文件，内容就上边显示的，他是VuePress 站点的基本文件
修改README.md
home: true
heroImage: /hero.png
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
---
README文件修改成上述内容，这是官方给的结构，具体含义暂不介绍
补充logo资源
在.vuepress文件下创建
public文件，该文件夹放置所有静态资源，添加一个图片hero.png，该图片名和README里的heroImage相同
运行效果
重新run后打开网页，看到上图效果和Vue官网类似，图中所有内容都和我们config.js还有README里的配置相关
更多默认主题配置
- 官方文档
http://caibaojian.com/vuepress/default-theme-config/
更多默认主题配置设置和介绍，官方文档写的很详细
开源主题
网上有很多优秀的开源主题，向各位无私奉献的大哥致敬，这里我们举例来使用
vuepress-theme-reco
一款简洁而优雅的 vuepress 博客 & 文档 主题
- 官方地址
https://vuepress-theme-reco.recoluan.com/
安装脚手架
npm install @vuepress-reco/theme-cli -g
打开cmd，输入命令，全局安装脚手架工具
初始化项目
theme-cli init sun_blog
用vs code打开一个文件夹，输入命令
sun_blog就是项目目录的名字
回车执行后，会输入一系列的需求，最后一个比较重要，博主用的1.x，根据自己版本和需求选择
安装npm
切换目录到sun_blog，安装npm
npm install
运行查看
脚手架已经帮我们把所有必要的东西都安装完成了，在安装完npm后我们就可以运行直接查看效果了
npm run dev
效果很不错
VuePress Theme Hope
一个具有强大功能的 vuepress 主题✨
- 官方地址
https://vuepress-theme-hope.github.io/v2/zh/
推送
- Github
https://github.com/KingSun5
结语
若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。
本文属于原创文章，转载请著名作者出处并置顶！！
