【手把手撸vue项目】element安装

---

element作为常用的基于vue2.0的组件库，能帮助开发者快速的搭建项目。
下面开始正式的安装教程

1、安装

cmd，在项目路径下输入：

npm i element-ui -S

2、引入

在main.js中，对element进行引入（目前采用完整引入，按需引入请参考官方文档）
https://element.faas.ele.me/#/zh-CN/component/quickstart
添加以下三行代码

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

效果如图所示：

image.png
完成以上步骤之后，恭喜您，已经完成element的安装了。

---

接下来我们来进行一个简单的测试：

1. 在components文件夹下新建ElementTest.vue
   将element官网的样例代码粘入其中：

<template>
  <div class="test-cont">
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <div>{{input}}</div>
  </div>
</template>

<script>
export default {
  name: 'ElementTest',
  data() {
    return {
      input: ''
    }
  }
}
</script>
<style scoped>
</style>

2. 配置路由
   在router/index.js中引入ElementTest
   并将其添加进routes中。

   
   image.png
3. 测试
   在url中输入：http://localhost:8080/#/test
   image.png
   使用成功！