vuepree博客搭建笔记

3/1/2020 vuepree博客搭建

# 环境配置:

npm install -g yarn  
1

安装yarn

# 安装node npm

1、通过官方查询需要安装的版本

https://github.com/nodesource/distributions

curl -sL https://rpm.nodesource.com/setup_12.x | bash -
1

2、利用yum安装

键入 yum install -y nodejs

3、安装完成后,通过以下方式验证

键入 node -v

键入 npm -v

# 一、正题

# vuepress-reco主题安装

(这个其实就是一起安装了vuepress)

# npm 安装方式

# init

 npm install @vuepress-reco/theme-cli -g
 theme-cli init my-blog
1
2

# install

 cd my-blog
 npm install
1
2

# run npm run dev 到这里的时候不能退出 。。。浏览器打开 ip:8080即可出现博客,退出之后就不能打开网页了。不建议再使用这条命令打开。

# build

npm run build 编译项目生成静态网页文件(打完收工)

来自 https://github.com/vuepress-reco/vuepress-theme-reco (opens new window)

# 二、主题配置

https://vuepress-theme-reco.recoluan.com/views/1.x/home.html#option-api (opens new window)

# 三、目录详解

img

# 1.public 文件夹

执行 npm run build (即编译)最终生成的项目文件/静态网页文件

如何使用?

打包这整个文件夹,然后部署在nginx或者apache等服务器下,宝塔面板下直接引用 index.html文件。

# 2.docs 文件夹

img

其中 ‘views’文件夹 我理解为菜单栏或者二级菜单目录

# 2.1

/my-blog/docs/.vuepress/config/theme 主题文件配置目录(页脚相关信息)

/my-blog/docs/.vuepress/config/nav contact目录

# 四、vuepress官方文档

https://vuepress.vuejs.org/guide/getting-started.html#global-installation

Younha
蜜汁神曲