以前一直是用的ElementUI，这次准备用vue3撸个后台，看了下ElementUI Plus，和以前差不多，想换Ant Design Vue 2.x 试试不一样的姿势。
结果在按需引入的时候就开始踩坑，现记录一下：
环境如下：
- vue-cli 4.5.6
- vue 3.0.4
- ant-design-vue 2.0.0-rc.7
示例按需引入Button。
antd.ts:
import type { App } from 'vue';
import { Button }from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'
const components = [Button]
export function setupAntd(app: App<Element>) {
components.forEach(plugin => {
app.use(plugin)
})
}
main.ts
import { createApp } from 'vue'
import App from '@/App.vue'
import { setupAntd } from '@/plugins'
import router from '@/router'
import store from '@/store'
const app = createApp(App)
app.use(store).use(router)
//注册使用的ant-design-vue组件
setupAntd(app)
app.mount('#app')
运行起来后console出现黄字：You are using a whole package of antd
额，说好的按需引入呢。。。
image.png
官网文档说要安装 babel-plugin-import 。
yarn add babel-plugin-import -D
配置插件在babel.config.js
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'import',
{
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: true
}
]
]
}
运行，报错缺少less，安装less less-loader
运行，报错less解析语法报错，搜了下less 3以上需要配置less option
在vue.config.js：
module.exports = {
productionSourceMap: false,
css: {
loaderOptions: {
less: {
lessOptions: {
// important extra layer for less-loader^6.0.0
javascriptEnabled: true
}
}
}
}
}
这下搞定
