Nuxt开发经验分享，让你踩少点坑！ react

每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧
http://www.520webtool.com/
自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费

说明
本文章基于starter-template模板进行讲解，面向有vue-cli开发经验的宝宝

vue init nuxt-community/starter-template

文章图片

Nuxt
官方文档
简单来说，Nuxt就是基于Vue的一个应用框架，采用服务端渲染，让你的SPA应用(Vue)也可以拥有SEO
生命周期
众所周知，Vue的生命周期全都跑在客户端(浏览器)，而Nuxt的生命周期有些在服务端(Node)，客户端，甚至两边都在:

文章图片

生命周期流程图，红框内的是Nuxt的生命周期(运行在服务端)，黄框内同时运行在服务端&&客户端上，绿框内则运行在客户端

实战经验
1. 红框、黄框内的周期都不存在Window对象

2. 配置错误页面
你可以通过编辑 layouts/error.vue 文件来定制化错误页面.

3. 自定义Loading页面
nuxt.config.js

module.exports = { loading: '~components/loading.vue' }

loading.vue

4. 校验参数
如果校验失败，则自动跳转到错误页面

5. Header、Footer等公共组件放哪？
大家都知道，vue-cli入口文件是app.vue，在nuxt开发当中则是./layout/default.vue

6. 没有keep-alive
由于是服务端渲染，所以不支持组件的keep-alive，那自然activated、deactivated这两个生命周期也没了
7. 配置插件
所有插件都写在/plugins目录下，这里以vue-lazyload为例
plugins/lazy-load.js

import Vue from 'vue' import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad, { loading: require('~/assets/images/loading.jpg'), error: require('~/assets/images/error.jpg') })

nuxt.config.js

module.expors = { plugins = [ { src: "~/plugins/lazy-load", ssr: false } ] }

8. 使用Axios，并配置全局拦截器，处理跨域
starter-template模板，推荐使用@nuxtjs/axios、@nuxtjs/proxy，不需要在plugins配置
安装依赖

npm install @nuxtjs/axios @nuxtjs/proxy --save

使用、处理跨域

// nuxt.config.js module.exports = { modules: [ '@nuxtjs/axios' ], // 不需要加入@nuxtjs/proxy axios: { proxy: true, prefix: '/api', // baseURL credentials: true, }, proxy: { '/api/': { target: 'http://127.0.0.1:2001', // 代理地址 changeOrigin: true, pathRewrite: { '^/api': '' }, }, } }

组件中使用

到此为止，我们并不需要在plugins配置axios，但是如果要设置全局拦截器，那么就要新建一个/plugins/axios.js

export default function (app) { let axios = app.$axios; // 基本配置 axios.defaults.timeout = 10000 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'// 请求回调 axios.onRequest(config => {})// 返回回调 axios.onResponse(res => {})// 错误回调 axios.onError(error => {}) }

然后在plugins配置它

module.exports = { plugins = [ { src: "~/plugins/axios", ssr: false }, ] }

9. 默认Meta标签
nuxt.config.js

module.exports = { head: { title: 'your project title', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' } ], link: [ { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } ] } }

10. 页面组件特有的Meta标签

11. 动态路由的Meta标签填充
游戏详情页面举例子，由于数据是异步获取的，我们需要把数据获取写在asyncData钩子，待数据获取成功才会渲染该页面组件

12. 使用Vuex
nuxt自己集成了vuex，所以不需要安装，在/store目录下新建index.js即可使用

import Vuex from 'vuex'let store = () => new Vuex.Store({ state: { token: '' }, mutations: { setToken (state, token) { state.token = token } } })export default store

【Nuxt开发经验分享，让你踩少点坑！】13. 登录状态？
vue-cli项目中，我们可以用vuex-persistedstate，它可以使vuex的状态持久化，页面刷新都不会丢失，原理当然是localStorage啦！当然我更喜欢用vue-cookies进行保存token，问题来了，nuxt项目怎么保存登录状态呢？当然上面这两种方法我们都可以使用，但是有个问题，由于在created钩子中不存在window对象(获取cookie、localStorage都需要window对象)，当你需要判断是否存在token的时候，你必须要在mounted进行操作，这说明页面进来的一瞬间你无法得知是否已经登录了，这会导致显示用户名、组件显示于隐藏都慢半拍
nuxt非常友好，它提供了fetch钩子，还有nuxtServerInit，这两个钩子都运行在服务端并且我们能很快速地操作store
14. fetch的使用
如果页面组件设置了fetch方法，它会在组件每次加载前被调用（在服务端或切换至目标路由之前），此方法需要跟服务端的人员配合

15. nuxtServerInit
终极无敌方法

import Vuex from 'vuex'let store = () => new Vuex.Store({ state: { token: '' }, mutations: { setToken (state, token) { state.token = token } }, actions: { nuxtServerInit({ commit }, { req }) { let cookie = req.headers.cookie; // 将cookie转成json对象（自己实现该方法） let token = cookieparse(cookie).token; commit('setToken', token); }, } })export default store

16. 封装属于自己的全局方法

let xielikang = function () {/** * @method 打印信息方法 * @param {String} msg 信息 */ let message = function (msg) { msg && console.log(msg) }let otherfn = function (msg) {}return { message, otherfn }}Vue.prototype.$kang= xielikang

组件调用

对了，别忘了在plugins中配置，可以回到第7小节查看配置
17. 全局样式
nuxt.config.js

module.exports = { css: ['~/assets/stylesheets/main.min.css'] }

18. 使用Element-UI
还是plugins文件夹新建element-ui.js

// 全局引入 import Vue from 'vue' import ElementUI from 'element-ui'Vue.use(ElementUI)// 按需引入 import { Button, Loading, MessageBox } from 'element-ui'Vue.use(Button) Vue.prototype.$loading = Loading.service Vue.prototype.$msgbox = MessageBox

nuxt.config.js

module.exports = { css: ['element-ui/lib/theme-chalk/index.css'], plugins: [ { src: "~/plugins/element", ssr: true } ] }

18. 如何使用sass预处理器
安装依赖

npm install node-sass sass-loader --save

组件中使用(不需要其他的配置了)

19. fetch、asyncData、validate使用范围
只能在页面组件使用，也就是pages目录下的组件，而不是components目录下的组件，要有所区分
20. 传统部署

npm run build && npm run start

21. pm2部署
它允许您永久保持应用程序活跃，无需停机即可重新加载它们，并不需要传统部署的.nuxt文件夹，该部署方法也跟生产环境一样含热更新

npm install pm2 -g

npm run build pm2 start ./node_modules/nuxt/bin/nuxt-start

本文到此就结束啦，这是目前踩的坑，如果有错误的地方，请大家指出
欢迎所有前端爱好者关注我的个人微信公众号，我会经常分享最新，实用性高的前端文章以及技巧，祝你在前端开发的道路上刀过竹解！

作者：不会写前端
链接：https://www.jianshu.com/p/840169ba92e6
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。