vue.js 前端 element-ui按需引入

目录

步骤1、安装elment-ui组件库2、找到官方文档3、安装 babel-plugin-component4、修改 .babelrc 配置文件5、按需引入elment-ui组件

扩展1.优化按需引入组件2.要引入的组件名

步骤

1、安装elment-ui组件库

官方网站

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

npm i element-ui -S

官方网页：

2、找到官方文档

官方网站

3、安装 babel-plugin-component

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

npm install 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)

*/

new Vue({

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)

}

}

//抛出整体按需引入的组件

export default element

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

import element from './element/index'

Vue.use(element)

如：

完成

2.要引入的组件名

如：想使用el-radio组件时

该组件名为Radio

语法技巧：

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

推荐链接

 您阅读本篇文章共花了：