VUE服务器端渲染

1、解决首页加载白屏

SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。
1） SPA单页面应用
传统SPA应用的优点是前后端分离，后端只负责提供数据，前端加载完之后体验良好，内容改变不需要加载全部页面，缓存数据，减少服务器压力，提高性能。
2） SPA单页面应用缺点
a、SPA工作的流程是第一次将所有需要的前端搭建的构建脚本资源文件全部下载下来，然后运行脚本异步加载数据，渲染页面。但是会造成：
b、首屏慢：第一次加载所有资源
c、SEO优化差：由于页面内容通过js插入，对于内容性网站来说，搜索引擎无法抓取网站内容 页面复杂度成倍提高，前端开发的要求提高。
3） Nuxt.js
a、是vue中一款SSR的js框架；
b、Nuxt是什么：它是一个以vuejs为基础的应用框架，在内部配置了vuejs服务端渲染的各种配置。可以将html在服务端渲染，合成完整的html文件再输出到浏览器。

2、使用

1）下载：
npx create-nuxt-app 项目名
2）选择下载方式

3）选择








4）运行
a、cd到项目下
b、启动
npm run dev
注：编译过后，将会多一个文件夹（ .nuxt ）

3、应用

1）一级路由导航的写法

注：①nuxt-link-exact-active选中样式类
    ②使用路由:
 	<nuxt-link to="/XXX">XXX</nuxt-link>
    ③路由出口：<nuxt />

2）二级路由（home的二级路由）
①创建内嵌子路由，需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件（即二级路由组件）。
②在父组件(.vue文件) 内增加 用于显示子视图内容。


③在父组件中

<nuxt-link to="/home/erb">erb</nuxt-link>
<nuxt-child />

④例子

3）创建变量


4)路由传参
① 需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

②传参：

<nuxt-link to="/demo/我是参数">/demo</nuxt-link>

③接收：

	created(){
		console.log(this.$route.params.xiaoming);
	}

vue动画

1、Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
2、使用标签把要执行动画的DOM元素包裹起来，可以使用name属性给这个动画增加自定义名称。

3、过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：
开始：
1）v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2）v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3）v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除
离开；
4）v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5）v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6）v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。