以前一直是用的ElementUI猎唁，這次準備用vue3擼個后臺沮焕，看了下ElementUI Plus，和以前差不多，想換Ant Design Vue 2.x 試試不一樣的姿勢兔毒。
結果在按需引入的時候就開始踩坑，現(xiàn)記錄一下：
環(huán)境如下：
- 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出現(xiàn)黃字：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
}
}
}
}
}
這下搞定
