🎉

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["vue-app"],
+  "plugins": ["syntax-dynamic-import"]
+}

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+.idea

Makefile

@@ -0,0 +1,9 @@
+.PHONY: dist build
+install:
+	@npm install
+
+dev: install
+	@npm run dev
+
+build:
+	@npm run build

README.md

@@ -0,0 +1,41 @@
+# 基于Vue+Element的简单管理后台模板
+
+## 简介
+这是一款基于 `Vue / Vuex / VueRouter / axios / ElementUI` 等等而成的简单管理后台模板
+象征着本萌新终于跨入前端界了🎉
+得益于webpack的`externals`特性，大部分资源都采用CDN分发，使得构建完毕后仅占不到70K
+萌新的第一个作品，代码稀烂，请轻喷。如能提出建设性建议则十分感谢
+
+## 预览
+![](https://ws1.sinaimg.cn/large/647b8589gy1ftndzqepcwj21hc0qvx6p.jpg)
+![](https://ws1.sinaimg.cn/large/647b8589gy1ftndzq4c51j21hc0qxjry.jpg)
+
+## 特性
+- 多标签页
+- 二级导航菜单
+- 轻量级表格导出
+- 集成UEditor
+- 集成一些小组件，内有示例
+
+## 开发 & 构建
+绝大部分配置项都在 `main.js` 里了，根据自己需求改就行
+导航菜单在 `src/router/router.js` 内配置
+
+```bash
+yarn
+# dev
+yarn dev
+
+# or build
+yarn build
+```
+
+## 鸣谢
+感谢以下小众但对本项目起到帮助的repo
+- [vue-ueditor-wrap](https://github.com/HaoChuan9421/vue-ueditor-wrap)
+- [vue-json-excel](https://github.com/jecovier/vue-json-excel)
+
+## 其他
+这个开源项目提取自最近的一个正式项目
+懒癌发作懒得写详细文档
+<del>反正代码稀烂也不会有除我之外的人用的</del>

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "element-starter",
+  "description": "A Vue.js project",
+  "author": "yi.shyang@ele.me",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --hot --env.dev",
+    "build": "rimraf dist && webpack -p --progress --hide-modules"
+  },
+  "dependencies": {},
+  "engines": {
+    "node": ">=6"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.6.0",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^6.4.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-preset-vue-app": "^1.2.0",
+    "css-loader": "^0.27.0",
+    "file-loader": "^0.10.1",
+    "html-webpack-plugin": "^2.24.1",
+    "postcss-loader": "^1.3.3",
+    "rimraf": "^2.5.4",
+    "style-loader": "^0.13.2",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^2.4.1",
+    "webpack-dev-server": "^2.4.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+}

src/App.vue

@@ -0,0 +1,37 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="stylus">
+  html, body, #app{
+    width: 100%;
+    height: 100%;
+  }
+
+  /**
+   * 用于覆盖组件库生成的DOM样式
+   */
+  .el-tabs {
+    .el-tabs__header {
+      margin 0
+    }
+  }
+  // 左侧导航栏的图标颜色
+  .el-menu-item, .el-submenu__title{
+    .iconfont{
+      color #c9cbd0
+    }
+  }
+  // 修复input右侧图表使用iconfont时下沉的问题
+  .el-input__suffix{
+    align-items: center;
+    display: flex;
+  }
+</style>

src/api.js

@@ -0,0 +1,66 @@
+const defaultOpt = {
+  autoAlert: true, // 请求出错自动弹窗
+  returnAll: false, // 请求成功返回所有数据而不只是result
+}
+
+export default ({
+  get(url, data = {}, opt = {}){
+    return new Promise((resolve, reject)=>{
+      opt = Object.assign(defaultOpt, opt)
+
+      // 拼接请求参数
+      if(data.length){
+        let query = []
+        for (let i in data) {
+          query.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]))
+        }
+        query = query.join('&')
+        url += (url.indexOf('?') !== -1 ? '&' : '?') + query
+      }
+
+      Vue.prototype.$http.get(url)
+        .then(data=>{
+          data = data.data
+          if(data.errCode == 0){
+            resolve(opt.returnAll ? data : data.result)
+          } else if(data.errCode == 10000){
+            Vue.prototype.vm._router.push('/login')
+          } else {
+            if(opt.autoAlert === true){
+              Vue.prototype.$alert(data.errMsg, '错误');
+            }
+          }
+          reject(data)
+        })
+        .catch(err=>{
+          Vue.prototype.$alert('请求接口出错，请稍后再试', '错误')
+          reject(err)
+        })
+    })
+  },
+
+  post(url, data = {}, opt = {}){
+    return new Promise((resolve, reject) => {
+      opt = Object.assign(defaultOpt, opt)
+
+      Vue.prototype.$http.post(url, data)
+        .then(data=>{
+          data = data.data
+          if(data.errCode == 0){
+            resolve(opt.returnAll ? data : data.result)
+          } else if(data.errCode == 10000){
+            Vue.prototype.vm._router.push('/login')
+          } else {
+            if(opt.autoAlert === true){
+              Vue.prototype.$alert(data.errMsg, '错误');
+            }
+          }
+          reject(data)
+        })
+        .catch(err=>{
+          Vue.prototype.$alert('请求接口出错，请稍后再试', '错误')
+          reject(err)
+        })
+    })
+  }
+})

