element-ui按需引入-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui按需引入。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

步骤

1、安装elment-ui组件库

官方网站

在项目的根目录下安装element-ui

npm i element-ui -S

官方网页：

elementui按需引入,ui,vue.js,前端

2、找到官方文档

官方网站

elementui按需引入,ui,vue.js,前端

3、安装 babel-plugin-component

在你的项目根目录下运行该：

npm install babel-plugin-component -D

如：

elementui按需引入,ui,vue.js,前端

4、修改 .babelrc 配置文件

vue-li的.babelrc文件里为babel.config.js
elementui按需引入,ui,vue.js,前端

原来的babel.config.js文件:

module.exports = {
	presets: [
		module '@vue/cli-plugin-babel/preset'
	]
}

修改后的babel.config.js文件:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
	["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
}

注意： 官方文档里的"presets": [["es2015", { "modules": false }]现在要改为["@babel/preset-env", { "modules": false }]，不然会报错

5、按需引入elment-ui组件

在main.js里添加要引入的组件

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

官方文档这里添加了el-button与el-select组件

注意： 引入组件时样式也会一起引入进来

扩展

1.优化按需引入组件

更改第五步骤

在src目录下创建element目录与index.js，如下：
elementui按需引入,ui,vue.js,前端

在index.js里添加element并抛出：

//按需引入element组件
import { Button, Select, Row } from 'element-ui';

//封装组件
const element = {
	install: function (Vue) {
		Vue.use(Button)
		Vue.use(Select)
		Vue.use(Row)
	}
}
//抛出整体按需引入的组件
export default element

在main.js里引入整体抛出的组件：

import element from './element/index'

Vue.use(element)

如：

elementui按需引入,ui,vue.js,前端

完成

2.要引入的组件名

如：想使用el-radio组件时

<template>
  <el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
  <el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
</template>