前提:已经安装好Vue
初始化vue
vue init webpack itemname
<>强运行初始化演示
运行一下初始后的演示,如果没有问题则进行安装elementUI
npm运行dev
安装elementUI
npm我element-ui - s
<强>引入elementUI
在main.js中引入elementUI
从“element-ui”进口ElementUI
导入“element-ui/lib/theme-chalk/index.css”
Vue.use (ElementUI)
<强>测试
下面我们来测试一下
在创建header.vue文件,复制一段elementUI的代码
& lt; template>
& lt; el-menu
:default-active=" activeIndex2”
类=" el-menu-demo "
模式="水平"
@select=" handleSelect "
background - color=" # 545 c64 "
文本颜色=" # fff”
active-text-color=" # ffd04b”比;
& lt; el-menu-item指数=?”在处理中心& lt;/el-menu-item>
& lt; el-submenu指数=?”在
& lt;模板槽="标题"在我的工作台& lt;/template>
& lt; el-menu-item指数=? - 1”在选项1 & lt;/el-menu-item>
& lt; el-menu-item指数=" 2 "祝辞选项2 & lt;/el-menu-item>
& lt; el-menu-item指数=? - 3”的在选项3 & lt;/el-menu-item>
& lt;/el-submenu>
& lt; el-menu-item指数=" 3 "祝辞& lt; a href=" https://www.ele.me " target="平等"祝辞订单管理& lt;/a> & lt;/el-menu-item>
& lt;/el-menu>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
activeIndex: ' 1 ',
activeIndex2: ' 1 '
};
}，
方法:{
handleSelect(关键,keyPath) {
控制台。日志(关键,keyPath);
}
}
}
& lt;/script>
之前
在App.vue中引入header.vue
& lt; template>
& lt; div id=坝τ谩北?
& lt; Header> & lt;/Header>
& lt;/div>
& lt;/template>
& lt; script>
从“进口头。/页面/header.vue”
出口默认{
组件:{
头,
}
}
& lt;/script>
& lt; style>
& lt;/style>
之前
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
