├── static
    └── .gitkeep
├── .eslintignore
├── .jshintrc
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── components
    │   ├── BasicLayout.vue
    │   ├── FormRadio.vue
    │   ├── FormCheckbox.vue
    │   ├── BasicContainer.vue
    │   ├── Header.vue
    │   ├── NavMenu.vue
    │   └── HelloWorld.vue
    ├── router
    │   └── index.js
    ├── config
    │   └── menu-config.js
    ├── main.js
    └── App.vue
├── .editorconfig
├── .postcssrc.js
├── .gitignore
├── .babelrc
├── index.html
├── README.md
├── .eslintrc.js
└── package.json


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


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 |     "asi": true,
3 |     "esversion": 6
4 | }


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


--------------------------------------------------------------------------------
/src/components/BasicLayout.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     这是：Layout 布局
4 |   </div>
5 | </template>


--------------------------------------------------------------------------------
/src/components/FormRadio.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     这是：Radio 单选框
4 |   </div>
5 | </template>


--------------------------------------------------------------------------------
/src/components/FormCheckbox.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     这是：Checkbox 多选框
4 |   </div>
5 | </template>


--------------------------------------------------------------------------------
/src/components/BasicContainer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     这是：Container 布局容器
4 |   </div>
5 | </template>


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


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.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 | 


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


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false
 5 |     }],
 6 |     "stage-2"
 7 |   ],
 8 |   "plugins": ["transform-runtime","syntax-dynamic-import"],
 9 |   "env": {
10 |     "test": {
11 |       "presets": ["env", "stage-2"]    }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-row>
 3 |     <el-col :span="24"
 4 |       <div class="head-wrap"> <icon name="cogs"></icon> Element</div>
 5 |     </el-col>
 6 |   </el-row>
 7 | </template>
 8 | 
 9 | <style scoped>
10 | .head-wrap{
11 | 
12 | }
13 | </style>
14 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-el-dashboard</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import menus from '@/config/menu-config'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | var routes = []
 8 | 
 9 | menus.forEach((item) => {
10 |   item.sub.forEach((sub) => {
11 |     routes.push({
12 |       path: `/${sub.componentName}`,
13 |       name: sub.componentName,
14 |       component: () => import(`@/components/${sub.componentName}`)
15 |     })
16 |   })
17 | })
18 | 
19 | export default new Router({ routes })
20 | 


--------------------------------------------------------------------------------
/src/config/menu-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = [{
 2 |   name: '基础',
 3 |   id: 'basic',
 4 |   icon: 'th-large',
 5 |   sub: [{
 6 |     name: 'Layout 布局',
 7 |     componentName: 'BasicLayout'
 8 |   }, {
 9 |     name: 'Container 布局容器',
10 |     componentName: 'BasicContainer'
11 |   }]
12 | }, {
13 |   name: 'Form',
14 |   id: 'form',
15 |   icon: 'wpforms',
16 |   sub: [{
17 |     name: 'Radio 单选框',
18 |     componentName: 'FormRadio'
19 |   }, {
20 |     name: 'Checkbox 多选框',
21 |     componentName: 'FormCheckbox'
22 |   }]
23 | }]
24 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import ElementUI from 'element-ui'
 3 | import 'element-ui/lib/theme-chalk/index.css'
 4 | import 'normalize.css'
 5 | import 'vue-awesome/icons'
 6 | import Icon from 'vue-awesome/components/Icon'
 7 | 
 8 | import App from './App'
 9 | import router from './router'
10 | 
11 | Vue.config.productionTip = false
12 | 
13 | Vue.use(ElementUI)
14 | Vue.component('icon', Icon)
15 | 
16 | /* eslint-disable no-new */
17 | new Vue({
18 |   el: '#app',
19 |   router,
20 |   template: '<App/>',
21 |   components: { App }
22 | })
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # 1. [查看在线demo](https://wdd.js.org/vue-el-dashboard/#/)
 3 | 
 4 | 注意目前这个项目是使用vue-cli 2x版本构建的，很多模块都已经废弃了。建议看看最新版的demo, https://github.com/wangduanduan/v3-el-dashboard 
 5 | 最新版的demo增加了以下内容：
 6 | 
 7 | - 使用vue-cli 3x
 8 | - 使用vuex
 9 | - 增加多标签页来控制控制路由
10 | 
11 | 最新版截图
12 | ![](https://github.com/wangduanduan/v3-el-dashboard/raw/master/screen.png)
13 | 
14 | # 2. 初步教程
15 | 
16 | [阅读第一部分文档](https://wdd.js.org/vue-vue-router-elementui-stupid-simple-dashboard.html)
17 | 
18 | 第一部分使用到的技术点：
19 | - Vue
20 | - Vue-router
21 | - Element-ui
22 | - webpack
23 | - Normalize.css
24 | - vue-awesome
25 | - babel
26 | - 路由懒加载
27 | 
28 | # 3. 增加Vuex与tab页切换效果
29 | - Vuex
30 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // https://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parser: 'babel-eslint',
 6 |   parserOptions: {
 7 |     sourceType: 'module'
 8 |   },
 9 |   env: {
10 |     browser: true,
11 |   },
12 |   // https://github.com/standard/standard/blob/master/docs/RULES-en.md
13 |   extends: 'standard',
14 |   // required to lint *.vue files
15 |   plugins: [
16 |     'html'
17 |   ],
18 |   // add your custom rules here
19 |   'rules': {
20 |     // allow paren-less arrow functions
21 |     'arrow-parens': 0,
22 |     // allow async-await
23 |     'generator-star-spacing': 0,
24 |     // allow debugger during development
25 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <el-container>
 4 |       <el-header class="header">
 5 |         <vheader />
 6 |       </el-header>
 7 |       <el-container>
 8 |         <el-aside width="200px">
 9 |           <navmenu></navmenu>
10 |         </el-aside>
11 |         <el-main>
12 |           <router-view></router-view>
13 |         </el-main>
14 |       </el-container>
15 |     </el-container>
16 |   </div>
17 | </template>
18 | <script>
19 | import NavMenu from '@/components/NavMenu'
20 | import Header from '@/components/Header'
21 | 
22 | export default {
23 |   name: 'app',
24 |   components: {
25 |     'navmenu': NavMenu,
26 |     'vheader': Header
27 |   }
28 | }
29 | </script>
30 | 
31 | <style>
32 | .header {
33 |   background-color: #409EFF;
34 |   color: #fff;
35 |   line-height: 60px;
36 | }
37 | </style>


--------------------------------------------------------------------------------
/src/components/NavMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-row class="tac">
 3 |   <el-col :span="24">
 4 |     <el-menu
 5 |       class="el-menu-vertical-demo"
 6 |       router
 7 |       unique-opened
 8 |       @open="handleOpen"
 9 |       @close="handleClose"
10 |       background-color="#545c64"
11 |       text-color="#fff"
12 |       active-text-color="#ffd04b">
13 | 
14 |       <el-submenu v-for="item in menu" :index="item.id" :key="item.id">
15 |         <template slot="title">
16 |           <icon :name="item.icon"></icon>
17 |           <span v-text="item.name"></span>
18 |         </template>
19 |         <el-menu-item-group class="over-hide" v-for="sub in item.sub" :key="sub.componentName">
20 |           <el-menu-item :index="sub.componentName" v-text="sub.name">
21 |           </el-menu-item>
22 |         </el-menu-item-group>
23 |       </el-submenu>
24 | 
25 |     </el-menu>
26 |   </el-col>
27 | </el-row>
28 | </template>
29 | 
30 | <style scoped>
31 |   .over-hide{
32 |     overflow: hidden;
33 |   }
34 | </style>
35 | 
36 | <script>
37 |   import menu from '@/config/menu-config'
38 | 
39 |   export default {
40 |     data () {
41 |       return {
42 |         menu: menu
43 |       }
44 |     },
45 |     methods: {
46 |       handleOpen (key, keyPath) {
47 |         console.log(key, keyPath)
48 |       },
49 |       handleClose (key, keyPath) {
50 |         console.log(key, keyPath)
51 |       }
52 |     }
53 |   }
54 | </script>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <h2>Essential Links</h2>
 5 |     <ul>
 6 |       <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
 7 |       <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
 8 |       <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
 9 |       <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
10 |       <br>
11 |       <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
12 |     </ul>
13 |     <h2>Ecosystem</h2>
14 |     <ul>
15 |       <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16 |       <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17 |       <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
19 |     </ul>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | export default {
25 |   name: 'HelloWorld',
26 |   data () {
27 |     return {
28 |       msg: 'Welcome to Your Vue.js App'
29 |     }
30 |   }
31 | }
32 | </script>
33 | 
34 | <!-- Add "scoped" attribute to limit CSS to this component only -->
35 | <style scoped>
36 | h1, h2 {
37 |   font-weight: normal;
38 | }
39 | ul {
40 |   list-style-type: none;
41 |   padding: 0;
42 | }
43 | li {
44 |   display: inline-block;
45 |   margin: 0 10px;
46 | }
47 | a {
48 |   color: #42b983;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-el-dashboard",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "wangdd <wangdd@welljoint.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "lint": "eslint --ext .js,.vue src",
11 |     "build": "node build/build.js",
12 |     "deploy": "git subtree push --prefix docs origin gh-pages"
13 |   },
14 |   "dependencies": {
15 |     "element-ui": "^2.0.4",
16 |     "vue": "^2.5.2",
17 |     "vue-router": "^3.0.1"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^7.1.2",
21 |     "babel-core": "^6.22.1",
22 |     "babel-eslint": "^7.1.1",
23 |     "babel-loader": "^7.1.1",
24 |     "babel-plugin-syntax-dynamic-import": "^6.18.0",
25 |     "babel-plugin-transform-runtime": "^6.22.0",
26 |     "babel-preset-env": "^1.3.2",
27 |     "babel-preset-stage-2": "^6.22.0",
28 |     "babel-register": "^6.22.0",
29 |     "chalk": "^2.0.1",
30 |     "copy-webpack-plugin": "^4.0.1",
31 |     "css-loader": "^0.28.0",
32 |     "eslint": "^3.19.0",
33 |     "eslint-config-standard": "^10.2.1",
34 |     "eslint-friendly-formatter": "^3.0.0",
35 |     "eslint-loader": "^1.7.1",
36 |     "eslint-plugin-html": "^3.0.0",
37 |     "eslint-plugin-import": "^2.7.0",
38 |     "eslint-plugin-node": "^5.2.0",
39 |     "eslint-plugin-promise": "^3.4.0",
40 |     "eslint-plugin-standard": "^3.0.1",
41 |     "eventsource-polyfill": "^0.9.6",
42 |     "express": "^4.14.1",
43 |     "extract-text-webpack-plugin": "^3.0.0",
44 |     "file-loader": "^1.1.4",
45 |     "friendly-errors-webpack-plugin": "^1.6.1",
46 |     "html-webpack-plugin": "^2.30.1",
47 |     "node-notifier": "^5.1.2",
48 |     "normalize.css": "^7.0.0",
49 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
50 |     "ora": "^1.2.0",
51 |     "portfinder": "^1.0.13",
52 |     "postcss-loader": "^2.0.8",
53 |     "rimraf": "^2.6.0",
54 |     "semver": "^5.3.0",
55 |     "shelljs": "^0.7.6",
56 |     "url-loader": "^0.5.8",
57 |     "vue-awesome": "^2.3.4",
58 |     "vue-loader": "^13.3.0",
59 |     "vue-style-loader": "^3.0.1",
60 |     "vue-template-compiler": "^2.5.2",
61 |     "webpack": "^3.6.0",
62 |     "webpack-bundle-analyzer": "^2.9.0",
63 |     "webpack-dev-server": "^2.9.1",
64 |     "webpack-merge": "^4.1.0",
65 |     "webpack-parallel-uglify-plugin": "^1.0.2"
66 |   },
67 |   "engines": {
68 |     "node": ">= 4.0.0",
69 |     "npm": ">= 3.0.0"
70 |   },
71 |   "browserslist": [
72 |     "> 1%",
73 |     "last 2 versions",
74 |     "not ie <= 8"
75 |   ]
76 | }
77 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.2.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     // Use Eslint Loader?
24 |     // If true, your code will be linted during bundling and
25 |     // linting errors and warnings will be shown in the console.
26 |     useEslint: true,
27 |     // If true, eslint errors and warnings will also be shown in the error overlay
28 |     // in the browser.
29 |     showEslintErrorsInOverlay: false,
30 | 
31 |     /**
32 |      * Source Maps
33 |      */
34 | 
35 |     // https://webpack.js.org/configuration/devtool/#development
36 |     devtool: 'eval-source-map',
37 | 
38 |     // If you have problems debugging vue-files in devtools,
39 |     // set this to false - it *may* help
40 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
41 |     cacheBusting: true,
42 | 
43 |     // CSS Sourcemaps off by default because relative paths are "buggy"
44 |     // with this option, according to the CSS-Loader README
45 |     // (https://github.com/webpack/css-loader#sourcemaps)
46 |     // In our experience, they generally work as expected,
47 |     // just be aware of this issue when enabling this option.
48 |     cssSourceMap: false
49 |   },
50 | 
51 |   build: {
52 |     // Template for index.html
53 |     index: path.resolve(__dirname, '../dist/index.html'),
54 | 
55 |     // Paths
56 |     assetsRoot: path.resolve(__dirname, '../dist'),
57 |     assetsSubDirectory: 'static',
58 |     assetsPublicPath: '/vue-el-dashboard/',
59 | 
60 |     /**
61 |      * Source Maps
62 |      */
63 | 
64 |     productionSourceMap: true,
65 |     // https://webpack.js.org/configuration/devtool/#production
66 |     devtool: '#source-map',
67 | 
68 |     // Gzip off by default as many popular static hosts such as
69 |     // Surge or Netlify already gzip all static assets for you.
70 |     // Before setting to `true`, make sure to:
71 |     // npm install --save-dev compression-webpack-plugin
72 |     productionGzip: false,
73 |     productionGzipExtensions: ['js', 'css'],
74 | 
75 |     // Run the build command with an extra argument to
76 |     // View the bundle analyzer report after build finishes:
77 |     // `npm run build --report`
78 |     // Set to `true` or `false` to always turn it on or off
79 |     bundleAnalyzerReport: process.env.npm_config_report
80 |   }
81 | }
82 | 


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