vue中按需引入vant和elementui库设置-指南

Posted 2021-06-28 JackieDYH

安装

npm i vant -S
npm i element-ui -S

配置按需引入插件

vant

npm i babel-plugin-import -D

element

npm install babel-plugin-component -D

---

babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  "plugins": [
    // 样式是否也按需加载
    ["import", {"libraryName": "vant","libraryDirectory": "es","style": true},"vant"],
    ["component", {"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]
  ]
};

---

vant使用

全量引入-不能设置按需相关配置会出问题

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
....

按需引入

// main.js
import { Button, Row, Col } from 'vant';
Vue.use(Button).use(Row).use(Col);
import 'vant/lib/index.css';
...

------
// 组件中按需引入
import { popup } from "vant";
export default {
  components: {
    [popup.name]: popup,
  },
}

elementui使用

全量引入-不能设置按需相关配置会出问题

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
....

按需引入

// main.js
import { Button, Message } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Message);
/* 或写为
 * Vue.use(Button).use(Message);
 */
import 'element-ui/lib/theme-chalk/index.css';

Vue.prototype.$message = Message; // 挂载到$message上，全局使用
// 拓展
// this.$message.warning("1111111111111111111"); //vue页面使用
// Vue.prototype.$message({ //js页面中使用
//   message: res.data.message,
//   type: 'warning'
// });
...

------
// 组件中按需引入
import { Button } from 'element-ui';
export default {
  components: {
    [Button.name]: Button,
  },
}