├── .babelrc
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── README.md
├── build
    ├── dev-server.js
    ├── webpack.config.js
    └── webpack.dist.config.js
├── index.html
├── package.json
├── postcss.config.js
└── src
    ├── components
        ├── common.scss
        ├── layout.vue
        ├── layout1.vue
        └── modal.js
    ├── main.js
    ├── pages
        ├── item1
        │   └── item1.vue
        ├── item2
        │   └── item2.vue
        └── item3
        │   ├── echarts
        │       └── line.vue
        │   ├── option1.vue
        │   └── option2.vue
    ├── store
        ├── index.js
        └── modules
        │   └── menu.js
    ├── testdata
        └── localdata
        │   ├── linelist.json
        │   └── menulist.json
    └── utils
        ├── axios.js
        ├── errorcode.js
        └── localdata.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [["env", {
 3 |     "targets": {
 4 |       "browsers": ["last 2 versions"]
 5 |     }
 6 |   }]],
 7 |   "plugins": [
 8 |     ["transform-object-rest-spread"]
 9 |   ]
10 | }


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/labnize/vue-vuex-router-element-webpack/665984fab646906002404f6fba82f724c01e79b6/.eslintignore


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // parser: 'babel-eslint',
 3 |   env: {
 4 |     browser: true,
 5 |     commonjs: true,
 6 |     es6: true
 7 |   },
 8 |   // extends: ['airbnb-base'],
 9 |   extends: ['plugin:vue/recommended', 'airbnb-base'],
10 |   plugins: [
11 |     'vue'
12 |   ],
13 |   rules: {
14 |     quotes: [2, 'single'],
15 |     semi: 2,
16 |     'max-len': [1, 120, 2],
17 |     'arrow-body-style': [1, 'as-needed'],
18 |     'comma-dangle': [2, 'never'],
19 |     'no-debugger': 2,
20 |     'no-console': 2,
21 |     'object-curly-spacing': [2, 'always'],
22 |     'no-undef': [1],
23 |     'new-cap': 1,
24 |     'no-param-reassign': 0,
25 |     'global-require': 0,
26 |     'no-mixed-operators': 0,
27 |     "import/no-extraneous-dependencies": 0,
28 |     "import/no-unresolved": 0,
29 |     "import/extensions": 0,
30 |     "import/no-dynamic-require": 0,
31 |     "import/no-duplicates": 0,
32 |     "vue/max-attributes-per-line": 0
33 |   }
34 | };


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules/
3 | dist/
4 | 
5 | .DS_Store
6 | *.log
7 | *.log.*


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue基础MVVM框架
 2 | 
 3 | ## 技术及框架
 4 | 
 5 | 包括但不限于:
 6 | 
 7 | - ES6/7  JS
 8 | - ESLint (代码规范)
 9 | - Vue (MVVM框架)
10 | - Vuex (统一状态管理)
11 | - Vue Router (路由)
12 | - axios (http库)
13 | - Element UI (UI框架)
14 | - Babel (ES6/7代码转译浏览器可执行)
15 | - Webpack (打包工具)
16 | 
17 | ## 安装调试
18 | 
19 | ```bash
20 | npm i
21 | # 或 yarn
22 | npm run start
23 | # 或 yarn start
24 | ```
25 | ## 打包
26 | 
27 | ```bash
28 | npm run build
29 | # or
30 | yarn build
31 | ```
32 | 


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const WebpackDevServer = require('webpack-dev-server');
 3 | const webpackDevConfig = require('./webpack.config.js');
 4 | const open = require('open');
 5 | 
 6 | const compiler = webpack(webpackDevConfig);
 7 | new WebpackDevServer(compiler, {
 8 |   contentBase: './',
 9 |   historyApiFallback: true,
10 |   hot: true,
11 |   noInfo: false,
12 |   publicPath: '/',
13 |   stats: { colors: true }
14 | }).listen(3001, 'localhost', () => {
15 |   console.log('http://127.0.0.1:3001');
16 |   console.log('Opening your system browser...');
17 |   open('http://127.0.0.1:3001');
18 | });
19 | 
20 | 


