vuejs全家桶之nuxt.js的使用 vuejs全家桶之nuxt.js的使用

参考文档官网：https://nuxtjs.org/guide
中文：https://zh.nuxtjs.org/guide/installation
什么是nuxt.js? Nuxt.js 是一个基于 Vue.js 的通用应用框架。完成 vuejs 项目的服务器端渲染
SSR 和我们 nuxt.js 有什么关系？

nuxt.js 就是完成 vuejs 项目的服务器端渲染。主要是为了解决 vuejs 项目不利于SEO的问题。

为什么要使用 nuxt.js 实现服务器端的渲染？

没有使用 nuxt.js 的时候 vuejs 项目的不能服务器端渲染，使用的是客户端BSR（都是前后端分离，通过api接口获取数据，然后前端渲染，是不利于SEO，因为网页里面的动态添加，对于搜索引擎爬取网站的时候，是看不到内容的，网站很难被搜索引擎收录，网站的流量很小，自然不容易出名）。

nuxt.js的使用 【vuejs全家桶之nuxt.js的使用】建议使用第三方库nuxt.js ---------https://zh.nuxtjs.org/guide
第一步快速生成一个项目：> $ npx create-nuxt-app <项目名> (npx在NPM版本5.2.0默认安装了)
------------------或者用yarn：yarn create nuxt-app <项目名>
第二步根据需要选择对应选项

文章图片

文章图片

选择完以后会自动生成一个项目，大概长下面这样，我们分析一下每个文件的作用

文章图片

第三步：实操 1，首先我们先来练习路由,一共有三种路由方式（我们只需要写路由即可，文件会自动生成路由映射）

基础路由

动态路由、路由参数

路由嵌套

** 1，基础路由案例，我们可以在pages下面建一个users文件夹，文件夹下建一个index.vue组件，代码如下**

输入网址：http://localhost:3000/users得到结果如下，
这里要注意一下，因为我的文件叫index.vue，所以可以省略不写index，以后其他indx文件也可以不写

文章图片

2，动态路由、（路由参数）案例：我们可以在在pages下面建一个news文件夹，文件夹下建一个list.vue组件

然后再建一个_id.vue文件，这里注意:_id表示变量，文件中的id也是根据路由变化的

输入网址：http://localhost:3000/news得到结果如下，

文章图片

点击新闻一：

文章图片

3，路由嵌套案例：我们可以在在pages下面建一个goods.vue组件

在pages下面建一个goods文件夹，文件夹里面建一个list.vue组件，这里随便定义几条路由

输入网址：http://localhost:3000/goods/list得到结果如下，这个父容器会把子组件中的内容会放到父页中

文章图片

第四步，layouts/default.vue设置公共头和尾,在每一个页面都有一样的头尾

效果是这样的

文章图片

第五步，向服务器端请求数据，现在真的要操作了在pages下面建一个movie文件夹，文件夹里面建一个list.vue组件

import axios from 'axios' export default { name: "list.vue",// 发送网络请求可以把这个暂且理解为 created 声明周期函数 asyncData:function(context){// console.log(context.req.url); // 代表请求头信息 // console.log(context.req.method); // 代表请求头信息 // console.log(context.res); // 代表响应头信息 // console.log(process.server); // 可以标识当前运行环境 ssr 为true// 发送网络请求 //这个地址是猫眼电影的一个接口 // var url='http://m.maoyan.com/ajax/movieOnInfoList?token=' //这里有一个**注意事项（1）**//三目运算符，判断当前的执行环境是服务器端还是浏览器端 var url = process.server ? 'http://m.maoyan.com/ajax/movieOnInfoList?token=' : '/ajax/movieOnInfoList' // 1. nuxt 第一次的请求的时候，是服务器请求没有跨域http://m.maoyan.com/ajax/movieOnInfoList?token= // 2. 以后都是前端请求，存在跨域： /ajax/movieOnInfoList ==> '@nuxtjs/proxy'==>http://m.maoyan.com/ajax/movieOnInfoList?token=return axios.get(url).then(response => { console.log(response.data.movieList) if(response.status == 200 ){ console.log(response) return { movieData:response.data.movieList } } }).catch(error=>{ console.log(error) }) } }

注意事项（1）：第一次请求url路径是，是服务器端进行api请求，获取数据，然后渲染，当渲染后的数据（html代码 js代码）返回给浏览器后，以后的执行环境都是浏览器环境，以后asyncData函数在浏览器端执行，在浏览器端做页面切换时，发送网络请求给猫眼的服务器都是由浏览器发出的
注意事项（2）:如果是浏览器渲染，因为同源政策，则会出现跨域问题，而服务器猫眼同源政策问题所以不会有跨域问题
总结注意事项(1)，（2）:1. nuxt 第一次的请求的时候，是服务器请求,没有跨域问题；
--------------------以后都是前端请求，存在跨域
如何解决跨域问题？官方给出的解决方案是使用代理解决跨域问题
原理为出现跨域的请求设置代理服务器，以后对于这个跨域的请求，当前的这个代理就会拦截起来，通过这个代理服务器帮我们向跨域的服务器发送网络请求，然后把响应回来的数据进行返回，从而解决跨域问题。
解决：
1下载这个中间件，专门解决跨域问题；

npm i @nuxtjs/proxy

2在 nuxt.config.js 配置文件中添加对应的模块，并设置代理；

modules: [ '@nuxtjs/axios', '@nuxtjs/proxy' ], axios: { proxy: true }, proxy: { // 前端如果遇到 /ajax/movieOnInfoList 请求交给 @nuxtjs/proxy（代理服务器）向 target 服务发送网络请求 '/ajax/movieOnInfoList': { target: 'http://m.maoyan.com/ajax/movieOnInfoList?token=',} },

3，放在template中，渲染页面，最后结果：