vue + vue-router+vuex+elementUI开发环境搭建

先在npm中安装vue脚手架，

 //先安装国内镜像源
 npm install -g cnpm --registry=https://registry.npm.taobao.org

 //安装vue
 cnpm install --global vue-cli

 //创建一个项目
 vue init webpack my-project

 //安装依赖
 cd my-project
 cnpm install

 //加入vue-router
 cnpm install vue-router --save

 //加入vuex
 cnpm install vuex --save

 //加入elementUI
 cnpm i element-ui -S

页面布局

先App.vue

 <template>
   <div id="app">
     <router-view/>
   </div>
 </template>

 <script>

 export default {
   name: 'app',
 }
 </script>

 <style>
   body {
     margin: 0;
     padding: 0;
     font-size: 12px;
   }
 </style>

再Home.vue

 <template>
   <el-container class="is-vertical">
    <my-header></my-header>
     <el-container>
       <el-aside width="230px">
         <el-menu class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
                  unique-opened router background-color="#333d52"
                  text-color="#fff">
           <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
             <el-submenu :index="index+''" v-if="!item.leaf">
               <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
               <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">
                 {{child.name}}

               </el-menu-item>
             </el-submenu>
             <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>
           </template>
         </el-menu>
       </el-aside>
       <el-main>
         <router-view></router-view>
       </el-main>
     </el-container>
   </el-container>
 </template>

 <script>
   import header from './header'
     export default {
       methods: {
         handleopen() {
           //console.log('handleopen');
         },
         handleclose() {
           //console.log('handleclose');
         },
         handleselect: function (a, b) {
         },
       },
       components: {
         'my-header': header,
       }
     }
 </script>

因header重新注册了一个新的组件

 <template>
   <el-header>
     <el-row :gutter="12">
       <el-col :span="3" class="logo-width"><img src="../img/top_icon.png" alt=""></el-col>
       <el-col :span="6">
         <el-dropdown>
                           <span class="el-dropdown-link">
                             <i class="el-icon-setting" style="margin-right: 10px"></i><span>admin</span>
                           </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>设置</el-dropdown-item>
             <el-dropdown-item>修改密码</el-dropdown-item>
             <el-dropdown-item>退出</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </el-col>
       <el-col :span="6" class="userinfo">
         <el-dropdown>
           <span type="primary">admin</span>
           <!--<i class="el-icon-setting" style="margin-right: 15px"></i>-->
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>设置</el-dropdown-item>
             <el-dropdown-item>修改密码</el-dropdown-item>
             <el-dropdown-item>退出</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
         <span>|</span>
         <el-button type="text">退出</el-button>
       </el-col>
     </el-row>
   </el-header>
 </template>

 <script>

 </script>

 <style scoped>
   .el-header {
     background: #373d41;
     color: #fff;
     line-height: 60px;
     padding-left: 6px;
   }
   .el-dropdown {
     color: #fff;
   }
   .logo-width {
     width: 230px;
     text-align: center;
     border-color: hsla(62,77%,76%,.3);
     border-right-width: 1px;
     border-right-style: solid;
   }
   .userinfo {
     text-align: right;
     padding-right: 35px;
     float: right;
   }
   .el-button--text {
     color: inherit;
   }
 </style>

然后是main.js

 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'
 import ElementUi from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'

 Vue.use(ElementUi)

 Vue.config.productionTip = false
 // $router.path('/overview')

 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: { App }
 })

router.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/components/Home'
 import Error from '@/components/404'
 import overview from '@/components/overview/overview'
 import instance from '@/components/instance/instance'
 import backup from '@/components/instance/backup'
 import recycleBin from '@/components/instance/recycleBin'
 import keypairs from '@/components/instance/keypairs'
 import capacityCalculation from '@/components/instance/capacityCalculation'
 import ess_alarm from '@/components/ess/ess_alarm'
 import ess_cluster from '@/components/ess/ess_cluster'
 import ess_policy from '@/components/ess/ess_policy'
 import ess_profile from '@/components/ess/ess_profile'
 import ess_timer from '@/components/ess/ess_timer'

 Vue.use(Router);

 export default new Router({
   routes: [
     {
       path: '/',
       component: Home,
       name: '',
       iconCls: 'el-icon-message',
       leaf: true,//只有一个节点
       children: [
         { path: 'overview', component: overview, name: '云概览', mach: [] }
       ]
     },
     {
       path: '/404',
       name: '404',
       component: Error,
       hidden: true
     },
     {
       path: '/',
       component: Home,
       name: '云主机',
       iconCls: 'el-icon-message',//图标样式class
       children: [
         { path: 'instance', component: instance, name: '云主机列表', mach: [] },
         { path: 'recycle_bin', component: recycleBin, name: '回收站', mach: [] },
         { path: 'capacity_calculation', component: capacityCalculation, name: '容量计算', mach: [] },
         { path: 'backup', component: backup, name: '备份', mach: [] },
         { path: 'keypairs', component: keypairs, name: '密钥对', mach: [] },
       ]
     },
     {
       path: '/',
       component: Home,
       name: '弹性伸缩',
       iconCls: 'el-icon-message',//图标样式class
       children: [
         { path: 'ess_profile', component: ess_profile, name: '伸缩配置', mach: [] },
         { path: 'ess_policy', component: ess_policy, name: '伸缩规则', mach: [] },
         { path: 'ess_cluster', component: ess_cluster, name: '伸缩组', mach: [] },
         { path: '/', component: Home, name: '告警任务', mach: [
           { path: 'ess_timer', component: ess_timer, name: '定时伸缩'},
           { path: 'ess_alarm', component: ess_alarm, name: '告警伸缩'}
         ] }
       ]
     },
   ]
 })