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啦!
**