还在烦恼怎么做一个简单又美观的文档或博客网站吗?VuePress,让你十分钟就能搭建一个静态网站!
![5fcc604ae583d8ce330d80dc6c94af95.png](https://i-blog.csdnimg.cn/blog_migrate/4214fdcbefee564d9f42edd792f0d3be.jpeg)
Vue.js
简介
VuePress,是 vuejs 在 Github 上开源的静态网站生成器,项目仓库位于 https://github.com/vuejs/vuepress,目前版本为 v1.5.0。VuePress 结合了 Markdown 语法和 Vue.js,可以从 Markdown 文档中直接生成一个静态网站,且可以结合 Vue.js,实现更为美观和强大的自定义主题和功能,满足快速构建如文档和技术博客网站等静态网站。相比于其他项目,VuePress 开箱即用,依赖较少,对 SEO 友好,能有效利用 Vue 处理布局和交互,渲染配置灵活。
![eb06f24063e11aee026841e4f7429e0d.png](https://i-blog.csdnimg.cn/blog_migrate/37070673a0109699ea4f37b9d299da1b.jpeg)
VuePress:Vue驱动的静态网站生成器
安装
VuePress使用简单,可以使用 yarn 直接安装:
yarn add -D vuepress
也可以使用 npm 安装,
npm install -D vuepress
如果项目依赖 webpack 3.x,推荐使用yarn安装,因为npm会生成错误的依赖树。
示例
VuePress使用简单,可以通过命令行生成样板项目:
yarn create vuepress [directoryName]
命令行会提示选择生成的项目类型:文档,或博客。
![3595337c41993a7b301e78eb6dcf95d9.png](https://i-blog.csdnimg.cn/blog_migrate/8c018c613e150d47274890e6e03b398e.jpeg)
VuePress类型
然后,命令行会提示输入包括项目名称、描述、作者等的项目信息。依次输入后,VuePress就会生成一个样板项目结构,包括 package.json 和默认的样板内容。要启动项目,首先进行依赖的安装,运行
yarn install
依赖安装完毕后,使用预设的脚本命令
yarn dev
启动项目。等待项目构建完成后,访问 http://localhost:8080/,就会显示一个默认的静态网站:
![b026232c515d5225380fe6fefee92bdc.png](https://i-blog.csdnimg.cn/blog_migrate/431c1376b0306b44ee15978e21e67131.jpeg)
VuePress默认网站
VuePress 提供了对 YAML front matter 开箱即用的支持。文档类型的样板项目的 README.md 代码如下:
![58b5b0acff0854c9d8bb2bd4640a1495.png](https://i-blog.csdnimg.cn/blog_migrate/6ad6a82c508ecc9929c6ccccfeb6f9bb.jpeg)
VuePress Front Matter
使用了 YAML 格式的 Front Matter,定义了包括主页图片、特性标签、脚注等在内的内容,最终渲染得到了我们前面看到的静态页面。
更多
- 支持 Github 风格的表格
![851d116ceb1fb85cdf971b98c91bdfb3.png](https://i-blog.csdnimg.cn/blog_migrate/370c62325745f13c922aa99e9dd79680.jpeg)
VuePress表格
- 支持目录生成
![a0bd0d9ffb35d2fd684f18589835ffed.png](https://i-blog.csdnimg.cn/blog_migrate/6bf82b3e4e84b7cddfca295db45c2655.jpeg)
VuePress目录生成
- 支持自定义容器
VuePress自定义容器
- 支持代码块语法高亮
- ……
![c61e85e71822fde0f5bc8fd29407f1bd.png](https://i-blog.csdnimg.cn/blog_migrate/11e085e81e2164e1fccd910bb5c59438.jpeg)
VuePress特性
总结
VuePress 由 Vue.js 团队维护,使用简单,开箱即用,在 Vue 的驱动下能够提供用户友好的布局和交互,开发效率高,是一个值得使用的开源项目。