--------------------------------------------------------------------------------
/build/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path');
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 4 | const { VueLoaderPlugin } = require('vue-loader');
 5 | 
 6 | const webpackConfig = {
 7 |   entry: {
 8 |     app: path.resolve(__dirname, '../src/main.js')
 9 |   },
10 |   output: {
11 |     filename: '[name].js',
12 |     publicPath: '/'
13 |   },
14 |   cache: true,
15 |   devtool: 'inline-source-map',
16 |   resolve: {
17 |     extensions: ['.js', '.vue'],
18 |     alias: {
19 |       vue$: 'vue/dist/vue.esm.js',
20 |       components: path.join(__dirname, '../src/components'),
21 |       pages: path.join(__dirname, '../src/pages'),
22 |       localData: path.join(__dirname, '../src/testdata/localdata'),
23 |       util: path.join(__dirname, '../src/utils')
24 |       // jquery: path.join(__dirname, '../node_modules/jquery/dist/jquery.min.js')
25 |     }
26 |   },
27 |   module: {
28 |     rules: [
29 |       {
30 |         test: /\.vue$/,
31 |         loader: 'vue-loader',
32 |         options: {
33 |           loaders: {
34 |             scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
35 |             sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
36 |           }
37 |         }
38 |       },
39 |       {
40 |         test: /\.js$/,
41 |         use: [
42 |           {
43 |             loader: 'babel-loader'
44 |           }
45 |         ],
46 |         exclude: /node_modules/
47 |       },
48 |       {
49 |         test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
50 |         use: ['url-loader?limit=1024&name=images/[name].[hash:8].[ext]']
51 |       },
52 |       {
53 |         test: /\.css$/,
54 |         use: ['style-loader', 'css-loader', 'postcss-loader']
55 |       },
56 |       // 单独使用.scss
57 |       {
58 |         test: /\.scss$/,
59 |         use: [{
60 |           loader: 'style-loader' // 将 JS 字符串生成为 style 节点
61 |         }, {
62 |           loader: 'css-loader' // 将 CSS 转化成 CommonJS 模块
63 |         }, {
64 |           loader: 'sass-loader' // 将 Sass 编译成 CSS
65 |         }]
66 |       }
67 |     ]
68 |   },
69 |   plugins: [
70 |     new webpack.HotModuleReplacementPlugin(),
71 |     new webpack.NoEmitOnErrorsPlugin(),
72 |     // new webpack.ProvidePlugin({
73 |     //   $: 'jquery',
74 |     //   jQuery: 'jquery',
75 |     //   'window.jQuery': 'jquery'
76 |     // }),
77 |     new HtmlWebpackPlugin({
78 |       filename: 'index.html',
79 |       template: path.resolve(__dirname, '../index.html'),
80 |       inject: true
81 |     }),
82 |     new VueLoaderPlugin()
83 |   ]
84 | };
85 | 
86 | module.exports = webpackConfig;
87 | 


--------------------------------------------------------------------------------
/build/webpack.dist.config.js:
--------------------------------------------------------------------------------
  1 | const webpack = require('webpack');
  2 | const path = require('path');
  3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  4 | const CleanWebpackPlugin = require('clean-webpack-plugin');
  5 | const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
  6 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  7 | const { VueLoaderPlugin } = require('vue-loader');
  8 | 
  9 | const extractSass = new ExtractTextPlugin({
 10 |   filename: 'styles.[contenthash].css',
 11 |   disable: process.env.NODE_ENV === 'development'
 12 | });
 13 | 
 14 | const webpackConfig = {
 15 |   entry: {
 16 |     app: path.resolve(__dirname, '../src/main.js'),
 17 |     vendor: ['vue', 'element-ui', 'vue-router', 'vuex', 'echarts']
 18 |   },
 19 |   output: {
 20 |     path: path.join(__dirname, '../dist'),
 21 |     filename: '[name].[chunkhash].js',
 22 |     publicPath: '/'
 23 |   },
 24 |   cache: false,
 25 |   devtool: false,
 26 |   resolve: {
 27 |     extensions: ['.js', '.vue'],
 28 |     alias: {
 29 |       vue$: 'vue/dist/vue.esm.js',
 30 |       components: path.join(__dirname, '../src/components'),
 31 |       pages: path.join(__dirname, '../src/pages'),
 32 |       localData: path.join(__dirname, '../src/testdata/localdata'),
 33 |       util: path.join(__dirname, '../src/utils')
 34 |       // jquery: path.join(__dirname, '../node_modules/jquery/dist/jquery.min.js')
 35 |     }
 36 |   },
 37 |   module: {
 38 |     rules: [
 39 |       {
 40 |         test: /\.vue$/,
 41 |         loader: 'vue-loader',
 42 |         options: {
 43 |           extractCSS: true, // 单独使用.scss
 44 |           use: extractSass.extract({
 45 |             use: [{
 46 |               loader: 'css-loader'
 47 |             }, {
 48 |               loader: 'sass-loader'
 49 |             }],
 50 |             // 在开发环境使用 style-loader
 51 |             fallback: 'style-loader'
 52 |           })
 53 |         }
 54 |       },
 55 |       {
 56 |         test: /\.js$/,
 57 |         use: [
 58 |           {
 59 |             loader: 'babel-loader'
 60 |           }
 61 |         ],
 62 |         exclude: /node_modules/
 63 |       },
 64 |       {
 65 |         test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
 66 |         use: ['url-loader?limit=1024&name=images/[name].[hash:8].[ext]']
 67 |       },
 68 |       {
 69 |         test: /\.css$/,
 70 |         use: ['style-loader', 'css-loader', 'postcss-loader']
 71 |       },
 72 |       // 单独使用.scss
 73 |       {
 74 |         test: /\.scss$/,
 75 |         use: extractSass.extract({
 76 |           use: [{
 77 |             loader: 'css-loader'
 78 |           }, {
 79 |             loader: 'sass-loader'
 80 |           }],
 81 |           // 在开发环境使用 style-loader
 82 |           fallback: 'style-loader'
 83 |         })
 84 |       }
 85 |     ]
 86 |   },
 87 |   plugins: [
 88 |     extractSass,
 89 |     new BundleAnalyzerPlugin(),
 90 |     new CleanWebpackPlugin(['dist'], {
 91 |       root: path.resolve(__dirname, '../')
 92 |     }),
 93 |     new webpack.DefinePlugin({
 94 |       'process.env': {
 95 |         NODE_ENV: JSON.stringify('production')
 96 |       }
 97 |     }),
 98 |     new webpack.HashedModuleIdsPlugin(),
 99 |     new webpack.optimize.CommonsChunkPlugin({
100 |       name: ['vendor', 'runtime'],
101 |       minChunks: 2
102 |     }),
103 |     new webpack.optimize.UglifyJsPlugin({
104 |       compress: {
105 |         warnings: false
106 |       },
107 |       mangle: {
108 |         except: ['$super', '$', 'exports', 'require'] // 以上变量‘$super’, ‘$’, ‘exports’ or ‘require’，不会被混淆
109 |       },
110 |       output: {
111 |         comments: false
112 |       }
113 |     }),
114 |     new webpack.LoaderOptionsPlugin({
115 |       minimize: true
116 |     }),
117 |     new webpack.NoEmitOnErrorsPlugin(),
118 |     // new webpack.ProvidePlugin({
119 |     //   $: 'jquery',
120 |     //   jQuery: 'jquery',
121 |     //   'window.jQuery': 'jquery'
122 |     // }),
123 |     new HtmlWebpackPlugin({
124 |       filename: 'index.html',
125 |       template: path.resolve(__dirname, '../index.html'),
126 |       inject: true,
127 |       minify: {
128 |         removeAttributeQuotes: true,
129 |         removeComments: true,
130 |         removeEmptyAttributes: true,
131 |         collapseWhitespace: true
132 |       }
133 |     }),
134 |     new VueLoaderPlugin()
135 |   ]
136 | };
137 | 
138 | module.exports = webpackConfig;
139 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" id="html">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport"
 6 |         content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
 7 |   <title>Vue demo</title>
 8 | </head>
 9 | <body>
