Element快速入门

安装ElementUI组件库(在当前工程的目录下)，在命令行执行指令：
```
	yarn add element-ui
```

引入ElementUI组件库：在main.js文件中新增

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

在views目录下新建文件夹elements用来存储element的组件, 并添加文件ElementView.vue(文件名注意用驼峰式命名，否则报错), 文件内容如下

<template>

    <div>

    </div>

</template>

<script>

</script>

<style>

</style>

官网查找需要的示例代码，粘贴到<div>...</div>之间。

<template>

    <div>

        <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>

</script>
 

<style>
 
</style>

在App.vue中引用ElementView.vue，(注意：这里有vue代码自动补全功能，如果没有，需要安装vscode插件vetur)

<template>

  <div>

    <!-- <h1>{{ message }}</h1> -->

    <element-view></element-view>

  </div>

</template>

  

<script>

import ElementView from './views/element/ElementView.vue'

export default{

  components: { ElementView },

}

</script>
<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

  

nav {

  padding: 30px;

}

  

nav a {

  font-weight: bold;

  color: #2c3e50;

}

  

nav a.router-link-exact-active {

  color: #42b983;

}

</style>