element-ui按需引入

目录

步骤

1、安装elment-ui组件库

官方网站

在项目的根目录下安装

element-ui

npm i element-ui -S

官方网页：

2、找到官方文档

官方网站

3、安装 babel-plugin-component

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

npminstall babel-plugin-component -D

如：

4、修改 .babelrc 配置文件

vue-li

的

.babelrc

文件里为

babel.config.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)
 */newVue({el:'#app',render:h=>h(App)});

官方文档这里添加了

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)}}//抛出整体按需引入的组件exportdefault element

在

main.js

里引入整体抛出的组件：

import element from'./element/index'

Vue.use(element)

如：

完成

2.要引入的组件名

如：想使用

el-radio

组件时

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

该组件名为

Radio

语法技巧：

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