vue2+vuecli3+elementUI后台管理系列之elementui的引入(二)

接着上面的一节，我们此时把element-ui这个UI库添加到我们的系统中来，暂时我们先全量引入，后面的优化环节再进行按需引入的配置。

yarn add element-ui

按照elementui的官网操作，不会意外

package.json

"dependencies": {
   ...
    "element-ui": "^2.15.3",
    ...
  },

main.js加入这些配置

...
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
...

然后重启我们的系统，这一切都很正常!
elementui是否生效，我们来验证一下…

<template>
  <div id="app">
    <div>
      <el-button type="primary">Add</el-button>
    </div>
    <router-link to="/">index</router-link> |
    <router-link to="/login">login</router-link>
    <router-view></router-view>
  </div>
</template>

看到页面的element风格的button就生效了，于是我们就能正常玩耍了!

下面我们还是不急于vuex，因为暂时用不到，所以再等等…
接下来，删除这些测试的模板文件，我们来开发这种左右结构的导航

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

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

<style lang="scss"></style>

改造下我们的router/index.js

import Layout from '../layout/index'
const routes = [
  {
    path: '/',
    component: Layout,
    redirect:'/dashboard',
    children: [
      {
        path: 'dashboard',
        component: (resolve) => require(['@/views/index'], resolve),
        name: 'Dashboard',
        meta: { title: '首页', icon: 'index', affix: true, noCache: true }
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

src/layout/index.vue，导航组件给copy过来，再看我们的页面

<template>
  <div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped></style>

这样我们的导航就能正常的显示了，下一节将对此进行优化~并且你在ulr地址栏输入http://localhost:8080/#/也能重定向到http://localhost:8080/#/dashboard，
这一步我们成功了！
此时把我们的router完善起来

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@v/login/index'
// import Index from '@v/index/index'
import Layout from '../layout/index'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: (resolve) => require(['@/views/index'], resolve),
        name: 'Dashboard',
        meta: { title: '首页', icon: 'dashboard', affix: true, noCache: true }
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/404',
    component: (resolve) => require(['@/views/error/404'], resolve),
    hidden: true
  },
  {
    path: '/401',
    component: (resolve) => require(['@/views/error/401'], resolve),
    hidden: true
  },
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: (resolve) => require(['@/views/error/redirect'], resolve)
      }
    ]
  },
  {
    path: '/*',
    component: (resolve) => require(['@/views/error/404'], resolve),
    hidden: true
  }
]

const router = new VueRouter({
  mode: 'hash',
  routes
})

export default router

401.vue素材是借用的

404.vue

url输入错误也应该跳转到404
如果在开发中遇到这种报错，不要慌

我们要在.eslintrc.js中,如下配置即可

rules: {
    ....
    'space-before-function-paren': 'off'
  }

至此我们的ruoter就实现了增加elementui后的正常的跳转!