src/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>XX管理系统</title>
+  <link href="https://lib.baomitu.com/element-ui/2.4.1/theme-chalk/index.css" rel="stylesheet">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_697323_v7bhq7aur0rrizfr.css">
+  <link href="https://lib.baomitu.com/normalize/8.0.0/normalize.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="https://lib.baomitu.com/vue/2.5.16/vue.min.js"></script>
+  <script src="https://lib.baomitu.com/vue-router/3.0.1/vue-router.min.js"></script>
+  <script src="https://lib.baomitu.com/vuex/3.0.1/vuex.min.js"></script>
+  <script src="https://lib.baomitu.com/axios/0.18.0/axios.min.js"></script>
+  <script src="https://lib.baomitu.com/element-ui/2.4.1/index.js"></script>
+  <script src="https://lib.baomitu.com/element-ui/2.4.1/locale/zh-CN.min.js"></script>
+  <script src="https://lib.baomitu.com/screenfull.js/3.3.2/screenfull.min.js"></script>
+  <script src="https://lib.baomitu.com/downloadjs/1.4.8/download.min.js"></script>
+</body>
+</html>

src/main.js

@@ -0,0 +1,36 @@
+import router from './router/index'
+import store from './store'
+import App from './App.vue'
+import Api from './api'
+
+// Element组件库配置
+Vue.prototype.$ELEMENT = { size: 'small', zIndex: 500 };
+
+// URL配置
+if(process.env.NODE_ENV === 'production'){
+  Vue.prototype.$baseUrl = 'https://www.xxxx.com/'
+} else {
+  Vue.prototype.$baseUrl = 'http://127.0.0.1:8010/'
+  Vue.config.devtools = true // 允许浏览器扩展Vue DevTools调试
+}
+Vue.prototype.$phpUrl = Vue.prototype.$baseUrl + 'api/public/' // 指向后端的公开目录
+Vue.prototype.$apiUrl = Vue.prototype.$phpUrl + 'index.php/market/' // api接口前缀
+
+/**
+ * 工具
+ */
+// 接口调用
+Vue.prototype.$http = axios.create({
+  baseURL: Vue.prototype.$apiUrl,
+  timeout: 10000,
+  headers: {
+    token: store.state.token
+  }
+})
+Vue.prototype.$api = Api
+
+Vue.prototype.vm = new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')

src/page/admin/Layout.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-container v-loading="loading">
+    <el-aside width="auto">
+      <Menu></Menu>
+    </el-aside>
+    <el-container>
+      <el-header>
+        <Header></Header>
+      </el-header>
+
+      <Tabs></Tabs>
+
+      <el-main>
+        <keep-alive :include="$store.state.layout.tabs.keepAlive">
+          <router-view v-loading="$store.state.layout.loading"></router-view>
+        </keep-alive>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+  import Menu from './component/Menu'
+  import Header from './component/Header'
+  import Tabs from './component/Tabs'
+  import { menuRouter } from "@/router/router";
+
+  export default {
+    components: { Menu, Header, Tabs },
+    beforeRouteEnter (to, from, next) {
+      next(vm => {
+        // if(vm.$store.state.token == '') return '/login'
+
+        // 如果直接访问子菜单，则需要添加标签页
+        if(to.fullPath != '/'){
+          // 计算导航菜单indexPath（最多只算2级）
+          let indexPath = ''
+          menuRouter.map((menu, i)=>{
+            if(menu.path == to.matched[0].path){
+              indexPath += i
+
+              if(to.matched.length >= 2 && menu.children.length > 1){
+                let childrenPath = to.matched[1].path.split('/').pop()
+                menu.children.map((menu, i)=>{
+                  if(menu.path == childrenPath){
+                    indexPath += '-' + i
+                    return false
+                  }
+                })
+              }
+              return false
+            }
+          })
+
+          vm.$store.commit('layout/setMenuIndex', indexPath)
+          vm.$store.commit('layout/addTab', to)
+        }
+      })
+    },
+    watch:{
+      '$route'(to){
+        this.$store.commit('layout/addTab', to)
+      },
+    },
+    data(){
+      return {
+        loading: false,
+      }
+    },
+    created(){
+      // 获取用户基本信息
+      // this.loading = true
+      // this.$api.get('index/getUserInfo')
+      //   .then(data=>{
+      //     this.$store.commit('saveUser', data)
+      //   })
+      //   .finally(()=>{
+      //     this.loading = false
+      //   })
+    },
+  }
+</script>
+
+<style scoped lang="stylus">
+  @import "~@/stylus/base"
+  .el-container{
+    height: 100%;
+  }
+  .el-header{
+    display: flex;
+     box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);
+  }
+  .el-main{
+    padding 15px
+  }
+</style>