SSR服务器端渲染
服务端渲染（SSR）与客户端渲染（BSR）都是数据渲染的主要的方式
客户端渲染
前端利用ajax等数据交互手段获取服务端提供的数据之后，渲染到HTML页面。
服务器端渲染
整个网站先在服务器中运行，然后返回一个完整的HTML字符串，将这个字符串当成响应内容输出给浏览器。
SSR优势
- 利于搜索引擎抓取我们的页面。
- build之后，会静态化page页面，所以访问速度快。
Nuxt.js （重点）
Nuxt.js 是基于 vue 的服务器端渲染框架。
安装 create-nuxt-app 工具
npm install -g create-nuxt-app
使用 create-nuxt-app 创建 nuxtjs 项目
create-nuxt-app myapp1
其他创建 nuxtjs 项目的方法：
# 运行 create-nuxt-app
npx create-nuxt-app myapp1
# 或者
yarn create nuxt-app myapp1
创建 nuxt 项目的过程中，会问我们选择哪种渲染方式，这里一定要选择 Universal（通用的、普遍的）。
spa 是单页面应用，这种模式下，文件不会 ssr 渲染，所以 nuxt 就没有意义了。
// 如果想更改渲染方式，可以修改 nuxt.config.js 中的 mode 属性。
mode: 'Universal' // Universal 可以ssr； spa 不会ssr
nuxt 项目创建完毕后，先进入到项目中，然后运行起来:
cd myapp1
npm run dev
应用现在运行在 http://localhost:3000 上运行。
修改服务端口
package.json
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}
},
"script":{
}
scss
nuxt 本身不直接支持 scss，需要先安装模块：
cnpm i node-sass sass-loader -D
打开 layouts/default.vue 页面，编写scss代码测试。
<style lang="scss" scoped>
</style>
rem文件引入
// 不要使用这种方式引入rem，因为刷新页面时，会报找不到document错误，这是ssr渲染造成的问题。
import '~/assets/js/rem.js'
import 这种导入的作用是把碎片化的文件合并到一起。
在 static 目录下，建立 js/rem.js 文件。
static 目录是存放独立的文件的。
我们应该使用 script 标签引入 rem.js 文件，但 nuxtjs 中没有 html 页面，需要写在 nuxt.config.js 中。
在 nuxt.config.js 文件中：
head: {
script:[
{ src: '/js/rem.js', async: true, defer: true }
]
},
config 页面中 head 属性中所描述的文件，都直接在 static 中查找。
nuxtjs 没有所谓的 index.html 入口页，这个 index.html 实际是有 nuxt.config.js 编译而成的。
iscroll 、swiper 等插件也应该用此种方式引入。
重启网站服务后，就能够正常访问网站了。
刷新的时候，如果字体特别大，可以在 layouts/default.vue 中给 div{ font-size:0.3rem }
主布局页
layouts/default.vue 这个页面是主布局页面（入口页）。
div{
display: flex;
justify-content: space-around;
align-items: center;
li{
text-align:center;
a{
color:white;
text-decoration: none;
}
.nuxt-link-exact-active{
color: green !important;
}
}
}
nuxt标签可以理解成出口，每次触发路由跳转时，这部分内容会自动更新。该标签默认解析page/index.vue
路由
在 pages 文件夹下创建 buycar/index.vue 文件
在任意 vue 页面中写链接
<nuxt-link to="/mine">我的</nuxt-link>
当点击链接后，视图层会自动更新。
获取远程数据
下载
cnpm i axios -S
引入
import axios from 'axios';
使用
asyncData方法会在组件（限于page页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。
- 因为 asyncData 在前端渲染页面之前调用，所以 asyncData 中没有 this。
- 先通过 asyncData 中的代码获取到远程的数据，然后再把得到的远程数据合并到当前前端组件 data 中，然后在渲染页面，这就是 ssr 渲染的过程。
export default {
async asyncData({ params }) {
let { data } = await axios.get('/1.json');
console.log('data:', data);
return data; // 这个return会把结果和data属性的值自动合并，视图层直接调用即可。
}
};
如果不喜欢 es6 的 async/await，那么也可以使用回调函数。
asyncData({ params }, callback){
axios.get(`http://127.0.0.1:3000/goods`).then(res=>{
callback(null, {
a:1,
arr:res.data
})
})
}
在 static 中新建 1.json 做模拟数据，例如 {a:1, b:2}
在视图层可以直接使用return返回来的数据
{{ a }}
vuex
安装
cnpm i vuex -S
在 store 目录下，新建 index.js 文件
在 Nuxt 中已经对 vuex 进行了处理，所以此处直接导出 state 和 mutations 即可。
export const state = ()=>({
a : 102
})
export const mutations = {
add(state){
state.a++
}
}
export const actions = {
add(context){
context.commit('add');
}
}
export const getters = {
abc(state){
return state.a*2;
}
}
组件页
<button @click="add">{{a}}</button>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
export default {
computed:{
...mapState(['a']),
...mapGetters(["abc"])
},
methods:{
...mapActions(['add'])
},
mounted(){
console.log( this.$store )
}
};
记得重启服务，否则会报 state 不存在这种错误。
打包
项目都开发完毕之后，我们需要将开发环境下的碎片化的文件做合并，这个过程就叫做打包（发布）。
我们最终交付上线的是打包后的文件（交付的是生产环境下的代码）。
打包的方法有两种：
- 如果mode=universal（ssr）模式的话，generate可以生成dist目录
npm run generate
- 如果mode=spa模式的话，build和generate都可以生成dist目录
npm run build
可以看看 package.json 文件中的 scripts 属性，每个脚本都有特殊的作用。
部署
将上一步的 dist 文件夹放入网站服务器下，这样别人就可以通过浏览器直接访问了。
有很多种部署网站的方法，比如 nodejs：
文件结构
www/
node_modules/
dist/
app.js
app.js 代码
// npm install express
const express = require('express');
const app = express();
app.use(express.static('dist'));
app.listen(80);
开启网站服务
node app.js
用户打开浏览器访问这个nodejs站点即可
网友评论