先在npm中安装vue脚手架，
1 //先安装国内镜像源 2 npm install -g cnpm --registry=https://registry.npm.taobao.org 3 4 //安装vue 5 cnpm install --global vue-cli 6 7 //创建一个项目 8 vue init webpack my-project 9 10 //安装依赖 11 cd my-project 12 cnpm install 13 14 //加入vue-router 15 cnpm install vue-router --save 16 17 //加入vuex 18 cnpm install vuex --save 19 20 //加入elementUI 21 cnpm i element-ui -S
1 <template> 2 <div id="app"> 3 <router-view/> 4 </div> 5 </template> 6 7 <script> 8 9 export default { 10 name: 'app', 11 } 12 </script> 13 14 <style> 15 body { 16 margin: 0; 17 padding: 0; 18 font-size: 12px; 19 } 20 </style>
再Home.vue
1 <template> 2 <el-container class="is-vertical"> 3 <my-header></my-header> 4 <el-container> 5 <el-aside width="230px"> 6 <el-menu class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" 7 unique-opened router background-color="#333d52" 8 text-color="#fff"> 9 <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> 10 <el-submenu :index="index+''" v-if="!item.leaf"> 11 <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template> 12 <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden"> 13 {{child.name}} 14 15 </el-menu-item> 16 </el-submenu> 17 <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item> 18 </template> 19 </el-menu> 20 </el-aside> 21 <el-main> 22 <router-view></router-view> 23 </el-main> 24 </el-container> 25 </el-container> 26 </template> 27 28 <script> 29 import header from './header' 30 export default { 31 methods: { 32 handleopen() { 33 //console.log('handleopen'); 34 }, 35 handleclose() { 36 //console.log('handleclose'); 37 }, 38 handleselect: function (a, b) { 39 }, 40 }, 41 components: { 42 'my-header': header, 43 } 44 } 45 </script>
因header重新注册了一个新的组件
1 <template> 2 <el-header> 3 <el-row :gutter="12"> 4 <el-col :span="3" class="logo-width"><img src="../img/top_icon.png" alt=""></el-col> 5 <el-col :span="6"> 6 <el-dropdown> 7 <span class="el-dropdown-link"> 8 <i class="el-icon-setting" style="margin-right: 10px"></i><span>admin</span> 9 </span> 10 <el-dropdown-menu slot="dropdown"> 11 <el-dropdown-item>设置</el-dropdown-item> 12 <el-dropdown-item>修改密码</el-dropdown-item> 13 <el-dropdown-item>退出</el-dropdown-item> 14 </el-dropdown-menu> 15 </el-dropdown> 16 </el-col> 17 <el-col :span="6" class="userinfo"> 18 <el-dropdown> 19 <span type="primary">admin</span> 20 <!--<i class="el-icon-setting" style="margin-right: 15px"></i>--> 21 <el-dropdown-menu slot="dropdown"> 22 <el-dropdown-item>设置</el-dropdown-item> 23 <el-dropdown-item>修改密码</el-dropdown-item> 24 <el-dropdown-item>退出</el-dropdown-item> 25 </el-dropdown-menu> 26 </el-dropdown> 27 <span>|</span> 28 <el-button type="text">退出</el-button> 29 </el-col> 30 </el-row> 31 </el-header> 32 </template> 33 34 <script> 35 36 </script> 37 38 <style scoped> 39 .el-header { 40 background: #373d41; 41 color: #fff; 42 line-height: 60px; 43 padding-left: 6px; 44 } 45 .el-dropdown { 46 color: #fff; 47 } 48 .logo-width { 49 width: 230px; 50 text-align: center; 51 border-color: hsla(62,77%,76%,.3); 52 border-right-width: 1px; 53 border-right-style: solid; 54 } 55 .userinfo { 56 text-align: right; 57 padding-right: 35px; 58 float: right; 59 } 60 .el-button--text { 61 color: inherit; 62 } 63 </style>
然后是main.js
1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' 4 import App from './App' 5 import router from './router' 6 import ElementUi from 'element-ui' 7 import 'element-ui/lib/theme-chalk/index.css' 8 9 Vue.use(ElementUi) 10 11 Vue.config.productionTip = false 12 // $router.path('/overview') 13 14 /* eslint-disable no-new */ 15 new Vue({ 16 el: '#app', 17 router, 18 template: '<App/>', 19 components: { App } 20 })
router.js
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 import Home from '@/components/Home' 4 import Error from '@/components/404' 5 import overview from '@/components/overview/overview' 6 import instance from '@/components/instance/instance' 7 import backup from '@/components/instance/backup' 8 import recycleBin from '@/components/instance/recycleBin' 9 import keypairs from '@/components/instance/keypairs' 10 import capacityCalculation from '@/components/instance/capacityCalculation' 11 import ess_alarm from '@/components/ess/ess_alarm' 12 import ess_cluster from '@/components/ess/ess_cluster' 13 import ess_policy from '@/components/ess/ess_policy' 14 import ess_profile from '@/components/ess/ess_profile' 15 import ess_timer from '@/components/ess/ess_timer' 16 17 Vue.use(Router); 18 19 export default new Router({ 20 routes: [ 21 { 22 path: '/', 23 component: Home, 24 name: '', 25 iconCls: 'el-icon-message', 26 leaf: true,//只有一个节点 27 children: [ 28 { path: 'overview', component: overview, name: '云概览', mach: [] } 29 ] 30 }, 31 { 32 path: '/404', 33 name: '404', 34 component: Error, 35 hidden: true 36 }, 37 { 38 path: '/', 39 component: Home, 40 name: '云主机', 41 iconCls: 'el-icon-message',//图标样式class 42 children: [ 43 { path: 'instance', component: instance, name: '云主机列表', mach: [] }, 44 { path: 'recycle_bin', component: recycleBin, name: '回收站', mach: [] }, 45 { path: 'capacity_calculation', component: capacityCalculation, name: '容量计算', mach: [] }, 46 { path: 'backup', component: backup, name: '备份', mach: [] }, 47 { path: 'keypairs', component: keypairs, name: '密钥对', mach: [] }, 48 ] 49 }, 50 { 51 path: '/', 52 component: Home, 53 name: '弹性伸缩', 54 iconCls: 'el-icon-message',//图标样式class 55 children: [ 56 { path: 'ess_profile', component: ess_profile, name: '伸缩配置', mach: [] }, 57 { path: 'ess_policy', component: ess_policy, name: '伸缩规则', mach: [] }, 58 { path: 'ess_cluster', component: ess_cluster, name: '伸缩组', mach: [] }, 59 { path: '/', component: Home, name: '告警任务', mach: [ 60 { path: 'ess_timer', component: ess_timer, name: '定时伸缩'}, 61 { path: 'ess_alarm', component: ess_alarm, name: '告警伸缩'} 62 ] } 63 ] 64 }, 65 ] 66 })