VuePress搭建博客教程(二)、vuepress安装与启动

小景哥哥博客

VuePress搭建博客教程(二)、vuepress安装与启动

一、创建并进入一个新目录

我们把项目保存在桌面的2021/projects/vuepress-hep目录下，当然可以按照个人喜好随便选取位置。

cd Desktop
cd 2021
cd projects
mkdir vuepress-hep
cd vuepress-hep

二、使用npm包管理器进行初始化

npm init

三、安装vuepress

npm install -D vuepress

四、创建第一个文档

在vuepress-hep文件夹下，创建一个docs的文件夹，在docs文件夹下创建文件README.md，README.md文件内容为：# Hello, hep.

五、在 package.json 中添加一些scripts

添加两个"docs:dev": "vuepress dev docs",和"docs:build": "vuepress build docs"到文件package.json的scripts中。

{
  "name": "vuepress-hep",
  "version": "1.0.0",
  "description": "This is hep project",
  "main": "index.js",
  "scripts": {
	  "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jason",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^1.8.2"
  }
}

六、启动本地服务器

npm run docs:dev

七、访问首页面

VuePress 会在 http://localhost:8080/ 启动一个热重载的开发服务器。