10 | <div id="app"></div>
11 | 
12 | <script>
13 |   window.apiUrl = 'http://10.47.73.41:3002/'
14 |   window.isDebug = true
15 | </script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-vuex-router-element-webpack",
 3 |   "version": "0.0.1",
 4 |   "description": "",
 5 |   "main": "main.js",
 6 |   "dependencies": {},
 7 |   "scripts": {
 8 |     "start": "node build/dev-server.js",
 9 |     "build": "webpack --config build/webpack.dist.config.js --progress --hide-modules"
10 |   },
11 |   "keywords": [
12 |     "vue",
13 |     "vue-router",
14 |     "vuex",
15 |     "webpack"
16 |   ],
17 |   "author": "July",
18 |   "license": "MIT",
19 |   "devDependencies": {
20 |     "autoprefixer": "^7.1.3",
21 |     "axios": "^0.18.0",
22 |     "babel-core": "^6.26.0",
23 |     "babel-eslint": "^8.0.3",
24 |     "babel-loader": "^7.1.2",
25 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
26 |     "babel-polyfill": "^6.26.0",
27 |     "babel-preset-env": "^1.6.1",
28 |     "clean-webpack-plugin": "^0.1.17",
29 |     "css-loader": "^0.28.5",
30 |     "echarts": "^3.8.5",
31 |     "element-ui": "^2.3.6",
32 |     "eslint": "^4.13.1",
33 |     "eslint-config-airbnb-base": "^12.1.0",
34 |     "eslint-plugin-html": "^4.0.1",
35 |     "eslint-plugin-import": "^2.8.0",
36 |     "eslint-plugin-vue": "^4.0.0-beta.3",
37 |     "extract-text-webpack-plugin": "^3.0.2",
38 |     "file-loader": "^0.11.2",
39 |     "html-webpack-plugin": "^2.30.1",
40 |     "jquery": "^3.2.1",
41 |     "node-sass": "^4.6.1",
42 |     "normalize.css": "^7.0.0",
43 |     "open": "0.0.5",
44 |     "postcss-loader": "^2.0.9",
45 |     "sass-loader": "^6.0.6",
46 |     "style-loader": "^0.19.1",
47 |     "url-loader": "^0.6.2",
48 |     "vue": "^2.5.16",
49 |     "vue-loader": "^15.0.1",
50 |     "vue-router": "^3.0.1",
51 |     "vue-template-compiler": "^2.5.16",
52 |     "vuex": "^3.0.1",
53 |     "webpack": "^3.8.1",
54 |     "webpack-bundle-analyzer": "^2.9.1",
55 |     "webpack-dev-server": "^2.9.4"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [
3 |     require('autoprefixer')()
4 |   ]
5 | };
6 | 


--------------------------------------------------------------------------------
/src/components/common.scss:
--------------------------------------------------------------------------------
1 | .axios-loading{
  font-size: 35px;
  .el-loading-spinner .el-loading-text{
    font-size: 18px;
  }
}

.axios-error{
  width: 25%;
  .el-message-box__message p{
    font-size: 18px;
    color: #000000;
  }
  .el-message-box__status.el-icon-error{
    font-size: 40px !important;
  }
}

.confirm-dialog{
  padding-bottom: 0;
  border: 0;
  width: 25%;
  .el-message-box__message p{
    font-size: 18px;
    color: #000000;
  }
  .el-message-box__status.el-icon-warning{
    font-size: 40px !important;
  }
  .el-message-box__btns{
    padding: 0;
    button:nth-child(2){  //第二个按钮，即'确定'按钮
      width: 100%;
      margin-left: 0;
      padding: 20px;
      margin-top: 40px;
      font-size: 18px;
      color: rgb(51, 51, 51);
      background-color: rgb(209, 218, 231);
      border-color: rgb(209, 218, 231);
    }
  }
}


