vue-cli3 overall migration to a service-side rendering nuxtjs

　　vue project and nuxt.js really has a lot of different projects such as large structural changes, router.js gone, vuex store wording changes, router did not hook up, and so on. After all, there are some old project body mass, so frustrating I can not acceptable, but after some investigation, I found that these problems are not insurmountable. Thus, although migration is to migrate, but to try to keep the flavor vue-cli 3 projects with minimal changes to complete the migration. To this end I did a lot of investigation, the purpose of this paper lies in this.

1, reconstruction projects

　　Nothing to say, took direct command line started, npx create-nuxt-app my-projectthis is the official website of the document get started operation.

　　Our principle is to be consistent and vue cli3 project. Basically choose the default option, in addition to eslint open. It is noteworthy that there is a axios module, this is a this. $ Axios plug-in, I personally think that at present futile, does not affect the general axios use.

2, eslint configuration, and the three parties rely on plug-in installation

　　The .eslintrc.js the shining changed a bit, do not forget to install the finished package: npm install --save-dev @ vue / eslint-config-standard

　　To rely on replication, can be installed

3, it is important here. It is noteworthy that nuxt default srcDir is the root path, so we only need to direct the project before the src content copied inside, put to the root directory, copy the original static files placed over static directory.

4, the most important are: the use of the code Router, rather than automatically generated navigation configuration nuxt

　　nuxt.js is a very different router.js did not, according to the official statement is dynamically generated using the directory automatically router.js. I feel that also, but there is no need to be so delicate. Old migration project, write have written, it is to take over directly. Fortunately, it can change, nuxt.js official provides a plug-: nuxt-Community Community / Router-Module

　　To join the project:npm install --save @nuxtjs/router

　　Then modify the configuration file: modules which joined

modules: [
    '@nuxtjs/router'
],

　　Router.js before the project need to write in the root directory /, the need to change the wording slightly, export to createRouter function :

// only need to add such 
Export createRouter function () {
   const Router = new new Router ({ 
    MODE: ' History ' , 
    routes 
  }) 
  return Router 
}

　　Another important is the need to remove all loaded asynchronously

　　Perhaps you, like me, have encountered this error, and then a look ignorant force: the render function or not defined in the Component Template: Anonymous

　　I am a long investigation, we found the pot is router.js loaded asynchronously (of course, the premise is router.js up in accordance with the above transplant), it can be introduced directly into

import guest from '@/views/carnival/guest'
import partner from '@/views/carnival/partner'

5、Router全局钩子

　　有两种办法，第一种是写nuxt plugin直接拿router对象

export default ({ app }) => {
    app.router.beforeEach(async function (to, from, next) {
    }
}

　　然后在nuxt.config.js配置里加上

    plugins: [
        '@/plugins/route'
    ],

　　但这种办法如果在beforeEach里面做请求拿数据，就会引起DOM渲染不同步的警告（nuxt.js v2.3.4）。只要发出请求，不做任何其他事情，就会出错（其实这是非常不科学的）。顺便提一句，这里通过app.store可以拿到store

　　第二种办法，也是nuxt.js官方推荐的办法，是写middleware：

　　我在middleware下写一个router-guards.js

export default async function ({ store, route, redirect, req }) {
    console.log('hello')
    // let ret = await axios.get(`...`)
}