Element-01.快速入门

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>