--------------------------------------------------------------------------------
/src/components/layout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="layout">
  3 |     <el-container style="min-height: 100vh">
  4 |       <el-header>
  5 |         <div
  6 |           width="200px"
  7 |           class="logo"/>
  8 |       </el-header>
  9 |       <el-container>
 10 |         <el-aside width="200px">
 11 |           <el-row class="tac">
 12 |             <el-col :span="24">
 13 |               <template v-if="menuList.length">
 14 |                 <el-menu
 15 |                   :default-active="defaultActive"
 16 |                   class="el-menu-vertical-demo"
 17 |                   @open="handleOpen"
 18 |                   @close="handleClose"
 19 |                   background-color="#383a4b"
 20 |                   text-color="#fff"
 21 |                   active-text-color="#ffd04b"
 22 |                   :router="true">
 23 |                   <template v-for="item in menuList">
 24 |                     <template v-if="item.sub">
 25 |                       <el-submenu :index="item.key" :key="item.key">
 26 |                         <template slot="title">
 27 |                           <i class="el-icon-location"/>
 28 |                           <span>{{ item.name }}</span>
 29 |                         </template>
 30 |                         <el-menu-item v-for="subItem in item.sub" :index="subItem.key" :key="subItem.key">
 31 |                           {{ subItem.name }}
 32 |                         </el-menu-item>
 33 |                       </el-submenu>
 34 |                     </template>
 35 |                     <template v-else>
 36 |                       <el-menu-item :index="item.key" :key="item.key">
 37 |                         <i class="el-icon-menu"/>
 38 |                         <span slot="title">{{ item.name }}</span>
 39 |                       </el-menu-item>
 40 |                     </template>
 41 |                   </template>
 42 |                 </el-menu>
 43 |               </template>
 44 |             </el-col>
 45 |           </el-row>
 46 |         </el-aside>
 47 |         <el-container>
 48 |           <el-main>
 49 |             <slot name="content"/>
 50 |           </el-main>
 51 |           <el-footer>July Design ©2017 Created by July</el-footer>
 52 |         </el-container>
 53 |       </el-container>
 54 |     </el-container>
 55 |   </div>
 56 | </template>
 57 | 
 58 | <script>
 59 | // import menus from 'localData/menulist.json';
 60 | import Axios from 'util/axios';
 61 | 
 62 | const operateUrl = 'claa/menulist';
 63 | 
 64 | export default {
 65 |   name: 'Layout',
 66 |   data() {
 67 |     return {
 68 |       defaultActive: 'item1',
 69 |       menuList: []
 70 |     };
 71 |   },
 72 | 
 73 |   created() {
 74 |     this.defaultActive = this.$route.path.split('/')[1] ? this.$route.path.split('/')[1] : 'item1';
 75 |   },
 76 |   mounted() {
 77 |     this.doQuery();
 78 |   },
 79 | 
 80 |   computed: {
 81 |   },
 82 |   methods: {
 83 |     handleOpen(key, keyPath) {
 84 |       console.log(key, keyPath);
 85 |     },
 86 |     handleClose(key, keyPath) {
 87 |       console.log(key, keyPath);
 88 |     },
 89 |     doQuery() {
 90 |       const that = this;
 91 |       const param = {
 92 |         loadingFlag: true,
 93 |         url: operateUrl,
 94 |         method: 'POST',
 95 |         data: {
 96 |           type: 'on'
 97 |         },
 98 |         successFn(data) {
 99 |           that.menuList = data.list;
100 |         }
101 |       };
102 |       Axios.fetch(param);
103 |     }
104 |   }
105 | };
106 | </script>
107 | 
108 | <style lang="scss" scoped>
109 |   .logo{
110 | 
111 |   }
112 |   .el-header, .el-footer {
113 |     background-color: #383a4b;
114 |     color: #fff;
115 |     text-align: center;
116 |     line-height: 60px;
117 |   }
118 | 
119 |   .el-aside {
120 |     background-color: #383a4b;
121 |     .el-menu{
122 |       border-right: 0;
123 |     }
124 |   }
125 | 
126 |   .el-main {
127 |     background-color: #E9EEF3;
128 |   }
129 | 
130 |   body > .el-container {
131 |     margin-bottom: 40px;
132 |   }
133 | 
134 | </style>
135 | 


