nuxt2 + Ant Design Vue 实现按需加载及主题配置

实现按需加载+主题配置

根据nuxt 脚手架选择Ant Design Vue 创建项目

目录结构如下：

注意上面脚手架安装的方式不是按需加载的。是全量加载

# 安装按需加载插件
"babel-plugin-import": "^1.13.3",

# 安装less解析插件，注意less 和 less-loader 版本
"less": "^3.0.0",
"less-loader": "^5.0.0", 
# 对应的配置
loaders: {
      less: {
         javascriptEnabled: true,
          modifyVars: {
            // modifyVars 可用来自定义主题
            'primary-color': '#41b883',
            'layout-body-background': '#fff',
          },
      },
    },

# nuxt.config.js
css:[]  // 去掉默认的设置
plugins: ['@/plugins/antd-ui'], 路径不变

 extractCSS: true, // 提取css到单独link文件
    transpile: [/ant-design-vue/],
    babel: {
      plugins: [
        [
          'import',
          {
            libraryName: 'ant-design-vue',
            libraryDirectory: 'es',
            style:true
          },
        ]
      ],
    },
    loaders: {
      less: {
        javascriptEnabled: true,
          modifyVars: {
            // modifyVars 可用来自定义主题
            'primary-color': '#41b883',
            'layout-body-background': '#fff',
          },
      },
    },


# plugins/antd-ui.js   // 按需加载对应组件
import Vue from 'vue'
import { Button} from 'ant-design-vue'
Vue.use(Button)

不按需加载+主题配置

通过nuxt 脚手架选择Ant Design Vue 创建项目

# package.json
{
  "name": "s",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "ant-design-vue": "^1.7.4",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.3",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "less": "^3.0.0",
    "less-loader": "^5.0.0",
    "prettier": "^2.2.1"
  },
  "browserslist": [
    "last 5 version",
    "not dead",
    "Android >= 4.0",
    "iOS >= 8"
  ]
}

# Nuxt.config.js
export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 's',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['ant-design-vue/dist/antd.less'],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ['@/plugins/antd-ui'],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extend(config, { isDev, isClient }) {
      // Run ESLint on save
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
          options: {
            fix: true,
          },
        })
      }
    },
    extractCSS: true, // 提取css到单独link文件
    transpile: [/^ant-design-vue/],
    loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: require('./ant-design-theme')
      },
    },
    optimization: {
      splitChunks: {
        // 代码打包分割规则
        cacheGroups: {
          antDesignVue: {
            name: 'chunk-antd',
            priority: 10,
            test: /[\\/]node_modules[\\/]_?ant-design-vue(.*)/,
          },
        },
      },
    },
  },
}

# /plugins/antd-ui.js
import Vue from 'vue'
import Antd from 'ant-design-vue/lib'

Vue.use(Antd)