background

The original project is to use vue vue-cli project created. Try to introduce ssr. Directly on nuxt framework to transform paper records do some renovation

recording

1, vue-amap plug directly use the components in the page, it is not configured by plugins, feasible

2, mint-ui plugin, you need to configure.

//plugins/mint-ui.js file

//nuxt.config.js

module.exports = { plugins: ['~plugins/mint-ui.js'] }

plugins attribute configuration

Type: Array
array element Type: String, or Object
If the array element type is Object, which has the following properties:

the src: String (file path)
SSR: Boolean (the default is true) if the value is false, only the file on the client It is packaged introduced. If set to false, the load is less than the plug-in style that the server needs to load exists.
CI plugins properties, loads imported before application initialization can build a common.js Import initial contents of the existing main.js

3, the introduction lib-flexible: Routine use of plugins configuration import it. And build configuration,

4, multi-page application and converts the default page:

Directory structure is as follows:

Visit: / home access to the index; / home / swiper access to swiper

5, using less

npm i less less-loader -D to

6, global style file

//nuxt.config.js

css:[
'@/assets/css/common.less'
],

7, the introduction of dependency collected widget: webpack-bundle-analyzer

//nuxt.config.js file

const BundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports={
    build:{
        plugins:[
            new BundleAnalyzerPlugin()
        ]
    }
｝

npm run build --report

8, vue-html5-editor plug-introduction: failed to be resolved

Record:
VUE core package nuxt are using the run-time version. vue-html5-editor does not ssr version of the js file. It is used when mounting on the client something like innerHTML; therefore can not be loaded on the server, the client only. But the client it uses a template rendering, and render not running. Therefore, a variety of error.

Recommended: vue-quill-editor
Reference Links: https://blog.csdn.net/weixin_36185028/article/details/82946453

9, axios data request:

nuxt Axios integrates itself, thus using the integrated, it may also be introduced separately.

A, integrated approach:

A1, first need to configure axios items in the configuration file in nuxt.config.js

modules: [
     ' @ nuxtjs / Axios ' ,
     ' @ nuxtjs / Bulma ' 
], 
  / * required aixos must configure the following two Axios and Proxy * / 
  Axios: { 
    prefix: ' / API / ' , 
    Proxy: to true 
}, 

Proxy : { 
    ' / API / ' : { 
      target: ' https://maoyan.com/ ' , 
      pathRewrite: { 
        ' ^ / API / ' : '' 
      } 
    } 
 },

A2, used in the appliance axios, without introducing in the import, the direct use of this. $ Axios to

// this context is introduced into a context parameter, instead of the this,
 // since the component is invoked when asyncData initialization method, it is not possible to refer to an object instance of the component by this. 
asyncData (context) {
     return context. $ Axios. GET ( ' Ajax / Cities ' ) 
      .then (RES => { 
        the console.log (RES) 
      }) 
  }

B, introduced separately (i.e., in this example scenario transformation)

npm install axios --save
asynchronous data write (limited page components) method in the asyncData will be called before each load. You can not call this an example here. nuxt object returned by the method vue data and instance matching rendered.

B1, cross-domain solution:
NPM @ gauseen I / nuxt -D-Proxy

// nuxt.config.js

modules: [
     // request broker configuration, cross-domain solution 
    ' @ gauseen / nuxt-Proxy ' , 
], 
proxyTable: { 
    ' / API ' : { 
        target: ' http://bayin666.mycwgs.com ' , // set you domain name and port number of the interface do not forget to add calls HTTP 
        changeOrigin: to true , 
        pathRewrite: { 
            ' ^ / API ' : '' 
        } 
    } 
}

vue renovation project nuxt