Nuxt开发经验分享，让你踩少点坑！（转载）

时间  2019-11-07
标签 nuxt 开发 经验 分享 让你 转载 繁體版
原文   原文链接

原文连接

说明

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

vue init nuxt-community/starter-template
复制代码

Nuxt

官方文档css

简单来讲，Nuxt就是基于Vue的一个应用框架，采用服务端渲染，让你的SPA应用(Vue)也能够拥有SEOhtml

生命周期

众所周知，Vue的生命周期全都跑在客户端(浏览器)，而Nuxt的生命周期有些在服务端(Node)，客户端，甚至两边都在:vue


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

实战经验

1. 红框、黄框内的周期都不存在Window对象java

<script> export default { asyncData() { console.log(window) // 服务端报错 }, fetch() { console.log(window) // 服务端报错 }, created () { console.log(window) // undefined }, mounted () { console.log(window) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} } } </script>
复制代码

2. 配置错误页面node

你能够经过编辑 layouts/error.vue 文件来定制化错误页面.ios

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script> export default { props: ['error'], layout: 'blog' // 你能够为错误页面指定自定义的布局 } </script>
复制代码

3. 自定义Loading页面vuex

nuxt.config.jsvue-cli

module.exports = {
  loading: '~components/loading.vue'
}
复制代码

loading.vuenpm

<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

<script> export default { data: () => ({ loading: false }), methods: { start () { this.loading = true }, finish () { this.loading = false } } } </script>
复制代码

4. 校验参数

若是校验失败，则自动跳转到错误页面

<script> export default { validate({ params, query }) { return /^d+$/.test(params.id) // must be number } } </script>
复制代码

5. Header、Footer等公共组件放哪？

你们都知道，vue-cli入口文件是app.vue，在nuxt开发当中则是./layout/default.vue

<template>
  <div id="app">
    <!-- 公共头部组件 -->
    <xxx-header></xxx-header>
    <!-- 路由视图，至关于router-view -->
    <nuxt/>
    <!-- 公共底部组件 -->
    <xxx-footer></xxx-footer>
  </div>
</template>
复制代码

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': ''
      },
    },
  }
}
复制代码

组件中使用

<script> export default { fetch ({ app }) { console.log(app.$axios) }, asyncData ({ app }) { console.log(app.$axios) }, created () { console.log(this.$axios) } } </script>
复制代码

到此为止，咱们并不须要在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标签

<script> export default { head () { return { meta: [ { name: 'keywords', content: '最强王者,今晚吃鸡' }, ] } } } </script>
复制代码

11. 动态路由的Meta标签填充

游戏详情页面举例子，因为数据是异步获取的，咱们须要把数据获取写在asyncData钩子，待数据获取成功才会渲染该页面组件

<script> export default { async asyncData ({ app, params }) { let data = await app.$axios.get(`/appinfo/${params.id}`); return { appname: data.appinfo.appname } }, head () { return { meta: [ { name: 'keywords', content: `${this.appname},无限宝石,无限元宝` }, ] } } } </script>
复制代码

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
复制代码

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方法，它会在组件每次加载前被调用（在服务端或切换至目标路由以前），此方法须要跟服务端的人员配合

<script> export default { async fetch ({ app, store, params }) { let { data } = app.$axios.get('/token'); store.commit('setToken', data.token); } } </script>
复制代码

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
复制代码

组件调用

<script> export default { created() { this.$kang.message('小老弟，你怎么回事') } } </script>
复制代码

对了，别忘了在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
复制代码

组件中使用(不须要其余的配置了)

<style lang="scss" scoped> </style>
复制代码

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复制代码
做者：daydreammoon 连接：https://www.jianshu.com/p/840169ba92e6 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程