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

2018-04-15 admin

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

Vue与SEO搜索引擎优化

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

Vue与SSR服务端渲染

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


什么是VuePress

VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题。 它是为了满足Vue自己的子项目文档的需求而创建的。 VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好。一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载。

VuePress是怎样运作的

一个VuePress应用实际上就是基于VueVueRouter以及webpack,如果你以前就用过vue,那么当你在用VuePress开发或者定制自己的主题的时候,你会发现使用体验几乎是一毛一样~你甚至可以用Vue DevToolsdebug你的定制主题! 在build的过程中,VuePress会通过创建一个服务端渲染的版本,并访问每一个路由来渲染相关的html。这种方法是来自Nuxtnuxt 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~

原文链接:https://segmentfault.com/a/1190000014388622

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-27610.html

文章标题:[译]VuePress - 基于Vue的静态网站生成器

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部