--------------------------------------------------------------------------------
/src/components/layout1.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="layout">
  3 |     <el-container style="min-height: 100vh">
  4 |       <el-header>
  5 |         <div width="200px" class="logo"/>
  6 |       </el-header>
  7 |       <el-container>
  8 |         <el-aside width="200px">
  9 |           <el-row class="tac">
 10 |             <el-col :span="24">
 11 |               <template v-if="menu.length">
 12 |                 <el-menu
 13 |                   :default-active="defaultActive"
 14 |                   class="el-menu-vertical-demo"
 15 |                   @open="handleOpen"
 16 |                   @close="handleClose"
 17 |                   background-color="#383a4b"
 18 |                   text-color="#fff"
 19 |                   active-text-color="#ffd04b"
 20 |                   :router="true">
 21 |                   <template v-for="item in menu">
 22 |                     <template v-if="item.sub">
 23 |                       <el-submenu :index="item.key" :key="item.key">
 24 |                         <template slot="title">
 25 |                           <i class="el-icon-location"/>
 26 |                           <span>{{ item.name }}</span>
 27 |                         </template>
 28 |                         <el-menu-item v-for="subItem in item.sub" :index="subItem.key" :key="subItem.key">
 29 |                           {{ subItem.name }}
 30 |                         </el-menu-item>
 31 |                       </el-submenu>
 32 |                     </template>
 33 |                     <template v-else>
 34 |                       <el-menu-item :index="item.key" :key="item.key">
 35 |                         <i class="el-icon-menu"/>
 36 |                         <span slot="title">{{ item.name }}</span>
 37 |                       </el-menu-item>
 38 |                     </template>
 39 |                   </template>
 40 |                 </el-menu>
 41 |               </template>
 42 |             </el-col>
 43 |           </el-row>
 44 |         </el-aside>
 45 |         <el-container>
 46 |           <el-main>
 47 |             <slot name="content"/>
 48 |           </el-main>
 49 |           <el-footer>July Design ©2017 Created by July</el-footer>
 50 |         </el-container>
 51 |       </el-container>
 52 |     </el-container>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script>
 57 | const operateUrl = 'claa/menulist';
 58 | 
 59 | export default {
 60 |   name: 'Layout',
 61 |   data() {
 62 |     return {
 63 |       defaultActive: 'item1'
 64 |     };
 65 |   },
 66 | 
 67 |   created() {
 68 |     this.defaultActive = this.$route.path.split('/')[1] ? this.$route.path.split('/')[1] : 'item1';
 69 |   },
 70 |   mounted() {
 71 |     this.doQuery();
 72 |   },
 73 | 
 74 |   computed: {
 75 |     menu() {
 76 |       return this.$store.state.menu.menuList;
 77 |     }
 78 |   },
 79 |   methods: {
 80 |     handleOpen(key, keyPath) {
 81 |       console.log(key, keyPath);
 82 |     },
 83 |     handleClose(key, keyPath) {
 84 |       console.log(key, keyPath);
 85 |     },
 86 |     doQuery() {
 87 |       const param = {
 88 |         loadingFlag: true,
 89 |         url: operateUrl,
 90 |         method: 'POST',
 91 |         data: {
 92 |           type: 'on'
 93 |         }
 94 |       };
 95 |       this.$store.dispatch('fetch', param);
 96 |     }
 97 |   }
 98 | };
 99 | </script>
100 | 
101 | <style lang="scss" scoped>
102 |   .logo{
103 | 
104 |   }
105 |   .el-header, .el-footer {
106 |     background-color: #383a4b;
107 |     color: #fff;
108 |     text-align: center;
109 |     line-height: 60px;
110 |   }
111 | 
112 |   .el-aside {
113 |     background-color: #383a4b;
114 |     .el-menu{
115 |       border-right: 0;
116 |     }
117 |   }
118 | 
119 |   .el-main {
120 |     background-color: #E9EEF3;
121 |   }
122 | 
123 |   body > .el-container {
124 |     margin-bottom: 40px;
125 |   }
126 | 
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/modal.js:
--------------------------------------------------------------------------------
 1 | import { MessageBox, Message } from 'element-ui';
 2 | import 'components/common.scss';
 3 | 
 4 | const Modal = {
 5 |   confirmModal(data, ok) {
 6 |     MessageBox.confirm(data, {
 7 |       confirmButtonText: '确定',
 8 |       customClass: 'confirm-dialog',
 9 |       center: true,
10 |       type: 'warning',
11 |       showCancelButton: false
12 |     }).then(() => {
13 |       // ok确认回调可放到调用的地方，单独定义
14 |       Message({
15 |         type: 'success',
16 |         message: '全部开启成功!'
17 |       });
18 |     }).catch(() => {
19 |       Message({
20 |         type: 'info',
21 |         message: '已取消开启操作'
22 |       });
23 |     });
24 |   }
25 | };
26 | 
27 | export default Modal;
28 | 
29 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import ElementUI from 'element-ui';
 2 | import 'normalize.css';
 3 | import 'element-ui/lib/theme-chalk/index.css';
 4 | import Vue from 'vue';
 5 | import VueRouter from 'vue-router';
 6 | 
 7 | import item1 from 'pages/item1/item1';
 8 | import item2 from 'pages/item2/item2';
 9 | import item31 from 'pages/item3/option1';
10 | import item32 from 'pages/item3/option2';
11 | 
12 | import store from './store';
13 | 
14 | Vue.use(ElementUI);
15 | Vue.use(VueRouter);
16 | /* eslint-disable no-new */
17 | 
18 | const router = new VueRouter({
19 |   mode: 'history',
20 |   base: __dirname,
21 |   routes: [
22 |     { path: '/', component: item1 },
23 |     { path: '/item1', component: item1 },
24 |     { path: '/item2', component: item2 },
25 |     { path: '/item3-1', component: item31 },
26 |     { path: '/item3-2', component: item32 }
27 |   ]
28 | });
29 | new Vue({
30 |   el: '#app',
31 |   router,
32 |   store,
33 |   template: `
34 |     <div id="app">
35 |       <router-view class="view"></router-view>
36 |     </div>
37 |   `
38 | });
39 | 


--------------------------------------------------------------------------------
/src/pages/item1/item1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <div
 4 |       slot="content"
 5 |       class="item1">
 6 |       <div class="text">
 7 |         <el-button
 8 |           type="primary"
 9 |           @click="handleOpen">全部打开</el-button>
