VuePress初学之利用模板theme创建一个个人博客网站

前言

基本学习了和html还有CSS相关的知识，了解了Vue的部署，简单写了个页面发布在自己的云服务器上，现在想要搭建一个更精致的页面，通过搜索了解到还有一个VuePress这个东西，是一个静态网页发布器，基于Vue，学习试一下

官方文档

http://caibaojian.com/vuepress/

官网是最全最详细的介绍

• Node.js版本

10.16.3

---

创建项目

创建目录

第一步我们需要创建一个文件夹，然后用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:dev

http://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

---

结语

若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。
本文属于原创文章，转载请著名作者出处并置顶！！