update webpack config

update webpack config

build/webpack.dev.config.js

@@ -4,6 +4,7 @@
 
 var path = require('path');
 var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
     // 入口
@@ -98,10 +99,8 @@ module.exports = {
         }
     },
     plugins: [
-        // new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }),
-        // new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] }),             // 提取CSS
+        new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }),            // 提取CSS
         // https://doc.webpack-china.org/plugins/commons-chunk-plugin/
         new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendor.js' })
-        // new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),                           // 提取第三方库
     ]
 };

package.json

@@ -57,6 +57,7 @@
     "css-loader": "^0.23.1",
     "eslint": "^3.12.2",
     "eslint-plugin-html": "^1.7.0",
+    "extract-text-webpack-plugin": "^2.0.0",
     "file-loader": "^0.8.5",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",

test/main.js

@@ -15,162 +15,17 @@ Vue.use(iView, { locale });
 Vue.config.debug = true;
 
 // 路由配置
-var router = new VueRouter({
-    history: true
+const router = new VueRouter({
+    routes: [
+        {
+            path: '/affix',
+            component: require('./routers/affix.vue')
+        }
+    ]
 });
 
-router.map({
-    '/button': {
-        component: function (resolve) {
-            require(['./routers/button.vue'], resolve);
-        }
-    },
-    '/card': {
-        component: function (resolve) {
-            require(['./routers/card.vue'], resolve);
-        }
-    },
-    '/message': {
-        component: function (resolve) {
-            require(['./routers/message.vue'], resolve);
-        }
-    },
-    '/more': {
-        component: function (resolve) {
-            require(['./routers/more.vue'], resolve);
-        }
-    },
-    '/page': {
-        component: function (resolve) {
-            require(['./routers/page.vue'], resolve);
-        }
-    },
-    '/poptip': {
-        component: function (resolve) {
-            require(['./routers/poptip.vue'], resolve);
-        }
-    },
-    '/radio': {
-        component: function (resolve) {
-            require(['./routers/radio.vue'], resolve);
-        }
-    },
-    '/select': {
-        component: function (resolve) {
-            require(['./routers/select.vue'], resolve);
-        }
-    },
-    '/slider': {
-        component: function (resolve) {
-            require(['./routers/slider.vue'], resolve);
-        }
-    },
-    '/step': {
-        component: function (resolve) {
-            require(['./routers/step.vue'], resolve);
-        }
-    },
-    '/switch': {
-        component: function (resolve) {
-            require(['./routers/switch.vue'], resolve);
-        }
-    },
-    '/alert': {
-        component: function (resolve) {
-            require(['./routers/alert.vue'], resolve);
-        }
-    },
-    '/tag': {
-        component: function (resolve) {
-            require(['./routers/tag.vue'], resolve);
-        }
-    },
-    '/input': {
-        component: function (resolve) {
-            require(['./routers/input.vue'], resolve);
-        }
-    },
-    '/tooltip': {
-        component: function (resolve) {
-            require(['./routers/tooltip.vue'], resolve);
-        }
-    },
-    '/cascader': {
-        component: function (resolve) {
-            require(['./routers/cascader.vue'], resolve);
-        }
-    },
-    '/transfer': {
-        component: function (resolve) {
-            require(['./routers/transfer.vue'], resolve);
-        }
-    },
-    '/table': {
-        component: function (resolve) {
-            require(['./routers/table.vue'], resolve);
-        }
-    },
-    '/dropdown': {
-        component: function (resolve) {
-            require(['./routers/dropdown.vue'], resolve);
-        }
-    },
-    '/tabs': {
-        component: function (resolve) {
-            require(['./routers/tabs.vue'], resolve);
-        }
-    },
-    '/menu': {
-        component: function (resolve) {
-            require(['./routers/menu.vue'], resolve);
-        }
-    },
-    '/date': {
-        component: function (resolve) {
-            require(['./routers/date.vue'], resolve);
-        }
-    },
-    '/form': {
-        component: function (resolve) {
-            require(['./routers/form.vue'], resolve);
-        }
-    },
-    '/carousel': {
-        component: function (resolve) {
-            require(['./routers/carousel.vue'], resolve);
-        }
-    },
-    '/rate': {
-        component: function (resolve) {
-            require(['./routers/rate.vue'], resolve);
-        }
-    },
-    '/upload': {
-        component: function (resolve) {
-            require(['./routers/upload.vue'], resolve);
-        }
-    },
-    '/tree': {
-        component: function (resolve) {
-            require(['./routers/tree.vue'], resolve);
-        }
-    },
-    '/notice': {
-        component: function (resolve) {
-            require(['./routers/notice.vue'], resolve);
-        }
-    },
+new Vue({
+    el: '#app',
+    router: router,
+    render: h => h(App)
 });
-
-router.beforeEach(function () {
-    window.scrollTo(0, 0);
-});
-
-router.afterEach(function (transition) {
-
-});
-
-router.redirect({
-    '*': "/button"
-});
-router.start(App, '#app');

test/routers/affix.vue

@@ -0,0 +1,10 @@
+<template>
+    <Affix>
+        <span class="demo-affix">固定在最顶部</span>
+    </Affix>
+</template>
+<script>
+    export default {
+
+    }
+</script>