json格式生成器_VuePress - Vue驱动的静态网站生成器

还在烦恼怎么做一个简单又美观的文档或博客网站吗?VuePress,让你十分钟就能搭建一个静态网站!

5fcc604ae583d8ce330d80dc6c94af95.png

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

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

VuePress类型

然后,命令行会提示输入包括项目名称、描述、作者等的项目信息。依次输入后,VuePress就会生成一个样板项目结构,包括 package.json 和默认的样板内容。要启动项目,首先进行依赖的安装,运行

yarn install

依赖安装完毕后,使用预设的脚本命令

yarn dev

启动项目。等待项目构建完成后,访问 http://localhost:8080/,就会显示一个默认的静态网站:

b026232c515d5225380fe6fefee92bdc.png

VuePress默认网站

VuePress 提供了对 YAML front matter 开箱即用的支持。文档类型的样板项目的 README.md 代码如下:

58b5b0acff0854c9d8bb2bd4640a1495.png

VuePress Front Matter

使用了 YAML 格式的 Front Matter,定义了包括主页图片、特性标签、脚注等在内的内容,最终渲染得到了我们前面看到的静态页面。

更多

  • 支持 Github 风格的表格
851d116ceb1fb85cdf971b98c91bdfb3.png

VuePress表格

  • 支持目录生成
a0bd0d9ffb35d2fd684f18589835ffed.png

VuePress目录生成

  • 支持自定义容器
2915f65992ad4723929e31c7cc06708f

VuePress自定义容器

  • 支持代码块语法高亮
  • ……
c61e85e71822fde0f5bc8fd29407f1bd.png

VuePress特性

总结

VuePress 由 Vue.js 团队维护,使用简单,开箱即用,在 Vue 的驱动下能够提供用户友好的布局和交互,开发效率高,是一个值得使用的开源项目。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值