vue技巧：解决网页静态化的问题
我们使用vuecli打包出来的vue页面，只有一个html。不错这确实是spa牛逼的地方。
但是对于seo来说，这也是一个致命缺陷。
那就是，完全没法seo。这货连个实体页面都没有。那就很难受了。
此时我们需要借助插件prerender-spa-plugin解决问题。在项目目录输入
这里你需要注意一点，你现在需要设置你的route为history模式。当然我们一直是这个模式，之前有人使用hash模式，那个是不可取的。
接着打开webpack.prod.conf.js这个文件在build文件夹中，添加
然后还是这个文件，找到plugins，在里面加入
注意着里面的地址，是生成静态化以后的目录，这里跟你的route地址是对应的。按照你的route来写。
然后重新输入
完成后是这样的
这只是一个治标不治本的解决办法！因为只有route中的页面被生成了静态页面，我们的内容页面是无法生成静态的。那么这该怎么办呢？如果你既想使用vue那简介的语法进行开发，又希望项目能实现cms那样自动生成静态的功能，你就需要用到一个吊炸天的东西—基于vue的nuxt.js来开发！
请持续关注龙哥的后续教程！
在vue下面创建新页面并引入样式（图文讲解）
1.在components下面新建一个grid.vue的文件，在文件里放入内容
2.在css里新建一个grid.css文件，把grid.vue需要的样式放进来
3.在router里的index.js里import，import 文件名 from 文件存放的路径；并在routes下面写好路由
4.在main.js里引入grid.css的样式，import '路径名'
【手把手撸vue项目】vue欢迎页解析
在介绍完简单的项目目录之后，我们对项目自动生成的欢迎页进行讲解（也就是对src目录进行讲解）。
在这个文件中，我们可以进行路由配置，包括子路由等，也可以通过导航守卫进行路由限制。
举个例子：某些页面需要登录，跳转到这些页面的时候，我们就将其进行拦截，跳转到登陆页面去。这部分内容后期会进行讲解。
图中，我们不难看出，默认引入了叫HelloWorld.vue的文件。并在routers中进行了使用。
path: url访问的路径，这里的‘/’表示在 的时候进行访问。
name: 这个router的名字，跳转时也可通过name来指定跳转到哪个路由中。
component: 顾名思义，表示使用的哪个组件。
在vue项目中，组件存放在components文件夹中，这些组件可以通过路由来进行使用，也可以通过组件间的引入来进行使用。
VuePress-Vue驱动的静态网站生成器入门教程
VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。
在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 Nuxt (opens new window)的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby
1、创建并进入一个新目录
2、使用你喜欢的包管理器进行初始化
3、将 VuePress 安装为本地依赖
我们已经不再推荐全局安装 VuePress
4、创建你的第一篇文档
5、在 package.json 中添加一些 scripts
这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。
6、在本地启动服务器
VuePress 会在 (opens new window)启动一个热重载的开发服务器。
现在，你应该已经有了一个简单可用的 VuePress 文档。接下来，了解一下推荐的 目录结构 和 VuePress 中的 基本配置。
VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：
如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：
一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：
对于上述的配置，如果你运行起 dev server，你应该能看到一个页面，它包含一个页头，里面包含一个标题和一个搜索框。VuePress 内置了基于 headers 的搜索 —— 它会自动为所有页面的标题、h2 和 h3 构建起一个简单的搜索索引。
你也可以使用 YAML (.vuepress/config.yml) 或是 TOML (.vuepress/config.toml) 格式的配置文件。
一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、 侧边栏（sidebar）和 首页（homepage） 等，
由于 VuePress 是一个标准的 Vue 应用，你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