在nuxtjs中ant-desgin-vue按需加载、主题定制和优化

安裝

yarn add babel-plugin-import ant-desgin-vue less@3.9.0 less-loader@4.1.0 -D

按需加载

在plugins中创建ant-ui.js

import Vue from 'vue'

import {
  Button,
} from 'ant-design-vue'

Vue.use(Button)

nuxt.config.js

export default {
  build: {
    transpile: [/ant-design-vue/],
    babel: {
      plugins: [
        [
          'import',
          {
            libraryName: 'ant-design-vue',
            libraryDirectory: 'es',
            style: true,
          },
        ],
      ],
    },
  },
}

主题定制

nuxt.config.js

export default {
  build: {
    transpile: [/ant-design-vue/],
    babel: {
      plugins: [
        [
          'import',
          {
            libraryName: 'ant-design-vue',
            libraryDirectory: 'es',
            style: true,
          },
        ],
      ],
    },
    loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'blue-6': '#00b0ff',
          'red-6': '#eb3178',
        },
      },
    },
  },
}

优化

默认情况下会引入全部iconfont导致包体积过大，如不用可以进行以下优化

在plugins下创建ant-icon.js

export {
  // 需要使用到的 Icons
  DownCircleOutline,
} from '@ant-design/icons'

aut-ui.js

import Vue from 'vue'

import {
  Button,
  Icon,
} from 'ant-design-vue'

Vue.use(Icon)
Vue.use(Button)

nuxt.config.js

export default {
  build: {
    transpile: [/ant-design-vue/],
    babel: {
      plugins: [
        [
          'import',
          {
            libraryName: 'ant-design-vue',
            libraryDirectory: 'es',
            style: true,
          },
        ],
      ],
    },
    loaders: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'blue-6': '#00b0ff',
          'red-6': '#eb3178',
        },
      },
    },
    extend(config, ctx) {
      config.resolve.alias['@ant-design/icons/lib/dist$'] = path.resolve(
        __dirname,
        './plugins/ant-design-icon.js'
      )
    },
  },
}