vue中如何使用element-ui组件库

来源：恒创科技编辑：恒创科技编辑部

2022-09-29 04:17:04

如何使用element-ui组件库

通过vue.cli创建成功脚手架之后，我们在项目中需要用到一个组件库，那么就需要来通过下载插件的方式或者使用这个npm安装：
element-ui组件库网址https://element.eleme.cn/#/zh-CN

安装之前先安装：

过npm安装，这样安装后你需要手动的来配置
npm i element-ui@2.15.8 -S

通过指令：vue add element

vue中如何使用element-ui组件库_按需加载

vue中如何使用element-ui组件库_默认按钮_02

注意安装之后他会自己创建一个插件文件夹

而且会重写这个app.vue组件内容，注意要在之前不要修改好app内容，会被覆盖掉

vue中如何使用element-ui组件库_ui_03

也会自动的注入项目名到mian.js文件中。

vue中如何使用element-ui组件库_javascript_04

也在babel.config.js中完成了按需插件的引用规则规则。

vue中如何使用element-ui组件库_ui_05

因为选择的时候是按需加载，所以执行的文件就是，需要哪一项插件，引入哪一项插件。

vue中如何使用element-ui组件库_按需加载_06

vue中如何使用element-ui组件库_按需加载_07

vue中如何使用element-ui组件库_按需加载_08

<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>