vue dir

src/hello.vue → src/app.vue

@@ -1,5 +1,8 @@
 <template>
-    <div>
+<div>
+    <navbar></navbar>
+
+    <!-- <div>
         <h3>Components</h3>
         <p>{{ vue_hello }} MUGI</p>
         <test></test>
@@ -18,22 +21,27 @@
             </el-container>
         </el-container>
 
-    </div>
+    </div> -->
+
+    <foot></foot>
+</div>
 </template>
 
 <script>
-    import test from './test.vue';
-
-    module.exports = {
-        data: function () {
-            return {
-                vue_hello: 'hello'
-            };
-        },
-        components: {
-            test: test
-        }
-    };
+import navbar from './apps/common/navbar.vue';
+import foot from './apps/common/foot.vue';
+
+module.exports = {
+    data: function () {
+        return {
+            vue_hello: 'hello'
+        };
+    },
+    components: {
+        navbar: navbar,
+        foot: foot
+    }
+};
 </script>
 
 <style scoped lang="scss">

src/apps/common/foot.vue

@@ -0,0 +1,19 @@
+<template>
+    <p>I'm {{ vue_name }} !</p>
+</template>
+
+<script>
+module.exports = {
+    data: function() {
+        return {
+            vue_name: 'foot'
+        };
+    }
+};
+</script>
+
+<style scoped lang="scss">
+p {
+    color: #00F;
+}
+</style>

src/apps/common/navbar.vue

@@ -0,0 +1,19 @@
+<template>
+    <p>I'm {{ vue_name }} !</p>
+</template>
+
+<script>
+module.exports = {
+    data: function() {
+        return {
+            vue_name: 'navbar'
+        };
+    }
+};
+</script>
+
+<style scoped lang="scss">
+p {
+    color: #00F;
+}
+</style>

src/main.js

@@ -1,25 +1,24 @@
 import Vue from 'vue';
-import VueRouter from 'vue-router';
+// import VueRouter from 'vue-router';
 
 import 'normalize.css';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
-import App from './hello.vue';
-import test from './test.vue';
+import App from './app.vue';
 
-// vue-router
+// // vue-router
 
-Vue.use(VueRouter);
+// Vue.use(VueRouter);
 
-const routes = [{
-    path: '/test',
-    component: test
-}];
+// const routes = [{
+//     path: '/test',
+//     component: test
+// }];
 
-const router = new VueRouter({
-    routes // （缩写）相当于 routes: routes
-});
+// const router = new VueRouter({
+//     routes // （缩写）相当于 routes: routes
+// });
 
 // vue
 
@@ -28,5 +27,5 @@ Vue.use(ElementUI);
 new Vue({
     el: '#app',
     render: h => h(App),
-    router
+    // router
 });

webpack.config.js

@@ -8,6 +8,7 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const publicPath = '';
+/* global __dirname */
 
 module.exports = (options = {}) => ({
     entry: './src/main.js',
@@ -18,46 +19,14 @@ module.exports = (options = {}) => ({
     module: {
         rules: [{
             test: /\.css$/,
-            // use: [
-            //     'style-loader',
-            //     'css-loader',
-            //     // {
-            //     //     loader: 'css-loader',
-            //     //     options: {
-            //     //         importLoaders: 1
-            //     //     }
-            //     // },
-            //     'postcss-loader'
-            // ]
             use: ExtractTextPlugin.extract({  
                 fallback: 'style-loader',  
                 use: [  
                     'css-loader',
                     'postcss-loader'
                 ]  
-            })  
-            // use: ExtractTextPlugin.extract({
-            //     fallback: 'style-loader',
-            //     use: [{
-            //             loader: 'css-loader',
-            //             options: {
-            //                 importLoaders: 1
-            //             }
-            //         },
-            //         'postcss-loader'
-            //     ]
-            // })
+            })
         },
-        // {
-        //     test: /\.less$/,
-        //     use: [{
-        //         loader: 'style-loader' // creates style nodes from JS strings
-        //     }, {
-        //         loader: 'css-loader' // translates CSS into CommonJS
-        //     }, {
-        //         loader: 'less-loader' // compiles Less to CSS
-        //     }]
-        // },
         {
             test: /\.scss$/,
             // loader: 'style!css!sass'