Nuxt use less

Install less and less-loader

yarn add less-loader less -D

Nuxt less Global variable

Injecting variables into a page can be done using @nuxtjs/style-resources

Install yarn add@nuxtjs /style-resources -d

Configuration nuxt. Config. Js

modules: [
  // Doc: https://axios.nuxtjs.org/usage
  '@nuxtjs/axios',
  '@nuxtjs/style-resources'
],
styleResources:{
  less:[
    './assets/styles/variable.less'
  ]
}
Copy the code
Use of VUex in NUXT

Same as vUE framework

Vue-ant-design main configuration in NUxT

Modify the configuration of nuxt.config.js

css: ['ant-design-vue/dist/antd.less'],
build: {
    loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': 'green',
        },
      },
    },
  },
Copy the code
Nuxt images lazy loading

Lazy loading of images

Nuxt global data store

1. Create the store-cache.js file in the plugin folder

Export default function (CTX) {// Store data to localStorage window.addeventListener ('beforeunload', () => { localStorage.setItem('storeCache', JSON. Stringify (ctx.store.state))}) const storeCache = localstorage.getitem ('storeCache') if (storeCache) {ctx.store. ReplaceState (json.parse (storeCache))}}Copy the code

2. Reference the file in nuxt.config.js. Set SSR to false. If set to true, the file is loaded on the server

  plugins: [
    { src: '~/plugins/store-cache', ssr: false },
  ],
Copy the code
  1. Used in routing and components
Server-side publishing

www.cnblogs.com/lixingwu/p/…

The configuration file nuxt.config.js modifies the port and host

Server: {port: 8090, // default: 3000, 8090 host: '0.0.0.0', // default: localhost}Copy the code
  1. Package compiled

If a message is displayed indicating that a module is not installed, manually install the module

cnpm i
npm run build
Copy the code

2. Deploy the project using PM2

pm2 start npm --name "canpoint-site" -- run start
Copy the code

Using animated. CSS