您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

elementUi按需引入_转(两种按需引入方式)

发布时间：2023-04-11 23:04:32编辑：雪饮阅读（）

按需引入方式1
首先假如我们的一个vue文件中用了四个element ui的组件，如
<template>
    <div>
        <div>这里是ElementUI的练习区</div>
        <hr/>
        <!---成功按钮、警告按钮、危险按钮--->
        <el-button type="success">成功按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <!---
            菜单图标
            elementui的图标类组件是基于字体来实现的，
            所以可以直接使用font-size来控制其大小
        --->
        <hr/>
        <i style="font-size:48px;" class="el-icon-menu"></i>
        <hr/>
        <!---
            评分组件
            评分组件的v-model绑定评分数据于data里面的一个变量
        --->
        <el-rate v-model="value1"></el-rate>
        <!---input输入框组件--->
        <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
</template>
<script>
export default {
    data(){
        return {
            value1:5,
            input:''
        }
    }
}
</script>
其中这里的那个图标组件或者说是元素我觉得不应该算是组件，就是一个普通元素吧。
那么在main.js中我们修改之前的引入整个ElementUI
import {Button,Select,Input,Rate} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Button);
Vue.use(Select);
Vue.use(Input);
Vue.use(Rate);
像是这样，用到几个组件我们就引入几个组件，这里虽然只是引入了四个组件，但是还加载了一个css文件，所以我觉得对于那个图标组件或者说是元素就起到作用了。
 
按需引入方式2
先安装一个babel-plugin-component
npm install babel-plugin-component –D
这里需要解释下-D参数其实就相当于--save-dev
然后需要修改.babelrc文件内容由原来的
{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}
修改为
{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
然后这种方式相比方式1只不过是少了在main.js中引入css如
import 'element-ui/lib/theme-chalk/index.css'
语句而已，并且还多了.babelrc的配置以及babel-plugin-component的安装，所以我这里个人认为方式1更好点吧。