前端Nuxt

Nuxt
Nuxt概念导读
为什么要使用Nuxt
使用vue或者react开发的spa单页应用系统对SEO不友好, 需要解决SEO的问题
新闻门户、博客系统有SEO的需求, 希望被搜索引擎收录, 百度排名靠前等
谈到SEO, 什么是SEO呢
利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名
目的是让其在行业内占据领先地位, 获得品牌收益
很大程度上是网站经营者的一种商业行为, 将自己或自己公司的排名前移
什么是客户端渲染, 什么是服务端渲染
客户端渲染
浏览器（客户端）通过 AJAX 向服务端(java servlet)发送 http请求数据接口
服务端将获取的接口数据封装成 JSON, 响应给浏览器
浏览器拿到JSON就进行渲染html页面, 生成DOM元素, 然后将页面展示给用户
客户端渲染特点
服务端只响应数据, 不生成html页面
浏览器（客户端）负责发送请求获取服务端的数据, 然后渲染成html页面
服务端渲染
浏览器（客户端）向服务端(java servlet)发送 http请求数据接口
服务端 （servlet ）会生成html页面, 响应给浏览器
浏览器直接将接收到html页面进行展示
服务端渲染特点
在服务端生成 html 页面
浏览器（客户端）只负责显示 html 元素内容
为什么使用服务端渲染
与传统的SPA（单页面应用程序）相比, 服务端渲染的优势主要有哪些：
更好的 SEO, 由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
如果你的应用程序初始展示Loading图, 然后通过Ajax获取内容，抓取工具并不会等待异步完成后再行抓取页面内容.也就是说, 如果SEO对你的站点至关重要, 而你的页面又是异步获取内容, 则你可能需要服务器端渲染(SSR)解决此问题
更快的内容到达时间（首屏加载更快）, 因为服务端只需要返回渲染好的HTML, 这部分代码量很小的, 用户体验更好
但也有需要权衡之处
首先就是开发成本比较高, 比如某些声明周期钩子函数（如beforeCreate、created）能同时运行在服务端和客户端, 因此第三方库要做特殊处理, 才能在服务器渲染应用程序中运行
由于服务端渲染要用Nodejs做中间层, 所以部署项目时, 需要处于Node.js server运行环境
在高流量环境下, 还要做好服务器负载和缓存策略
什么是NuxtJs
Nuxt.js是一个基于Vue.js的通用应用框架
通过对 客户端/服务端 基础框架的抽象组织, Nuxt.js主要关注的是应用的UI渲染
Nuxt.js的目标是创建一个灵活的应用框架, 你可以基于它初始化新项目的基础代码结构.或者在已有的Node.js项目中使用Nuxt.js.其中预设了利用Vue.js开发服务端渲染的应用所需的各种配置
作为框架Nuxt.js为客户端/服务端这种典型的应用架构模式提供了许多有用的特性, 例如异步数据加载、中间件支持、布局支持等
NuxtJs工作原理
浏览器（客户端）发送 http 请求到 Node.js 服务端
部署在 Node.js 的应用 Nuxt.js 接收到浏览器请求, 它会去请求后台接口服务端
后台接口服务端会响应 JSON 数据, Nuxt.js 获取数据后进行服务端渲染成 html
然后 Nuxt.js 将 html 页面响应给浏览器
浏览器直接将接收到html页面进行展示
NuxtJs的技术架构是什么
vue, webpack, babel三大技术架构
集成了很多组件/框架：vue2, vue-router, vuex, vue ssr, vue-meta
Nuxt项目环境搭建
安装脚手架&创建项目
$ npm install -g create-nuxt-app
$ create-nuxt-app <项目名>
$ cd <项目名>
$ npm run dev
运行命令解析
“scripts”: {
// 开发环境
“dev”: “nuxt”,
// 打包
“build”: “nuxt build”,
// 在服务端运行
“start”: “nuxt start”,
// 生成静态页面
“generate”: "nuxt generate"
}
目录结构解析
.nuxt 【执行npm run dev后编译的目录文件】
assets 【用于组织未编译的静态资源, 如：Less, Sass, JavaScript】
components 【用于组织应用的 Vue.js 组件. NuxtJs不会扩展增强该目录下Vue.js组件, 即这些组件不会像页面组件那样有asyncData方法的特性】
layouts 【用于组织应用的布局组件】
middleware 【用于存放应用的中间件】
pages 【用于组织应用的路由及视图. NuxtJs框架读取该目录下所有的.vue 文件并自动生成对应的路由配置】
plugins 【用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件】
static 【静态文件目录static用于存放应用的静态文件, 此类文件不会被NuxtJs调用Webpack进行构建编译处理. 服务器启动的时候, 该目录下的文件会映射至应用的根路径 / 下】
store 【组织vuex状态数, 集成了vuex的相关功能】
nuxt.config.js 【文件用于组织NuxtJs应用的个性化配置, 以便覆盖默认配置】
别名
~或@ => src
~~或@@ => root
布局(layouts)
默认组件布局
layouts/default.vue

 



 自定义布局组件 创建layouts/blog.vue, 用来定义一个博客的布局结构 使用自定义布局组件 在pages目录下创建页面, 并使用自定义布局组件

