vue 项目按需引入多个ui组件库

Posted 程序媛小仙女

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 项目按需引入多个ui组件库相关的知识,希望对你有一定的参考价值。

在做项目的过程中遇到了公司组件库没有的组件,这个时候需要按需引入elementUI ,同时公司的组件库也是按需引入的,减少项目的体积。
话不多说直接上代码:

首先:我们需要借助  babel-plugin-component,npm install babel-plugin-component -D

其次:我们找到我们的 bable.congig.js 来配置

plugins: [
[‘some-plugin‘, {}],
[‘some-plugin‘, {}, ‘some unique name‘],

 这个是插件安装的格式,需要再加入一个值在对象中,我们需要来标识这是不一样的东西

 

module.exports = {

    presets: [
‘@vue/cli-plugin-babel/preset‘
],
plugins: [
[
"component",
// 1.全局引入
// {
// "libraryName": "公司自己的组件库",
// "camel2Dash": false,
// "libDir": "dist",
// "style": false
// }
// 2.按需引入
{
"libraryName": "meri-design",
"camel2Dash": false,
"libDir": "dist",
"styleLibrary": {"name": "theme", "base": true}
},


], [
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk",

},
       "el" //用来标识是不一样的,如果不添加 会报错

]

]


}

以上是关于vue 项目按需引入多个ui组件库的主要内容,如果未能解决你的问题,请参考以下文章

vue 组件库 ant-design、quasar、element-ui 按需加载和主题重置

按需引入两个组件库

按需引入饿了么UI组件

vue-cli引入element和vant前端ui组件

关于element-ui的按需引入配置

Vue ui 大法哪家强?