Vue同时按需引用Vant和Mint UI

Posted 2023-03-29

参考技术A 按需引入Vant

1、npm i vant -S

2、npm i babel-plugin-import -D

3、// .babelrc 中配置 

["import",

"libraryName": "vant",

"libraryDirectory": "es",

"style": true

]

4、引用

import Button, Cell from 'vant';

Vue.use(Button).use(Cell)

按需引入Mint

1、

npm i mint-ui -S

2、

npminstallbabel-plugin-component -D

3、将 .babelrc 修改为：



"presets": [

["es2015", "modules":false]

  ],

"plugins": [["component", [

   

"libraryName":"mint-ui",

"style":true

   

  ]]]



4、

import Popup from'mint-ui';

Vue.component(Popup.name, Popup);

 综合：

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

参考技术A

官方文档

npm安装element插件

方法一：完整引入，但样式文件需单独引入

方法二：按需引入

1.安装babel-plugin-component插件

2.配置到babel.config

引入组件

官方文档

方法一：按需引入（不要误解了官方的自动按需引入，还是要手动写的）

1.安装babel-plugin-import插件

2.配置到babel.config

3.导入到vue中

方法二：全部导入

element和vant不适合一起使用，element更适合用在pc端而vant适合用在移动端，根据项目不同选择使用不同的UI框架