什么是SSR？
SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。
那服务器端渲染到底有什么好处呢？
(1)SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜索引擎能够索引到页面内容。
(2)更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取，然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。
Nuxt.js是特点（优点）：
?自动代码分层
?服务端渲染
?强大的路由功能，支持异步数据
Nuxt环境搭建：
（1）用npm来安装vue-cli这个框架。
（2）使用vue安装 nuxt
vue init nuxt/starter
（3）使用npm install安装依赖包
Nuxt目录结构
Nuxt常用配置项
/package.json
"config":{
"nuxt":{
"host":"127.0.0.1",
"port":"1000"
}
},
配置全局CSS
/nuxt.config.js
css:['~assets/css/normailze.css'],
配置webpack的loader
//比如现在我们要配置一个url-loader来进行小图片的64位打包。
//就可以在nuxt.config.js的build选项里进行配置
build: {
loaders:[
{
test:/\.(png|jpe?g|gif|svg)$/,
loader:"url-loader",
query:{
limit:10000,
name:'img/[name].[hash].[ext]'
}
}
],
}
标签params传递参数
<ul>
<li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
<li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
<li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li>
</ul>
//在new.vue里面
<p>NewsID:{{$route.params.newsId}}</p>
//又如：
<li><a href="/news/123" rel="external nofollow" >News-1</a></li>
<li><a href="/news/456" rel="external nofollow" >News-2</a></li>
///pages/news/_id.vue
<h2>News-Content [{{$route.params.id}}]</h2>
参数校验
使用了validate方法，并把params传递进去，然后用正则进行了校验，如果正则返回了true正常进入页面，如果返回false进入404页面。
/pages/news/_id.vue
export default {
validate ({ params }) {
// Must be a number
return /^\d+$/.test(params.id)
}
}
Nuxt的路由动画效果
例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个normailze.css文件。
/assets/css/normailze.css(没有请自行建立)
.page-enter-active, .page-leave-active {
transition: opacity 2s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
//然后在nuxt.config.js里加入一个全局的css文件就可以了
css:['assets/css/main.css'],
//这时候在页面切换的时候就会有2秒钟的动画切换效果了，但是你会发现一些页面是没有效果的，这是因为你没有是<nuxt-link>组件来制作跳转链接。你需要进行更改。
Nuxt的默认模版和默认布局
Nuxt为我们提供了超简单的默认模版订制方法，只要在根目录下创建一个app.html就可以实现了。
<!DOCTYPE html>
<html lang="en">
<head>
{{ HEAD }}
</head>
<body>
<p>这是可以随便写些什么会在每个页面都会显示的</p>
{{ APP }}
</body>
</html>
Nuxt的错误页面和个性meta设置
在根目录下的layouts文件夹下建立一个error.vue文件，它相当于一个显示应用错误的组件。
<template>
<div>
<h2 v-if="error.statusCode==404">404页面不存在</h2>
<h2 v-else>500服务器错误</h2>
<ul>
<li><nuxt-link to="/">HOME</nuxt-link></li>
</ul>
</div>
</template>
<script>
export default {
props:['error'],
}
</script>
个性meta设置
head(){
return{
title:this.title,
meta:[
{hid:'description',name:'news',content:'This is news page'}
]
}
}
asyncData方法获取数据
asyncData(){
return axios.get('https://api.myjson.com/bins/1ctwlm')
.then((res)=>{
console.log(res)
return {info:res.data}
})
}
//或者
async asyncData(){
let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
return {info: data}
}
打包发布
拷贝下面标记的文件至服务器部署目录
执行代码
npm install -production
npm run start
如果服务器是ngxin,配置如下代码
server {
listen 80;
server_name www.test.com;
location / {
root /opt/deploy/front; # 前端文件目录
proxy_pass http://127.0.0.1:3000;
}
}
如果想改变端口号，直接在package.json里面去加一段
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}
}
nuxt中npm run dev/npm run build/npm run generate区别
npm run dev:开发模式
npm run build/npm run start;项目打包
npm run generage/npm run start;静态化项目