10 |       </div>
11 |     </div>
12 |   </Layout>
13 | </template>
14 | 
15 | <script>
16 | import Layout from 'components/layout1';
17 | import Modal from 'components/modal';
18 | 
19 | export default {
20 |   components: {
21 |     Layout
22 |   },
23 |   methods: {
24 |     handleOpen() {
25 |       Modal.confirmModal('确定打开所有设备吗?');
26 |     }
27 |   }
28 | };
29 | </script>
30 | 
31 | <style lang="scss" scoped>
32 | 
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/pages/item2/item2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <layout>
 3 |     <div slot="content">
 4 |       <el-table
 5 |         :data="tableData"
 6 |         style="width: 100%">
 7 |         <el-table-column
 8 |           prop="date"
 9 |           label="日期"
10 |           width="180"/>
11 |         <el-table-column
12 |           prop="name"
13 |           label="姓名"
14 |           width="180"/>
15 |         <el-table-column
16 |           prop="address"
17 |           label="地址"/>
18 |       </el-table>
19 |     </div>
20 |   </layout>
21 | </template>
22 | 
23 | <script>
24 | import Layout from 'components/layout';
25 | 
26 | export default {
27 |   components: {
28 |     Layout
29 |   },
30 |   data() {
31 |     return {
32 |       tableData: [{
33 |         date: '2016-05-02',
34 |         name: '王小虎',
35 |         address: '上海市普陀区金沙江路 1518 弄'
36 |       }, {
37 |         date: '2016-05-04',
38 |         name: '王小虎',
39 |         address: '上海市普陀区金沙江路 1517 弄'
40 |       }, {
41 |         date: '2016-05-01',
42 |         name: '王小虎',
43 |         address: '上海市普陀区金沙江路 1519 弄'
44 |       }, {
45 |         date: '2016-05-03',
46 |         name: '王小虎',
47 |         address: '上海市普陀区金沙江路 1516 弄'
48 |       }]
49 |     };
50 |   }
51 | };
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/pages/item3/echarts/line.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="lineChart" style="width: 100%; height: 100%" />
  3 | </template>
  4 | 
  5 | <script>
  6 | import echarts from 'echarts';
  7 | 
  8 | let LineChart = echarts;
  9 | export default {
 10 |   name: 'Lines',
 11 |   props: {
 12 |     param: {
 13 |       type: Array,
 14 |       required: true
 15 |     }
 16 |   },
 17 |   watch: {
 18 |     param() {
 19 |       if (this.param && this.param.length) {
 20 |         this.initLines();
 21 |       }
 22 |     }
 23 |   },
 24 |   mounted() {
 25 |     LineChart = echarts.init(document.getElementById('lineChart'));
 26 |     if (this.param && this.param.length) {
 27 |       this.initLines();
 28 |     }
 29 |   },
 30 |   methods: {
 31 |     initLines() {
 32 |       const successrate = [];
 33 |       const maxsuccessimagerate = [];
 34 |       const maxsuccessregionrate = [];
 35 |       const maxfailimagerate = [];
 36 |       const maxfailregionrate = [];
 37 |       const counttime = [];
 38 |       this.param.forEach((value) => {
 39 |         successrate.push(value.successrate);
 40 |         maxsuccessimagerate.push(value.maxsuccessimagerate);
 41 |         maxsuccessregionrate.push(value.maxsuccessregionrate);
 42 |         maxfailimagerate.push(value.maxfailimagerate);
 43 |         maxfailregionrate.push(value.maxfailregionrate);
 44 |         counttime.push(value.counttime);
 45 |       });
 46 | 
 47 |       const option = {
 48 |         title: {
 49 |           text: '堆叠区域图',
 50 |           x: 'center'
 51 |         },
 52 |         color: ['#dd5820', '#007ac2', '#81c267', '#facc41'],
 53 |         tooltip: {
 54 |           trigger: 'axis'
 55 |         },
 56 |         legend: {
 57 |           top: '30',
 58 |           data: ['测试一', '测试二', '测试三', '测试四', '测试五']
 59 |         },
 60 |         grid: {
 61 |           left: '3%',
 62 |           right: '4%',
 63 |           bottom: '3%',
 64 |           containLabel: true
 65 |         },
 66 |         toolbox: {
 67 |           right: 60,
 68 |           feature: {
 69 |             saveAsImage: {}
 70 |           }
 71 |         },
 72 |         xAxis: [
 73 |           {
 74 |             type: 'category',
 75 |             boundaryGap: false,
 76 |             data: counttime
 77 |           }
 78 |         ],
 79 |         yAxis: [
 80 |           {
 81 |             type: 'value',
 82 |             axisLabel: {
 83 |               textStyle: {
 84 |                 color: '#5a6c77',
 85 |                 fontSize: '12',
 86 |                 extraCssText: 'line-height:30px'
 87 |               }
 88 |             }
 89 |           }
 90 |         ],
 91 |         series: [
 92 |           {
 93 |             name: '测试一',
 94 |             type: 'line',
 95 |             data: successrate
 96 |           }, {
 97 |             name: '测试二',
 98 |             type: 'line',
 99 |             data: maxsuccessimagerate
100 |           }, {
101 |             name: '测试三',
102 |             type: 'line',
103 |             data: maxsuccessregionrate
104 |           }, {
105 |             name: '测试四',
106 |             type: 'line',
107 |             data: maxfailimagerate
108 |           }, {
109 |             name: '测试五',
110 |             type: 'line',
111 |             data: maxfailregionrate
112 |           }
113 |         ]
114 |       };
115 | 
116 |       LineChart.setOption(option);
117 |     }
118 |   }
119 | };
120 | </script>
121 | 


