一、首先創(chuàng)建一個(gè)新的Vue項(xiàng)目
vue create xxx
選擇default含有babel和eslint。或者自定義Manually select features。
babel是一個(gè)轉(zhuǎn)碼器，主要用于ES2015+ 代碼轉(zhuǎn)換為 JavaScript 向后兼容版本的代碼
eslint是一個(gè)代碼檢測(cè)工具。用來規(guī)范編碼規(guī)范用。
自定義可選的插件有，Babel，TypeScript，Progressive Web App (PWA) Support，Vuex，CSS Pre-precessors，Linter / Formatter ，Unit Testing 單元測(cè)試，E2E Testing 端到端測(cè)試
大家按需選擇即可。
二、安裝ant-design-vue
npm i ant-design-vue
三、配置vue.config.js以支持less
//自己創(chuàng)建vue.config.js文件。注意配置字段的大小寫不要錯(cuò)
//自己創(chuàng)建vue.config.js文件。注意配置字段的大小寫不要錯(cuò)
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
},
},
},
};
四、到ant-design-vue官網(wǎng)找到按需通過bable按需引入代碼。
https://www.antdv.com/docs/vue/introduce-cn/
，不喜歡找的，直接復(fù)制我的配置。
//babel.config.js文件做如下配置。
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true },
], // `style: true` 會(huì)加載 less 文件
],
};
按需引入是為了減少加載插件包的大小。
安裝好之后，還需要安裝babel-plugin-import文章來源：http://www.zghlxwxcb.cn/news/detail-635233.html
//npm i --save-dev babel-plugin-import
//安裝后在代碼里要按需時(shí)候，如下使用Button就只導(dǎo)入Button
import { Button } from "ant-design-vue";
Vue.use(Button);
總結(jié)，我們?cè)陧?xiàng)目中使用到第三方包的時(shí)候，都需要注意引入包的大小。按需引入是一個(gè)比較好的解決方案。文章來源地址http://www.zghlxwxcb.cn/news/detail-635233.html
到了這里，關(guān)于按需引入ant-design-vue組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
