centos7安装并配置vuepress

计算机的学习东西太多,零散不好记?那就使用文档记录下来吧!好记性不如烂笔头.

 

一、安装 Node.js

教程以 Node.js 13.9.0 64位为例。（VuePress⽀持使⽤Yarn和npm来安装，Node.js版本需要>=8才可以。这⾥我们使⽤npm。）

1. 执⾏如下命令，下载Node.js 13.9.0 64位安装包

wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz

 

2. 创建Node.js安装⽬录

sudo mkdir -p /usr/local/lib/nodejs

 3. 将⼆进制⽂件解压到要安装⽬录

sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs

 4. 使⽤查看node.js版本号命令验证是否解压成功

进⼊⽬录：

cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

执⾏：

./node -v

可以看到node版本

5. 修改环境变量，使得能在任意⽬录下执⾏node命令

vim ~/.bash_profifile

 

找到 PATH=$PATH:$HOME/bin，在PATH=$PATH:$HOME/bin 后⾯添加路径:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin，结果为：

PATH=$PATH:$HOME/bin:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

保存修改，然后重载⼀下：

source ~/.bash_profifile

 6. 到其他⽬录下验证

cd

node -v

npm version

npx -v

看到各工具版本信息就是安装完成.

⾄此，nodejs安装完毕。

二、安装 VuePress

1、全局安装

为加快下载安装速度，采⽤淘宝镜像。

npm confifig set registry https://registry.npm.taobao.org

npm install -g vuepress

2、创建⼀个⽂件夹作为⽬录

mkdir try_blogs

cd try_blogs

3、项⽬初始化

npm init -y

初始化后会⽣成⼀个package.json⽂件

之后进⼊配置步骤。

三. 配置 VuePress

⼀、基本配置步骤

1、设置package.json的脚本配置

vim package.json

修改scripts中的内容如下：

"scripts": {

"docs:dev": "vuepress dev docs",

"docs:build": "vuepress build docs"

},

2、在当前⽬录中创建⼀个⽂档⽬录

mkdir docs

3、创建.vuepress⽬录

cd docs

mkdir .vuepress

4、新建⼀个md⽂件

echo '# Hello VuePress - fifirst blog!' >README.md

5、 创建confifig.js配置⽂件

cd .vuepress

echo >confifig.js

6、创建public⽬录

mkdir public

7、完成后的⼯作⽬录如下：

try_blogs

├─ docs //以后要在这⾥⾯写⽂章，直接在此⽂件夹下新建⽂件夹，然后再建md⽂档就⾏，链接会⾃动⽣成

│ ├─ README.md // 这个将会是我们以后的⾸页

│ └─ .vuepress // 这个⾥⾯会存放⼀些配置和组件

│ └─ public // 静态⽂件存放地

│ └─ confifig.js //配置⽂件，以后的所有配置基本都在这⾥写

└─ package.json

8、回到try_blogs⽬录，执⾏命令

vuepress dev docs

注：VuePress中有两个命令:

vuepress dev docs 命令运⾏本地服务，通过访问(http://localhost:8080)即可预览⽹站

vuepress build docs 命 令 ⽤ 来 ⽣ 成 静 态 ⽂ 件 ， 默 认 情 况 下 ， 放 置 在docs/.vuepress/dist⽬录中，当然你也可以在docs/.vuepress/confifig.js中的dest字段来修改默认存放⽬录。在这⾥将两个命令封装成脚本的⽅式，直接使⽤npm run docs:dev和npm run docs:build即可。

9、在浏览器中打开： http://localhost:8080 就可以看到Hello VuePress - fifirst blog!

⼆、⾸⻚配置示例

1、⾸页配置

修改README.md⽂件，将原来的内容删除后，将以下内容拷贝进去

---

home: true

heroText: Vue技术博客初试

tagline: 项⽬结构，关注讨论，每⽇分享

actionText: 每⽇更新 →

→

actionLink: /testlink/

features:

- title: 项⽬结构

details: 以 Markdown 为中⼼的项⽬结构，以最少的配置帮助你专注于写作。

- title: 关注讨论

details: 享受 Vue + webpack 的开发体验，在 Markdown 中使⽤ Vue 组件，同

时可以使⽤ Vue 来开发⾃定义主题。

- title: 每⽇分享

details: VuePress 为每个⻚⾯预渲染⽣成静态的 HTML，同时在⻚⾯被加载的

时候，将作为 SPA 运⾏。

footer: LearnVueonECS Licensed | Copyright © 2020-present

---

3、⾄此，完成了VuePress在的搭建和初步配置，更多VuePress的使⽤⽂档可参考VuePress官⽹。