xxx xxx xxx

  插件(plugins) NuxtJs允许在运行Vue应用之前执行Js插件, 这一点在需要使用自己的库或者第三方模块的时候特别有用, 可以将自定义插件注入到vue实例(客户端)、context(服务端)、store(vuex)中去 注入vue实例 plugins/vue-inject.js import Vue from 'vue' Vue.prototype.$myVueFunc = () => ...... nuxt.config.js export default { plugins: [ '~/plugins/vue-inject.js', ] } plugin-vue.vue export default { mounted () { this.$myVueFunc(...) } } 注入context plugins/ctx-inject.js export default ({ app }) => { app.myContextFunc = () => ...... } nuxt.config.js export default { plugins: [ '~/plugins/ctx-inject.js', ] } plugin-ctx.vue export default { asyncData (context) { context.app.myContextFunc() } } 同时注入到vue实例, context, vuex中 plugins/all-inject.js export default ({ app }, inject) => { inject('myAllFunc', () => ......) } nuxt.config.js export default { plugins: [ '~/plugins/all-inject.js', ] } plugin-all.vue export default { // vue实例 mounted () { this.$myAllFunc() }, // context asyncData (context) { context.app.$myAllFunc() } // 还可以使用vuex的actions/mutations方法中的this来调用$myAllFunc方法 } 异步加载数据(asyncData) Nuxt扩展了vueJs, 增加了一个叫做asyncData的方法, 使得我们可以在渲染组件之前异步获取数据; 方法会在页面组件每次加载之前被调用, 可以在服务端或者路由更新之前被调用 注意：不能在asyncData方法体中使用this, 因为是在当前组件加载之前被调用 安装插件 $ npm install @nuxtjs/axios -S nuxt.config.js配置插件 modules: [ '@nuxtjs/axios', ], axios: { proxy: true, // 开启代理 prefix: '/api' // 请求前缀 }, proxy: { '/api': { target: '......', pathRewrite: { '^/api': '' } } } 页面使用 export default { async asyncData ({ $axios, error }) { try { const response = await $axios.get('/test') return { data: response.data.data } } catch (e) { error({ statusCode: 404, message: '未找到请求资源' }) } } } axios请求/响应拦截器 plugins/interceptor.js export default({store, route, redirect, $axios}) => {​  $axios.onRequest(config => { console.log("请求拦截器") // 请求头添加token return config }) $axios.onResponse(response => { console.log('响应拦截器：', response) return response }) $axios.onError(error => { console.log('响应异常：', error.response.status) }) } nuxt.config.js plugins: ['~/plugins/interceptor.js'] 插件方式解耦在nuxtJs中调用api api/test.js export default ({ $axios }, inject) => { inject('test', data => $axios.$get( `/test` ) ) } nuxt.config.js plugins: ['~/api/test.js'] // 组件中使用 export default { async asyncData ({ app }) { return await app.$test() }, methods: { testApiPlugin () { const resp = this.$test() } } } 中间件(middleware) middleware/auth.js 可以在layouts、pages和nuxt.config.js中使用中间件 // pages页面中使用 export default { middleware: 'auth' } // layouts/default.vue中使用 export default { middleware: 'auth' } // nuxt.config.js中使用 module.exports = { router: { middleware: 'auth' } } // auth.js // 定义权限判断中间件，中间件的第1个参数context // auth中间件在每个路由改变石被调用 export default ({ store, redirect }) =>{ console.log('auth.js认证中间件被调用') if(!store || !store.state.userInfo) { // 如果未认证，则回到首页 redirect('/') } } 生命周期(lifecycle) 01.png nuxtServerInit 服务器初始化 middleware 中间件运行 validate 校验参数 asyncData & fetch 异步数据处理 render 开始客户端渲染 同时挂载在客户端和服务端的生命周期是：beforeCreated && created