1.什么是Element
2.快速入门
第二步引入ElementUI组件库,在当前的工程目录下的main.js文件中引入。
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
第一行,第四行在main.js中已经有了,因此只需要导入中间两行和最后一行即可。
3.访问官网,复制组件代码
下面演示复制button按钮组件:
在组件中找到button组件,并找到相中的组件,点击下面的倒三角,复制对应的代码。
<el-row>
<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>
</el-row>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
四段代码代表四组按钮,选择对应的按钮复制代码。
4.调整
自定义的组件在views下存放,因此在views下创建element文件夹,在其中创建ElementView.vue组件。
ElementView.vue组件的内容如下所示:<template>标签中书写html代码,展示的是类似于vue中的视图。展示的button按钮组件属于视图,因此在<template>中书写。
<script>:JS代码,定义vue当中的数据模型以及当中的方法
<style>:定义CSS样式
<template>
<div> <!-- div是根标签,一个<template>标签中只能有一个根标签,也即只能有一个<template>标签 -->
<el-row>
<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>
</el-row>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
vue项目默认情况下展示的是App.vue,即跟组件项目中的内容。而我们现在想展示的是ElementView.vue中的内容,因此要在App.vue中修改对应的内容。
<!-- 模板部分,由他生成HTML代码 相当于vue当中的视图部分 -->
<template>
<div>
<!-- <h1>{{ message }}</h1> -->
<element-view></element-view>
</div>
</template>
<!-- JS代码,定义vue当中的数据模型以及当中的方法 -->
<script>
import ElementView from './views/element/ElementView.vue' // 将ElementView.vue组件文件导入并重新命名为ElementView
export default {
components: { ElementView },
data () {
return {
/* message:"Hello Vue" */
}
},
methods: {
}
}
</script>
<!-- 定义CSS样式 -->
<style>
</style>
首先在<div>标签中引入<element-view>标签,在<script>中会自动通过import将这个组件导入进来,在vue中也将这个标签加入进来了。再次运行,成功展示。