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

news/2024/4/27 23:39:29/文章来源:https://blog.csdn.net/weixin_34174132/article/details/88838932

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.vuejs.org

什么是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~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_754065.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

squid代理快速搭建_网站安全渗透 之squid代理漏洞挖掘与修复

在对网站进行渗透测试的时候,发现很多网站都在使用squid反向代理系统,该系统存在可以执行远程代码的漏洞,很多客户找我们做渗透测试服务的同时,我们会先对客户的网站进行信息搜集工作,包括域名,二级域名收集…

图片展示网站源码_arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示(附源码下载)...

前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习…

pygame.image.load()找不到图片_PPT背景low?找不到好看的图片?那是因为你不知道这几个图片网站...

大家都知道,做PPT想要做得高大上一点,一些精美、高逼格的图片就不可缺少了。那么日常你是不是总是为PPT的背景、图片而烦恼,觉得PPT的背景太单调了,里面的图片太low了,想要换成高大上一点的图片,但是又不知…

最新ie图标变灰css,网站变灰的CSS代码(兼容火狐、Chrome、IE系浏览器)——w3cdream|前端学习-开发...

之前找了一些代码在火狐下无效,于是百度谷歌一起上,终于被我找到了支持火狐、谷歌等浏览器的把网页变黑白代码:/* 网站黑白代码 */html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filt…

使用Python-Flask框架开发Web网站系列课程(四)构建前端

版权声明:如需转载,请注明转载地址。 https://blog.csdn.net/oJohnny123/article/details/81988424 前言 使用IDE:PyCharm 操作系统:Mac Python的版本:3.6 我的邮箱:51263921qq.com 交流群:3724…

【2018可信云大会】CTO袁国成:HTTPS网站安全评估与监测告警解决方案

2019独角兽企业重金招聘Python工程师标准>>> 袁国成:现在下午时间大家都比较累了,给大家带来一些干货。我今天分享的主题是关于HTTPS网站的安全评估与告警监测。 以往我们在分享安全话题的时候,比较多的是关于网络安全的&#xff…

【Gridsome】静态网站生成

Gridsome 介绍 Gridsome 是一个免费、开源、基于 Vue.js技术栈的静态网站生成器 什么是静态网站生成器静态网站的好处常见的静态网站生成器JAMStack静态应用的使用场景 不适合管理系统 简单页面展示 想要有更好的 SEO 想要有更好的渲染性能 Gridsome 是由Vue.js驱动的Jamsta…

echarts 各种图表网站,留着有用

2019独角兽企业重金招聘Python工程师标准>>> https://echarts.baidu.com/examples/#chart-type-treemap 转载于:https://my.oschina.net/u/3222944/blog/3001309

Java程序员的职业发展路线 附:大型网站 -- 架构技能进阶图谱

职业发展道路基本有3条: 第一条路线(技术专精): 初级Java开发---中级--高级---项目主管--Java项目经理---网站架构师----资深专家 第二条路线(技术转产品):初级Java开发---中级--产品策划--产品…

宜春网站建设

2019年“五一”小长假结束,很多人给假期生活的总结估计是“人从众”、“买买买”,以致文化和旅游部都用“繁荣超预期”来形容“五一”的文化和旅游市场。据调查,许多人都是通过网上购买火车票、飞机票、各景点门票以及预订酒店,很…

jquery 当页面图片加载之后_谷歌SEO页面速度的重要性

什么是页面速度?页面速度是指网页加载所需的时间。一个页面的加载速度是由几个不同的因素决定的,包括网站的服务器、页面文件大小和图片压缩。也就是说,"页面速度 "并不像 "网页速度 "那么重要。"页面速度 "并…

网站建设协议_了解这几个企业建站流程做出来的网站更让客户喜欢

网站建设步骤是网站建设当中一个重要环节,一个网站看它好不好,重要一点就是这个网站建设了。因为好的网站建设能够让浏览网站用户,一直停留在网站当中。很多人会问这个网站建设要怎么样才能够让用户喜欢,为什么宁开亮传媒免费做的…

javamail发送html_SpringBoot入门建站全系列(十)邮件发送功能

SpringBoot入门建站全系列(十)邮件发送功能Spring Mail API都在org.springframework.mail及其子包org.springframework.mail.javamail中封装。 JavaMailSenderImpl: 邮件发送器,主要提供了邮件发送接口、透明创建Java Mail的MimeMessage、及邮…

访问调用https_(二)http协议的网站装ssl升级成https

最终目标:微信小程序要想上线 必须内部所有域名都是https,比如网络图片,比如后端接口,比如其他链接。问:既然https://minihome.top/能直接访问了,那我用eggjs(node)写的后端接口是不是就可以正常访问了&…

推荐几个很好很好用的网站

1. MSDN 这是非官方性质的微软网站,但是它无广告,提供了很多的微软资源,却是相当的良心。如果要安装操作系统、office、VS、Visio等都可以从这个网站上进行下载。 2. 高清图片 该网站提供很多高清壁纸,风格清新,艺术风…

大型网站架构技术一览

大型网站的挑战主要来自庞大的用户,高并发的访问和海量数据,任何简单的业务一旦需要处理数以P计的数据和面对数以亿计的用户,问题就会变得棘手。大型网站架构主要就是解决这类问题。 本文内容大部分来自《大型网站技术架构》,这本书很值得一…

大型网站架构演化历程

摘自《大型网站技术架构》:第一章 大型网站架构演化 目录 一、大型网站系统的特点 二、 大型网站架构演化发展历程 1. 初始阶段的网站架构 2. 应用服务和数据服务分离 3. 使用缓存改善网站性能 4. 使用应用服务器集群改善网站的并发处理能力 5. 数据库读写分离 6. 使…

珍藏30年的网站都在这了,自媒体运营必不可少

目录 01办公协作 02 图库 03新媒体相关 04 APP相关 05 小程序相关 06 H5制作 06 二维码 07 问卷 08 gif 09 大数据 10 SasS类平台 11 KOL采购及广告投放 12活动会议 13 长短连接 14 搜索工具 15 思维导图 16 图片处理 17 识图工具 18 表情包 01办公…

HMDB网站 爬取工具

HDMB网站有一个特别不友好的地方是: 搜索相应太慢,成功率还低,这个简直太不爽了。不过白天体验明显好于晚上体验…原因自己品吧 效果图工具使用部分效果 根据HMDBID下载结果 设置搜索条件搜索结果 解析成Excel文件 接受定制任务

网站、数据库的衍变之路(三)

话接前文《网站、数据库的衍变之路(二)》。上文讲了几种静态化方案的利弊,有朋友要讲详细一点,呵呵,这不属于本文的范畴。也有朋友说有些网站不适合搞静态化,是有这种情况。但是在这个时期,网站还处于刚发展的起始阶段…