[译]VuePress - 基于Vue的静态网站生成器

4月12日，Vue.js的创始人尤雨溪大大在twitter上发布了一个全新的基于Vue的静态网站生成器-，这对于广大Vue爱好者来讲无疑是一个好消息噜！

Vue与SEO搜索引擎优化

SEO (Search Engine Optimization)-对于开发者来讲是一项必不可少的技能，尤为是前端的同窗们。好比在html文件头部加上网站的关键字keywords，以及网站描述description，再到正确的使用html标签等，这些在传统的服务端渲染页面的模式下，就妥妥的足够了。
可是随着前端技术的不断发展壮大，先后端分离开发模式的大行其道，愈来愈多的前端开始使用Vue等MVVM模型的框架进行开发，这种数据驱动，动态渲染的方式，对于搜索引擎爬虫来讲是很是不友好的，每每网站的内容很难被正确收录，因此在pc端页面大部分仍然采用服务端渲染的方式。

Vue与SSR服务端渲染

Vue结合SSR服务端渲染就是对seo进行优化的一种解决方案，它的原理就是利用webpack和node.js将Vue生成的html文件发送给服务器，而后再由服务器渲染出来。这样作就能渲染正确的html文件，达到搜索引擎的优化，可是缺点也有一些，他要求前端开发者必须了解一些node语法，同时也加剧了服务器渲染的压力，开销较大。

---

如下内容来自官方文档 vuepress.vuejs.org

什么是VuePress

VuePress由两部分组成：一个基于Vue的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。 它是为了知足Vue本身的子项目文档的需求而建立的。
VuePress为每个由它生成的页面提供预加载的html，不只加载速度极佳，同时对seo很是友好。一旦页面被加载以后，Vue就全面接管全部的静态内容，使其变成一个彻底的SPA应用，其余的页面也会在用户使用导航进入的时候来按需加载。

VuePress是怎样运做的

一个VuePress应用实际上就是基于Vue、VueRouter以及webpack,若是你之前就用过vue,那么当你在用VuePress开发或者定制本身的主题的时候，你会发现使用体验几乎是一毛同样~你甚至能够用Vue DevTools来debug你的定制主题！
在build的过程当中，VuePress会经过建立一个服务端渲染的版本，并访问每个路由来渲染相关的html。这种方法是来自Nuxt的nuxt generate命令,和其余项目如Gatsby的启发。
每一个markdown文件都被编译为HTML，而后做为Vue组件的模板进行处理。这样你能够在markdown文件中直接使用Vue，这在须要嵌入动态内容的时候很是有用。

VuePress特性

• 内置的markdown扩展专为技术文档优化
• 能够在markdown文件中直接使用vue
• vue驱动的可定制画主题
• 支持PWA - Progressive Web App（渐进式网页应用程序）
• 集成Google Analytics

• 一个默认的VuePress包括：

  1. 响应式布局
  2. 可选的主页
  3. 一个简单的头部搜索组件
  4. 可定制的导航栏和侧边栏
  5. 自动生成的GitHub连接和页面编辑连接

开始使用VuePress

全局使用

# install globally
npm install -g vuepress

# create a markdown file
echo "# Hello VuePress!" > README.md

# start writing
vuepress dev .

# build
vuepress build .

在现有项目中安装

若是你已经有一个项目，能够将VuePress做为本地依赖进行安装，这种方式一样支持使用CI或Netlify等服务在推送时自动部署。

# install as a local dependency
npm install -D vuepress

# create a docs directory
mkdir docs
# create a markdown file
echo "# Hello VuePress!" > docs/README.md

# start writing
npx vuepress dev docs

也能够直接在package.json中加入：

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

而后执行下面的命令行来运行项目

npm run docs:dev

默认状况下，构建的文件将位于.vuepress / dist中，也能够经过.vuepress / config.js中的dest字段进行配置。构建的文件能够部署到任何静态文件服务器。

---

咳咳，今天的翻译先进行到这里，要睡觉了！明天来一发试试~night~