ElementUI的使用

1.npm安装

1 npm i element-ui -S

2.main.js引入

1 import ElementUI from 'element-ui';
2 import 'element-ui/lib/theme-chalk/index.css';// 引入样式文件
3 
4 Vue.use(ElementUI);// 全局注册

3.使用

此处以Button按钮为例

main.js

 1 // 引入vue实例
 2 import Vue from 'vue';
 3 // 引入组件App
 4 import App from './App';
 5 // 引入ElementUI
 6 import ElementUI from 'element-ui';
 7 // 引入样式
 8 import 'element-ui/lib/theme-chalk/index.css';
 9 
10 Vue.use(ElementUI);
11 // 实例化vue
12 // eslint-disable-next-line no-new
13 new Vue({
14   el: '#app',
15   components: { App },
16   template: '<App/>',
17 });

App.vue

 1 <template>
 2   <div class="container">
 3     <Button/>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 import Button from './components/Button';
 9 
10 export default {
11   name: 'App',
12   components: { Button },
13 };
14 </script>
15 
16 <style>
17 
18 </style>

Button.vue

 1 <template>
 2   <div class="container">
 3     <el-row>
 4   <el-button>默认按钮</el-button>
 5   <el-button type="primary">主要按钮</el-button>
 6   <el-button type="success">成功按钮</el-button>
 7   <el-button type="info">信息按钮</el-button>
 8   <el-button type="warning">警告按钮</el-button>
 9   <el-button type="danger">危险按钮</el-button>
10 </el-row>
11 
12 <el-row>
13   <el-button plain>朴素按钮</el-button>
14   <el-button type="primary" plain>主要按钮</el-button>
15   <el-button type="success" plain>成功按钮</el-button>
16   <el-button type="info" plain>信息按钮</el-button>
17   <el-button type="warning" plain>警告按钮</el-button>
18   <el-button type="danger" plain>危险按钮</el-button>
19 </el-row>
20 
21 <el-row>
22   <el-button round>圆角按钮</el-button>
23   <el-button type="primary" round>主要按钮</el-button>
24   <el-button type="success" round>成功按钮</el-button>
25   <el-button type="info" round>信息按钮</el-button>
26   <el-button type="warning" round>警告按钮</el-button>
27   <el-button type="danger" round>危险按钮</el-button>
28 </el-row>
29 
30 <el-row>
31   <el-button icon="el-icon-search" circle></el-button>
32   <el-button type="primary" icon="el-icon-edit" circle></el-button>
33   <el-button type="success" icon="el-icon-check" circle></el-button>
34   <el-button type="info" icon="el-icon-message" circle></el-button>
35   <el-button type="warning" icon="el-icon-star-off" circle></el-button>
36   <el-button type="danger" icon="el-icon-delete" circle></el-button>
37 </el-row>
38   </div>
39 </template>
40 
41 <script>
42 export default {
43   name: 'Button',
44 }
45 </script>
46 
47 <style>
48 
49 </style>

效果如下（参考官网：https://element.eleme.cn/#/zh-CN/component/button）

posted @ 2021-05-03 20:27  子衿兮  阅读(233)  评论(0)    收藏  举报