奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 开源框架 >

VuePress一个全新的静态网站生成器,使用说明

时间:2018-04-15 12:03来源: 作者:小邱
Vue.js的创始人尤雨溪大大在twitter上发布了一个全新的基于Vue的静态网站生成器-,这对于广大Vue爱好者来说无疑是一个好消息噜!

官方文档 vuepress.vuejs.org


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字段进行配置。构建的文件可以部署到任何静态文件服务器。

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-04-22 10:04

关注奔三路小程序,方便你我他