使用vue-press v2搭建静态网站

官方文档open in new window --- 使用的是最新版本

项目初始化

一般来说我们都是创建一个新的文件来作为文档/博客网站

  1. 初始化
mkdir my-site
cd my-site
1
2
yarn init
yarn add -D vuepress@next
1
2
npm init
npm install -D vuepress@next
1
2
  1. 在package.json总添加一些scripts:
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress 14-build docs"
  }
}
1
2
3
4
5
6
  1. 将默认的临时目录和缓存目录添加到.gitignore文件中
// 此处的.temp,.cache是vue-press默认的文件夹,可在配置文件中修改
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
1
2
3
4
  1. 创建一篇文档并启动本地服务
mkdir docs
echo '# Hello VuePress' > docs/README.md
1
2
  1. 在Terminal中启动服务
yarn docs:dev
1
npm run docs:dev
1
然后在浏览器中访问localhost:8080 //也可在配置文件中自定义
  1. 上传github仓库
  2. vercel部署我们的程序

项目结构

目录结构:
- docs
	- .vuepress
		- .chache
		- .temp
		- configs
			- navbar
				- index.ts
				- zh.ts
			- sidebar
				- index.ts
				- zh.ts
			- index.ts
		- dist
		- public
		- config.ts
	- README.md
- package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

- docs

-- .vuepress

--- .cache

--- .temp

--- configs

----- Index.ts
----- zh.ts
----- Index.ts
----- zh.ts
----Index.ts

--- dist

--- public

--- config.ts

-- README.md

-- package.json


CodeGroupopen in new window:vue-press的内部组件