一个构建和预发布一个seo友好网站的例子
受我最近的经验启发，我花了一些时间来制作一个Vue。我们社区的js教程。现在，我将主要介绍两个主题:
如何使用Vue.js构建一个瘦的web应用程序
如何处理vue.js SEO &与预注册- spa插件
更具体地说，我将带您通过创建一个具有seo友好产品页面的小商店。现场演示和代码回购也将提供。如果你想用Vue来寻找更深入的SEO知识。我们还制作了一个视频教程，你会在这篇文章的最后找到。
我在最新的无头CMS系统中略微提到了Vue，但这次会更深入，所以我很兴奋。
更新:我们正在逐步将Snipcart的前端从主干迁移到Vue。你们可以在这里读到。这里还介绍了Vue转换，并在这里建立了一个Vue博客。
让我们先对那些不熟悉渐进框架的人有所了解。
什么是vue.js到底是什么?
what-is-vuejs-definition
Vue是一个轻量级的、渐进的JavaScript框架，它可以帮助您创建web界面。
不要被定义的“JS框架”所迷惑。对于Vue来说，它与它时髦的对抗式反应截然不同。js & Angular.js。首先，它不是像谷歌和Facebook这样的商业科技巨头的开源副产品。
Evan是在2014年首次发布的，目的是创建一个“增量可接受”的现代JS库。这是Vue最强大的特性之一:创建可插入组件，您可以添加到任何项目，而不需要进行重大的重构。任何开发人员都可以在项目中尝试Vue，而不会破坏或加重其现有代码库。
除了模式术语之外，我觉得Vue的前提是:
1。你不可能从一开始就知道整个应用程序的状态结构
2。您的数据肯定会在运行时发生变化
它围绕着库本身的这些约束:它是递增的、基于组件的、并且是被动的。组件的粒度结构使您可以轻松地将逻辑关注点分离，同时保持对它们的可重用性。最重要的是，它会将你的数据绑定到视图上，这样当需要的时候(通过观察者)就可以神奇地更新数据。尽管可以用许多具有反应性的前端框架来定义相同的定义，但我发现Vue的实现更优雅，而且对于大多数用例来说，这是一个更好的方法。
Vue的学习曲线比它的反应更柔和，这需要JSX模板知识。
一个人甚至可以说Vue是反应减去尴尬的部分!,)
与其他JS框架进行更深入的比较——反应，角度，余烬，敲除，聚合物，暴乱-检查官方文档的主题。
最后但同样重要的是，性能和见解深刻的开发工具Vue提供了一个很棒的编码体验。毫无疑问，它的普及正在飞速发展。
vuejs-popularity
从像Laravel & PageKit这样的开源项目到像Gitlab & Codeship这样的企业(更不用说阿里巴巴和百度巨头)，很多组织都在使用Vue。
然而，现在是时候看看我们该如何使用它了。
我们的vue.js示例:一个快速、友好的电子商务应用程序
在本节中，我将向您展示如何使用Vue 2.0 & Snipcart，我们的devs HTML/JS cart平台构建一个小型电子商务应用程序。我们还将看到如何确保产品页面正确地“爬行”用于搜索引擎机器人。
的必备条件
最小的Vue知识。js-start这里。
基本了解vuex和vue路由器。
一个Snipcart帐户(永远免费的测试模式)。
如果你想更深入地了解所有的东西Vue 2.0,laracast ‘让你覆盖了这个系列。
1。设置环境
首先，我们将使用Vue – cli来搭建一个基本的Vue应用程序。在您最喜欢的终端，输入:
npm安装- g vue-cli
vue init webpack-simple vue-snipcart
这将创建一个新的vue – snipcart文件夹，其中包含一个使用vue – loader的基本配置。它还将使我们能够编写一个单一的文件组件(模板/ js/ css)。vue文件)。
我们希望这个演示尽可能真实，所以我们将在Vue SPA中添加另外两个模块，用于大型应用程序:vuex和Vue – router。
vuex是一种类似flux的状态管理器——非常轻，但非常强大。它受到Redux的强烈影响，在这里你可以学到更多。
vue- router允许你定义动态处理应用程序组件的路由。
要安装这些，请进入新的vue – snipcart项目文件夹并运行以下命令:
npm安装,节省vue-router
npm安装,节省vuex
另一件要安装的东西是预插- sp – plugin，它将使我们能够完成可爬行的路由:
npm安装,节省prerender-spa-plugin
我们快到了，最后四个包是:
对于模板，我更喜欢HTML。
vuex- rouc – sync可以直接在我们的vuex状态中注入我们的路由器信息。
copy- webpackin – plugin可以让我们更容易地在dist文件夹中包含我们的静态文件。
babel- polyfillo在PhantomJS中运行Vue(在我们的预发布插件中使用)。
运行这些:
npm安装,节省vuex-router-sync
npm安装,节省copy-webpack-plugin
npm安装,节省babel-polyfill
2。组装体系结构
安装:检查。是时候设置一切了，这样它就能处理我们商店的数据了。
让我们从vuex商店开始。我们将用这个来存储/访问我们的产品信息。
在这个演示中，我们将使用静态数据，不过如果我们想要获取它，它仍然会工作。
注意:使用Snipcart，我们使用一个基本的JS片段插入购物车，并使用简单的HTML属性在标记中定义产品。
2.1构建存储
在src文件中创建一个存储文件夹，以及3个文件:
状态。js定义我们的静态产品
getter。通过ID定义一个get函数来检索产品
索引。js把前两个捆绑在一起
2.2建筑路由器
我们将保持我们的商店基本:首页列出产品+每个产品的详细信息页面。我们需要在路由器上注册两条线路来处理这些:
2.3将这些链接到一起
现在我们有了我们的商店和路由器，我们需要在我们的应用程序中注册它们
3所示。制作Vue组件
拥有数据感觉很棒，但显示它更好。
4所示。创建应用程序
让我们使用我们的新组件，是吗?
打开App.vue文件。其中的内容仍然是由vue init webpack-simple scaffolding生成的默认值。
5.Vue处理。js SEO与预发布插件
我们的应用程序的所有内容都是动态呈现的，而JS并不是超级搜索引擎优化:我们页面的异步内容不能被搜索引擎机器人最优地抓取。如果有一个电子商务网站错过了所有有机的交通机会，那将是不明智的。
考虑为你的应用程序页面添加适当的元标签&一个站点地图。您可以在这里学习更多关于元标签的“postProcessHtml”功能。
伟大的内容在现代SEO中起着巨大的作用。我们建议在你的应用程序中确保内容的创建、编辑和优化。为了增强内容编辑能力，可以考虑将无头CMS放入混合结构中，并构建一个真正的JAMstack。
HTTPS connexion现在正式成为谷歌的排名因素。我们在Netlify上托管这个演示，它提供所有计划的免费SSL证书。
移动先行索引和移动友好度排名是真实的。确保你的移动体验和桌面体验一样快和完整!
GitHub repo,live Vue演示和视频教程