add mock，未完待续

Author: zhongzhenlong

.babelrc

@@ -1,16 +1,31 @@
 {
-  "presets": ["stage-2"],
-  "plugins": ["transform-runtime","transform-vue-jsx",["component", [
-    {
-      "libraryName": "element-ui",
-      "styleLibraryName": "~src/css/theme"
-    }
-  ]]],
+  "presets": [
+    "es2015",
+    "stage-0"
+  ],
+  "plugins": [
+    "transform-runtime",
+    "transform-vue-jsx",
+    [
+      "component",
+      [
+        {
+          "libraryName": "element-ui",
+          "styleLibraryName": "~src/css/theme"
+        }
+      ]
+    ]
+  ],
   "comments": false,
   "env": {
     "test": {
-      "presets": ["stage-2"],
-      "plugins": [ "istanbul" ]
+      "presets": [
+        "es2015",
+        "stage-0"
+      ],
+      "plugins": [
+        "istanbul"
+      ]
     }
   }
 }

build/dev-client.js

@@ -1,7 +1,12 @@
 /* eslint-disable */
+// 实现浏览器端的EventSource，用于跟服务器双向通信
+// webpack热重载客户端跟dev-server上的热重载插件之间需要进行双向通信
+// 服务端webpack重新编译后，会向客户端推送信息，告诉客户端进行更新
 require('eventsource-polyfill')
+// webpack热重载客户端
 var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 
+// 客户端收到更新动作，执行页面刷新
 hotClient.subscribe(function (event) {
   if (event.action === 'reload') {
     window.location.reload()

build/dev-server.js

@@ -12,9 +12,9 @@ var webpack = require('webpack')
 var proxyMiddleware = require('http-proxy-middleware')
 var webpackConfig = require('./webpack.dev.conf')
 
-// default port where dev server listens for incoming traffic
+// 监听http端口
 var port = process.env.PORT || config.dev.port
-// automatically open browser, if not set will be false
+// 是否要自动打开浏览器
 var autoOpenBrowser = !!config.dev.autoOpenBrowser
 // Define HTTP proxies to your custom API backend
 // https://github.com/chimurai/http-proxy-middleware

build/webpack.base.conf.js

@@ -1,6 +1,6 @@
 var path = require('path')
 var utils = require('./utils')
-var config = require('../config')
+var config = require('../config/index')
 var vueLoaderConfig = require('./vue-loader.conf')
 
 function resolve (dir) {
@@ -9,14 +9,14 @@ function resolve (dir) {
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './src/main.js',
+    vendor: [ 'vue', 'vuex', 'vue-router', 'element-ui' ]  //第三方库和框架
   },
   output: {
+    // path仅仅告诉Webpack结果存储在哪里，然而publicPath项则被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值。
     path: config.build.assetsRoot,
     filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
+    publicPath: config.dev.assetsPublicPath
   },
   resolve: {
     extensions: ['.js', '.vue', '.json'],
@@ -43,22 +43,31 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
+        exclude: /(node_modules|bower_components)/,
         include: [resolve('src'), resolve('test')]
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        options: {
+          limit: 5120,
+          name: utils.assetsPath('img/[name].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10240,
+          name: utils.assetsPath('media/[name].[ext]')
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        options: {
+          limit: 10240,
+          name: utils.assetsPath('fonts/[name].[ext]')
         }
       }
     ]

build/webpack.dev.conf.js

@@ -28,6 +28,9 @@ module.exports = merge(baseWebpackConfig, {
     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.optimize.CommonsChunkPlugin({
+      names: ['vendor', 'manifest'],
+    }),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',

build/webpack.prod.conf.js

@@ -22,7 +22,9 @@ var webpackConfig = merge(baseWebpackConfig, {
   output: {
     path: config.build.assetsRoot,
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
+    // path仅仅告诉Webpack结果存储在哪里，然而publicPath项则被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值。
+    publicPath: config.build.assetsPublicPath
   },
   plugins: [
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
@@ -41,7 +43,7 @@ var webpackConfig = merge(baseWebpackConfig, {
     // }),
     // extract css into its own file
     new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
+      filename: utils.assetsPath('css/[name].[hash:7].css')
     }),
     // Compress extracted CSS. We are using this plugin so that possible
     // duplicated CSS from different components can be deduped.

config/index.js

@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '',
+    assetsPublicPath: '/',
     // assetsPublicPath: '/Vue-Admin/',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
@@ -27,7 +27,7 @@ module.exports = {
     port: 9000,
     autoOpenBrowser: false,
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: '',
     proxyTable: {
       // http://localhost:9000/api/menuList => http://localhost:3000/menuList
       '/api': {

index.html

@@ -5,13 +5,6 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Vue-Admin-Demo</title>
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
-  <!-- Polyfills -->
-  <!--[if lt IE 10]>
-  <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
-  <![endif]-->
-  <!--[if lte IE 11]>
-  <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
-  <![endif]-->
 </head>
 <body class="hold-transition skin-blue sidebar-mini">
 <div id="root">

package.json

@@ -16,7 +16,7 @@
     "axios": "^0.16.2",
     "babel-polyfill": "^6.26.0",
     "echarts": "^3.5.1",
-    "element-ui": "^1.4.3",
+    "element-ui": "^1.4.8",
     "eventsource-polyfill": "^0.9.6",
     "font-awesome": "^4.7.0",
     "vue": "^2.4.2",
@@ -39,8 +39,10 @@
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-latest": "^6.22.0",
+    "babel-preset-stage-0": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "babel-register": "^6.26.0",
     "chalk": "^1.1.3",

src/App.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-
+  import 'babel-polyfill'
   import Vue from 'vue'
   import sideMenu from './components/sideMenu.vue'
   import impHeader from "./pages/layout/header.vue"