使用vue-press v2搭建静态网站
官方文档open in new window --- 使用的是最新版本
项目初始化
- Node.js v12+open in new window (也可使用yarn，自行安装使用)
一般来说我们都是创建一个新的文件来作为文档/博客网站
- 初始化
mkdir my-site
cd my-site
1
2
2
yarn init
yarn add -D vuepress@next
1
2
2
npm init
npm install -D vuepress@next
1
2
2
- 在package.json总添加一些scripts:
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress 14-build docs"
}
}
1
2
3
4
5
6
2
3
4
5
6
- 将默认的临时目录和缓存目录添加到
.gitignore文件中
// 此处的.temp，.cache是vue-press默认的文件夹，可在配置文件中修改
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
1
2
3
4
2
3
4
- 创建一篇文档并启动本地服务
mkdir docs
echo '# Hello VuePress' > docs/README.md
1
2
2
- 在Terminal中启动服务
yarn docs:dev
1
npm run docs:dev
1
- 上传github仓库
- 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- docs
-- .vuepress
--- .cache
--- .temp
--- configs
---- navbar
----- Index.ts
----- zh.ts
---- sidebar
----- Index.ts
----- zh.ts
----Index.ts
--- dist
--- public
--- config.ts
-- README.md
-- package.json
CodeGroupopen in new window:vue-press的内部组件