在Vue中使用babel-plugin-component插件以实现按需导入Mint UI的组件
在使用Mint UI开发时 若导入全部Mint UI 则文件会比较大
为进行优化 可按需导入Mint Ui的组件
只导入所需要的组件
效果杠杠滴！
全部引入：
按需引入：
可通过babel-plugin-component插件以实现按需导入
首先 安装babel-plugin-component：npm install babel-plugin-component -D
然后 在Babel的配置文件.babelrc里添加一个组件：
(官网的竟然是错的…多了一对括号 “[ ]” )
["component", {
"libraryName": "mint-ui",
"style": true
}
]
例如：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties",["component", {
"libraryName": "mint-ui",
"style": true
}
]]
}
然后 在main.js里导入需要的组件：
// 按需导入Mint UI组件(这里以Button组件作为示例)
import { Button } from "mint-ui"
// 使用Vue.component注册组件
Vue.component("mybtn",Button) // component()第一个参数是组件名 可自定义
最后 就是在页面中使用了：
标签名就是在导入的时候 在component()方法里传入的第一个参数
button
若要使用默认标签名 则传入组件名.name即可
例如：
Vue.component(Button.name,Button)
Piconjo_Official
原创文章 234获赞 34访问量 186万+
关注
私信
展开阅读全文
作者：Piconjo_Official
相关文章
Wilona
2021-05-01
Kathy
2020-03-01
Phyllis
2021-05-18
Valencia
2021-07-04
Claire
2021-05-21
Judy
2023-07-20
Rabia
2023-07-20
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Katherine
2023-07-20