element-ui按需引入_elementui按需引入

步骤

1、安装elment-ui组件库

官方网站

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

npm i element-ui -S
1

官方网页：

2、找到官方文档

官方网站

3、安装 babel-plugin-component

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

npm install babel-plugin-component -D
1

如：

4、修改 .babelrc 配置文件

vue-li的.babelrc文件里为babel.config.js

原来的babel.config.js文件:

module.exports = {
	presets: [
		module '@vue/cli-plugin-babel/preset'
	]
}
1
2
3
4
5

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

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
	["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意： 官方文档里的"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)
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

扩展

1.优化按需引入组件

更改第五步骤

在src目录下创建element目录与index.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
1
2
3
4
5
6
7
8
9
10
11
12
13

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

import element from './element/index'

Vue.use(element)
1
2
3

如：

完成

2.要引入的组件名

如：想使用el-radio组件时

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

该组件名为Radio

语法技巧：

• el-radio —> 去掉el-，再将首字母大写，完成，组件名为Radio。
• el-time-picker —> 去掉el-与-，再将每个字母的首字母大写，完成，组件名为TimePicker。