├── static
    └── .gitkeep
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── Home.vue
    │   └── User.vue
    ├── store
    │   ├── index.js
    │   └── navTabs.js
    ├── router
    │   └── index.js
    ├── App.vue
    ├── main.js
    └── components
    │   ├── Index.vue
    │   ├── LeftNav.vue
    │   └── RightPane.vue
├── README.md
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── index.html
├── .babelrc
├── LICENSE
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huanent/vue-admin/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-admin
2 | Vue+ElementUI实现选卡式后台Admin
3 | 
4 | 预览地址：https://huanent.github.io/vue-quickstart/
5 | 
6 | # 新版本
7 | https://github.com/huanent/vue-quickstart
8 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         主页</div>
 4 | </template>
 5 | <script>
 6 | export default {
 7 |     name: 'Index'
 8 | }
 9 | </script>
10 | 
11 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/src/views/User.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <input type="text"> 用户
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     name: 'user'
 9 | }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserslist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vuex from "vuex"
 2 | import Vue from 'vue'
 3 | import NavTabs from './navTabs'
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | export default new Vuex.Store({
 8 |     modules: {
 9 |         navTabs: NavTabs
10 |     }
11 | })


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-admin</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <!-- built files will be auto injected -->
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Index from "../components/Index"
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'Index',
12 |       component: Index
13 |     }
14 |   ]
15 | })
16 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-runtime"],
12 |   "env": {
13 |     "test": {
14 |       "presets": ["env", "stage-2"],
15 |       "plugins": ["istanbul"]
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'app'
10 | }
11 | </script>
12 | 
13 | <style>
14 | #app {
15 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   color: #2c3e50;
19 | }
20 | 
21 | html,
22 | body {
23 |   margin: 0;
24 |   padding: 0;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | import ElementUI from 'element-ui'
 7 | import 'element-ui/lib/theme-default/index.css'
 8 | import store from './store'
 9 | 
10 | Vue.config.productionTip = false
11 | Vue.use(ElementUI)
12 | 
13 | /* eslint-disable no-new */
14 | new Vue({
15 |   el: '#app',
16 |   router,
17 |   store,
18 |   template: '<App/>',
19 |   components: { App }
20 | })
21 | 


--------------------------------------------------------------------------------
/src/components/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="nav">
 4 |             <left-nav></left-nav>
 5 |         </div>
 6 |         <div class="pane">
 7 |             <right-pane></right-pane>
 8 |         </div>
 9 |     </div>
10 | </template>
11 | <script>
12 | import LeftNav from './LeftNav'
13 | import RightPane from './RightPane'
14 | 
15 | export default {
16 |     name: 'Home',
17 |     components: {
18 |         LeftNav,
19 |         RightPane
20 |     }
21 | }
22 | </script>
23 | <style>
24 | .nav {
25 |     position: absolute;
26 |     left: 0;
27 |     top: 0;
28 |     bottom: 0;
29 |     width: 15rem;
30 |     background-color: #324157;
31 | }
32 | 
33 | .pane {
34 |     position: absolute;
35 |     left: 15rem;
36 |     top: 0;
37 |     bottom: 0;
38 |     right: 0;
39 |     overflow-x: hidden;
40 |     overflow-y: auto;
41 | }
42 | </style>
43 | 
44 | 


--------------------------------------------------------------------------------
/src/components/LeftNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="left-nav">
 3 |     <div class="logo">
 4 |       <i class="el-icon-menu"></i>
 5 |       <a>后台管理系统</a>
 6 |     </div>
 7 |     <el-menu theme="dark" @select="addTab">
 8 |       <el-submenu index="manager">
 9 |         <template slot="title">导航一</template>
10 |         <el-menu-item index="User">用户管理</el-menu-item>
11 |       </el-submenu>
12 |     </el-menu>
13 |   </div>
14 | </template>
15 | <script>
16 | import { mapMutations } from 'vuex'
17 | 
18 | export default {
19 |   name: 'LeftNav',
20 |   methods: {
21 |     ...mapMutations('navTabs', [
22 |       'addTab'
23 |     ])
24 |   }
25 | }
26 | </script>
27 | <style scoped>
28 | .logo {
29 |   display: flex;
30 |   justify-content: center;
31 |   align-items: center;
32 |   color: white;
33 |   height: 3.5rem;
34 |   border-bottom: solid 0.01rem #48576a;
35 | }
36 | 
37 | i {
38 |   margin-right: 0.5rem;
39 | }
40 | 
41 | .left-nav {
42 |   padding: 0.3rem;
43 | }
44 | </style>
45 | 
46 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 huanent
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/RightPane.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="right-pane">
 3 |         <el-tabs class="tabs" v-model="activeTabName" @tab-remove="closeTab" type="border-card">
 4 |             <el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name" :label="item.label" :closable="item.closable">
 5 |                 <component :is="item.component"></component>
 6 |             </el-tab-pane>
 7 |         </el-tabs>
 8 |     </div>
 9 | </template>
10 | <script>
11 | import { mapState, mapMutations } from 'vuex'
12 | import Vue from 'vue'
13 | 
14 | export default {
15 |     name: 'RightPane',
16 |     computed: {
17 |         activeTabName: {
18 |             get() {
19 |                 return this.$store.state.navTabs.activeTabName;
20 |             },
21 |             set(value) {
22 |                 this.$store.commit("navTabs/setActiveTabName", value);
23 |             }
24 |         },
25 |         ...mapState('navTabs',[
26 |             'tabList'
27 |         ])
28 |     },
29 |     methods: {
30 |         ...mapMutations('navTabs',[
31 |             'closeTab'
32 |         ])
33 |     }
34 | }
35 | </script>
36 | <style scoped>
37 | .right-pane {
38 |     height: 100%;
39 | }
40 | 
41 | .tabs {
42 |     height: 99%;
43 | }
44 | </style>
45 | 
46 | 


--------------------------------------------------------------------------------
/src/store/navTabs.js:
--------------------------------------------------------------------------------
 1 | import Vuex from 'vuex'
 2 | 
 3 | const Home = resolve => require(['../views/Home'], resolve)
 4 | 
 5 | const state = {
 6 |     activeTabName: "home",
 7 |     tabList: [
 8 |         {
 9 |             label: '主页',
10 |             name: 'home',
11 |             disabled: false,
12 |             closable: false,
13 |             component: Home
14 |         }
15 |     ]
16 | }
17 | 
18 | const mutations = {
19 |     setActiveTabName(state, name) {
20 |         state.activeTabName = name;
21 |     },
22 |     addTab(state, index) {
23 |         if (state.tabList.filter(f => f.name == index) == 0) {
24 |             let component = resolve => require([`../views/${index}`], resolve)
25 |             state.tabList.push({
26 |                 label: index,
27 |                 name: index,
28 |                 disabled: false,
29 |                 closable: true,
30 |                 component: component
31 |             })
32 |         }
33 |         state.activeTabName = index;
34 |     },
35 |     closeTab(state, name) {
36 |         let tab = state.tabList.filter(f => f.name == name)[0];
37 |         let index = state.tabList.indexOf(tab);
38 |         if (index != state.tabList.length - 1) {
39 |             state.activeTabName = state.tabList[index + 1].name;
40 |         } else {
41 |             state.activeTabName = state.tabList[index - 1].name;
42 |         }
43 |         state.tabList = state.tabList.filter(f => f.name != name);
44 |     }
45 | }
46 | 
47 | export default {
48 |     namespaced: true,
49 |     state,
50 |     mutations
51 | }


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {},
31 |     // CSS Sourcemaps off by default because relative paths are "buggy"
32 |     // with this option, according to the CSS-Loader README
33 |     // (https://github.com/webpack/css-loader#sourcemaps)
34 |     // In our experience, they generally work as expected,
35 |     // just be aware of this issue when enabling this option.
36 |     cssSourceMap: false
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-admin",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "huanent <huanent@hotmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "start": "node build/dev-server.js",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "element-ui": "^1.4.0",
14 |     "vue": "^2.3.3",
15 |     "vue-router": "^2.6.0",
16 |     "vuex": "^2.3.1"
17 |   },
18 |   "devDependencies": {
19 |     "autoprefixer": "^7.1.2",
20 |     "babel-core": "^6.22.1",
21 |     "babel-loader": "^7.1.1",
22 |     "babel-plugin-transform-runtime": "^6.22.0",
23 |     "babel-preset-env": "^1.3.2",
24 |     "babel-preset-stage-2": "^6.22.0",
25 |     "babel-register": "^6.22.0",
26 |     "chalk": "^2.0.1",
27 |     "connect-history-api-fallback": "^1.3.0",
28 |     "copy-webpack-plugin": "^4.0.1",
29 |     "css-loader": "^0.28.0",
30 |     "cssnano": "^3.10.0",
31 |     "eventsource-polyfill": "^0.9.6",
32 |     "express": "^4.14.1",
33 |     "extract-text-webpack-plugin": "^2.0.0",
34 |     "file-loader": "^0.11.1",
35 |     "friendly-errors-webpack-plugin": "^1.1.3",
36 |     "html-webpack-plugin": "^2.28.0",
37 |     "http-proxy-middleware": "^0.17.3",
38 |     "webpack-bundle-analyzer": "^2.2.1",
39 |     "semver": "^5.3.0",
40 |     "shelljs": "^0.7.6",
41 |     "opn": "^5.1.0",
42 |     "optimize-css-assets-webpack-plugin": "^2.0.0",
43 |     "ora": "^1.2.0",
44 |     "rimraf": "^2.6.0",
45 |     "url-loader": "^0.5.8",
46 |     "vue-loader": "^12.1.0",
47 |     "vue-style-loader": "^3.0.1",
48 |     "vue-template-compiler": "^2.3.3",
49 |     "webpack": "^2.6.1",
50 |     "webpack-dev-middleware": "^1.10.0",
51 |     "webpack-hot-middleware": "^2.18.0",
52 |     "webpack-merge": "^4.1.0"
53 |   },
54 |   "engines": {
55 |     "node": ">= 4.0.0",
56 |     "npm": ">= 3.0.0"
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions",
61 |     "not ie <= 8"
62 |   ]
63 | }
64 | 


--------------------------------------------------------------------------------