创建工程

注意：命令行都要使用管理员模式运行

1、 创建一个名叫 VueElementUI 的工程 vue init webpack VueElementUI

2、安装依赖，我们需要安装 vue-router、elementUI、sass-loader 和 node-sass 四个插件

# 进入工程目录
cd VueElementUI
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui -S
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

3、Npm命名解释：

npm install moduleName : 安装模块到项目目录下

npm install -g moduleName : -g 的意思就是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置

npm install --save moduleName : -save 的意思就是将模块安装到项目目录下，并在 package 文件的 dependencies 节点写入依赖，-S 为该命令的缩写

npm install --save-dev moduleName : --save-dev 的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，-D 为该命令的缩写

创建登录页面

把没有用的初始化东西删掉!
把源码目录中创建如下结构：

assets：用于存放资源文件

components：用于存放Vue功能组件

views：用于存放Vue试图组件

router：用于存放vue-router配置

创建首页视图，在 views 目录下创建一个名为 Main.vue 的视图组件：

<template>
  <h1>首页</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

在router文件下创建index.js路由配置文件

import Vue from "vue"
import Router from "vue-router"

import login from "../views/Login"
import main from "../views/Main"

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/login',
      component: login
    },
    {
      path: '/main',
      component: main
    }
  ]
})

配置main.js

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(router);
Vue.use(ElementUI);

new Vue({
  el: "#app",
  router,
  render: h => h(App) //ElementUI
})
`

App.vue

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App'
}
</script>

运行 npm run dev ,成功页面

路由嵌套

嵌套路由又称为子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样的，URL中各段动态路径也按某种结构对应嵌套的各层组件，例：

/user/foo/Profile						/user/foo/posts
+--------------------+					+--------------------+
|  User				 |					|  User				 |
|  +---------------+ |					|  +---------------+ |
|  | Profile	   | |	+-------------> |  | Posts  	   | |
|  |			   | |					|  |			   | |
|  +---------------+ |					|  +---------------+ |
+--------------------+					+--------------------+

1、用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件;

<template>
  <h1>个人信息</h1>
</template>

<script>
export default {
  name: "UserProfile"
}
</script>

<style scoped>

</style>

2、用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件;

<template>
  <h1>用户列表</h1>
</template>

<script>
export default {
  name: "UserList"
}
</script>

<style scoped>

</style>

3、配置嵌套路由修改 router 目录下的 index.js 路由配置文件，代码如:

import Vue from "vue"
import Router from "vue-router"

import login from "../views/Login"
import main from "../views/Main"

import UserProfile from "../views/user/Profile"
import UserList from "../views/user/List"

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/login',
      component: login
    },
    {
      path: '/main',
      component: main,
      children: [   //路由嵌套
        {path: '/user/profile', component: UserProfile},
        {path: '/user/list', component: UserList}
      ]
    }
  ]
})

4、修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--插入的地方-->
                <router-link to="/user/profile">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <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-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <!--在这里展示视图-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
  background-color: #2d76d4;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
</style>

5、测试成功