--------------------------------------------------------------------------------
/src/pages/item3/option1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <layout>
 3 |     <div slot="content">
 4 |       <el-tabs v-model="activeName" @tab-click="handleClick">
 5 |         <el-tab-pane label="用户管理" name="first">
 6 |           <div class="tabLine">
 7 |             <Lines :param="lineData" />
 8 |           </div>
 9 |         </el-tab-pane>
10 |         <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
11 |         <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
12 |         <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
13 |       </el-tabs>
14 |     </div>
15 |   </layout>
16 | </template>
17 | 
18 | <script>
19 | import Layout from 'components/layout';
20 | import Axios from 'util/axios';
21 | import Lines from './echarts/line';
22 | 
23 | const urlLine = 'claa/linelist';
24 | export default {
25 |   components: {
26 |     Layout,
27 |     Lines
28 |   },
29 |   data() {
30 |     return {
31 |       activeName: 'first',
32 |       lineData: []
33 |     };
34 |   },
35 |   mounted() {
36 |     this.doQueryLine();
37 |   },
38 |   methods: {
39 |     handleClick(tab, event) {
40 |       console.log(tab, event);
41 |     },
42 |     doQueryLine() {
43 |       const that = this;
44 |       const param = {
45 |         loadingFlag: true,
46 |         url: urlLine,
47 |         method: 'GET',
48 |         data: {},
49 |         successFn(data) {
50 |           that.lineData = data.list;
51 |         }
52 |       };
53 |       Axios.fetch(param);
54 |     }
55 |   }
56 | };
57 | </script>
58 | 
59 | <style lang="scss" scoped>
60 |   .tabLine{
61 |     height:400px;
62 |     margin-top: 20px;
63 |   }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/pages/item3/option2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <layout>
 3 |     <div slot="content">
 4 |       option2
 5 |     </div>
 6 |   </layout>
 7 | </template>
 8 | 
 9 | <script>
10 | import Layout from 'components/layout';
11 | 
12 | export default {
13 |   components: {
14 |     Layout
15 |   },
16 |   data() {
17 |     return {};
18 |   }
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | import menu from './modules/menu';
 4 | 
 5 | Vue.use(Vuex);
 6 | 
 7 | const store = new Vuex.Store({
 8 |   modules: {
 9 |     menu
10 |   }
11 | });
12 | 
13 | export default store;
14 | 


--------------------------------------------------------------------------------
/src/store/modules/menu.js:
--------------------------------------------------------------------------------
 1 | import Axios from 'util/axios';
 2 | 
 3 | const menu = {
 4 |   state: {
 5 |     menuList: []
 6 |   },
 7 |   mutations: {
 8 |     CHANGE_MENULIST: (state, list) => {
 9 |       state.menuList = list;
10 |     }
11 |   },
12 |   actions: {
13 |     fetch({ commit }, param) {
14 |       const params = {
15 |         ...param,
16 |         successFn(data) {
17 |           if (data.list && data.list.length) {
18 |             commit('CHANGE_MENULIST', data.list);
19 |           }
20 |         }
21 |       };
22 |       console.log(params);
23 |       Axios.fetch(params);
24 |     }
25 |   }
26 | };
27 | 
28 | export default menu;
29 | 


--------------------------------------------------------------------------------
/src/testdata/localdata/linelist.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "result": 0,
 3 |   "list": [
 4 |     {
 5 |       "id": "1",
 6 |       "name": "平台",
 7 |       "counttime": "2016-11-08 16:19",
 8 |       "successrate": 22,
 9 |       "maxsuccessimagerate": 82,
10 |       "maxsuccessregionrate": 56,
11 |       "maxfailimagerate": 92,
12 |       "maxfailregionrate": 33
13 |     },{
14 |       "id": "2",
15 |       "name": "平台",
16 |       "counttime": "2016-11-08 17:19",
17 |       "successrate": 32,
18 |       "maxsuccessimagerate": 52,
19 |       "maxsuccessregionrate": 66,
20 |       "maxfailimagerate": 22,
21 |       "maxfailregionrate": 23
22 |     },{
23 |       "id": "3",
24 |       "name": "平台",
25 |       "counttime": "2016-11-08 18:19",
26 |       "successrate": 42,
27 |       "maxsuccessimagerate": 32,
28 |       "maxsuccessregionrate": 76,
29 |       "maxfailimagerate": 32,
30 |       "maxfailregionrate": 43
31 |     },{
32 |       "id": "4",
33 |       "name": "平台",
34 |       "counttime": "2016-11-08 19:19",
35 |       "successrate": 22,
36 |       "maxsuccessimagerate": 42,
37 |       "maxsuccessregionrate": 6,
38 |       "maxfailimagerate": 142,
39 |       "maxfailregionrate": 13
40 |     },{
41 |       "id": "5",
42 |       "name": "平台",
43 |       "counttime": "2016-11-08 20:19",
44 |       "successrate": 62,
45 |       "maxsuccessimagerate": 52,
46 |       "maxsuccessregionrate": 96,
47 |       "maxfailimagerate": 52,
48 |       "maxfailregionrate": 73
49 |     }
50 |   ],
51 |   "message": "error"
52 | }


