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

青旅半醒 2022-10-07 13:51 240阅读 0赞

### 安装 ###

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,
      },
    }