基于 Element 搭建后台

Element 是一套基于 Vue.js 的后台UI框架，利用好它可以实现比较漂亮和一致的后台UI。当然，他只能实现比较基础的后台 UI 和功能，如果你的后台需要数据图表展示，需要富文本编辑，那就需要自己找其他的插件了，虽然这些也是后台比较常用的功能。

后台.png
git 预览地址 https://zhuss.github.io/Ele-Admin/dist/#/login

目前 Element 的版本是1.3.3 ，组件已经相对丰富和稳定了，但是官方的快速上手文档写的有点复杂，所以这里聊聊我是如何快速搭建的，当然在这之前应该是了解过 Vue.js 的。

准备工具vue-cli npm yarn(可选) 命令行终端。

1、开始命令行终端进入到一个目录。

//el-admin创建的项目名称
vue init webpack el-admin

//然后根据提示y or n 在选择是否安装vue-router的时候选择y
//进入到el-admin文件目录
cd el-admin

//安装vue的依赖
yarn

//运行调试
npm run dev

不出意外，应该是代开了vue的模板项目。然后接下来就是安装element-ui框架。

//安装element-ui框架
yarn add  element-ui

//如果需要less
yarn add less less-loader --dev

如果全部都安装完成了，就可以开始开撸了。

搭建后台界面的框架，基本包括头部，左侧边栏，内容区域。这都是很常见的后台界面布局。

前面创建项目的时候有说vue-router，所以项目里会有一个router文件夹里面有index.js。我们看下router的配置。

import Vue from 'vue'
import Router from 'vue-router'

import login from '@/components/login/Login'
import home from '@/components/home/Home'
import videoList from '@/components/video/List'
import topicList from '@/components/topic/List'

Vue.use(Router)
export default new Router({
  routes: [{
    name: 'login',
    path: '/login',
    component: login
  }, {
    path: '',
    component: home,
    children: [{
      name: 'home',
      path: '',
      component: videoList
    }, {
      name: 'video',
      path: '/video',
      component: videoList
    }, {
      name: 'topic',
      path: '/topic',
      component: topicList
    }]
  }]
})

按照上面的路由在指定的目录下新建.vue就可以了，还有就是login和home是平级路由，然后在home下面还有子路由，所以home页面就是我们的后台布局页面，看看模板。

<div class="home">
  <div class="left"></div>
 <div class="right">
    <div class="top"></div>
    <div class="contnet">
      <router-view></router-view>
    </div>
 </div>
</div>

到这里，基本的项目框架都搭建完成了，然后去看element的文档去实现自己的功能吧。