--------------------------------------------------------------------------------
/src/testdata/localdata/menulist.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "result": 0,
 3 |   "list": [
 4 |     {
 5 |       "key": "item1",
 6 |       "name": "导航一"
 7 |     },
 8 |     {
 9 |       "key": "item2",
10 |       "name": "导航二"
11 |     },
12 |     {
13 |       "key": "item3",
14 |       "name": "导航三",
15 |       "sub": [
16 |         {
17 |           "key": "item3-1",
18 |           "name": "选项1"
19 |         }, {
20 |           "key": "item3-2",
21 |           "name": "选项2"
22 |         }
23 |       ]
24 |     }
25 |   ]
26 | }


--------------------------------------------------------------------------------
/src/utils/axios.js:
--------------------------------------------------------------------------------
  1 | import axios from 'axios';
  2 | import { Loading } from 'element-ui';
  3 | import { MessageBox } from 'element-ui';
  4 | import 'components/common.scss';
  5 | import ErrorCode from './errorcode';
  6 | 
  7 | const localDatas = require('util/localdata');
  8 | 
  9 | export default class AXIOS {
 10 |   constructor() {
 11 |     this.loading = '';
 12 |   }
 13 | 
 14 |   static getEnvPrefix() {
 15 |     if (window.isDebug) {
 16 |       return '';
 17 |     }
 18 |     return window.apiUrl;
 19 |   }
 20 | 
 21 |   static fetch(fetchObj) {
 22 |     const {
 23 |       loadingFlag,
 24 |       method,
 25 |       successFn,
 26 |       errorFn
 27 |     } = fetchObj;
 28 |     let {
 29 |       url,
 30 |       data = {}
 31 |     } = fetchObj;
 32 | 
 33 |     if (loadingFlag) {
 34 |       this.loading = Loading.service({
 35 |         lock: true,
 36 |         text: '加载中...',
 37 |         spinner: 'el-icon-loading',
 38 |         customClass: 'axios-loading',
 39 |         background: 'rgba(0, 0, 0, 0.7)'
 40 |       });
 41 |     }
 42 |     if (window.isDebug) {
 43 |       setTimeout(() => {
 44 |         if (loadingFlag) {
 45 |           this.loading.close();
 46 |         }
 47 |         const localData = localDatas[url];
 48 |         if (localData.result === 0) {
 49 |           successFn(localData);
 50 |         } else {
 51 |           const errorMsg = ErrorCode(localData.code) || '服务器异常,请联系运维人员!';
 52 |           if (errorFn) {
 53 |             errorFn(errorMsg);
 54 |           } else {
 55 |             AXIOS.modalError(errorMsg);
 56 |           }
 57 |         }
 58 |       }, 500);
 59 |       return;
 60 |     }
 61 | 
 62 |     url = this.getEnvPrefix() + url;
 63 |     if (method.toLowerCase() === 'get') {
 64 |       data = null;
 65 |     } else {
 66 |       data = JSON.stringify(data);
 67 |     }
 68 | 
 69 |     axios({
 70 |       method,
 71 |       url,
 72 |       data: {
 73 |         req: AXIOS.isExisty(data) ? data : {}
 74 |       },
 75 |       responseType: 'json'
 76 |     })
 77 |       .then((res) => {
 78 |         if (loadingFlag) {
 79 |           this.loading.close();
 80 |         }
 81 |         if (res.result === 0) {
 82 |           successFn(res);
 83 |         } else {
 84 |           const errorMsg = ErrorCode(res.result) || '服务器异常,请联系运维人员!';
 85 |           if (errorFn) {
 86 |             errorFn(errorMsg);
 87 |           } else {
 88 |             AXIOS.modalError(errorMsg);
 89 |           }
 90 |         }
 91 |       })
 92 |       .catch((err) => {
 93 |         if (errorFn) {
 94 |           errorFn(err);
 95 |         } else {
 96 |           AXIOS.modalError(err);
 97 |         }
 98 |       });
 99 |   }
100 | 
101 |   static isExisty(obj) {
102 |     return obj !== null;
103 |   }
104 | 
105 |   static modalError(message) {
106 |     MessageBox.alert(message, {
107 |       showConfirmButton: false,
108 |       customClass: 'axios-error',
109 |       center: true,
110 |       type: 'error',
111 |       callback: (action) => {}
112 |     });
113 |   }
114 | }
115 | 


--------------------------------------------------------------------------------
/src/utils/errorcode.js:
--------------------------------------------------------------------------------
1 | const map = {
2 |   4: '服务器异常'
3 | };
4 | 
5 | module.exports = function (code) {
6 |   return map[code];
7 | };
8 | 


--------------------------------------------------------------------------------
/src/utils/localdata.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This module is used for mock testing
 3 |  * add new mock data if backend haven't implement the logic yet
 4 |  */
 5 | 
 6 | const localData = {
 7 |   'claa/menulist': require('localData/menulist.json'),
 8 |   'claa/linelist': require('localData/linelist.json')
 9 | };
10 | 
11 | module.exports = localData;
12 | 


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