vue服务器端nuxt开发指南nuxt 使用less安装less以及less-loader即可yarn add less

nuxt 使用less

安装less以及less-loader即可

yarn add less-loader less -D

nuxt less全局变量

为页面注入变量可以使用@nuxtjs/style-resources 来实现

安装yarn add @nuxtjs/style-resources -D

配置nuxt.config.js

modules: [
  // Doc: https://axios.nuxtjs.org/usage
  '@nuxtjs/axios',
  '@nuxtjs/style-resources'
],
styleResources:{
  less:[
    './assets/styles/variable.less'
  ]
}

nuxt中vuex的使用

与vue框架使用方法一样

nuxt中vue-ant-design主体配置

修改nuxt.config.js的配置

css: ['ant-design-vue/dist/antd.less'],
build: {
    loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': 'green',
        },
      },
    },
  },

nuxt 图片懒加载

图片懒加载

nuxt全局数据存储

1.在plugin文件夹下创建store-cache.js文件

export default function (ctx) {

  // 离开页面 刷新前 将store中的数据存到localStorage

  window.addEventListener('beforeunload', () => {

    localStorage.setItem('storeCache', JSON.stringify(ctx.store.state))

  })

  // 获取localStorage中的store数据

  const storeCache = localStorage.getItem('storeCache')

  if (storeCache) {

    // 将localStorage中的store数据替换到store中

    ctx.store.replaceState(JSON.parse(storeCache))

  }

}

2.在nuxt.config.js中引用文件，注意ssr需要设置成false，如果设置为true，则时在服务器端加载，服务器端没有window对象，本地存储功能使用不了

  plugins: [
    { src: '~/plugins/store-cache', ssr: false },
  ],

路由和组件内使用

服务器端发布

www.cnblogs.com/lixingwu/p/…

配置文件nuxt.config.js修改端口和host

server: {
    port: 8090, // default: 3000,修改为8090
    host: '0.0.0.0', // default: localhost
}

打包编译

如果运行时提示有模块没有安装，则进行手动安装

cnpm i
npm run build

2.使用pm2部署项目

pm2 start npm --name "canpoint-site" -- run start

使用animated.css