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: '告警伸缩'}
        ] }
      ]
    },
  ]
})