element-ui的简单实用安装环境（一）

1.先初创建一个vue项目，具体查看上一章。（前提：要下载node）

进入文件夹，下载依赖
复制网址，在浏览器打开
2.安装elementUInpm i element-ui -S

3.

4.在components文件夹下面创建test.vue文件，复制一段elementUI官方文档的代码，进行测试

<template>
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">
            <a href="https://www.ele.me" target="_blank">订单管理</a>
        </el-menu-item>
    </el-menu>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

5.在App.vue中引入test.vue

<template>
  <div id="app">
      <Test></Test>
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
import Test from './components/test.vue'
export default {
  name: 'App',
  components:{
      Test
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6.打开main.js,加入element-ui的js和css

7.再次运行，效果图如下：

npm start

注意：如果输入npm start 不起作用的话，那么就把node包删掉重新下载依赖 cnpm i，再次运行就ok啦！

**