U

Author: bhnddowinf

my-project/build/webpack.base.conf.js

@@ -14,7 +14,8 @@ module.exports = {
     shopping_cart: './src/vuex-demo/shopping-cart/app.js', // shopping_cart
     todomvc: './src/vuex-demo/todomvc/app.js', // todomvc
     mint_ui1: './src/vuex-demo/mint_ui1.js', // mint_ui1.js
-    treeview: './src/vuejs2-demo/treeview/app.js' // treeview.js
+    treeview: './src/vuejs2-demo/treeview/app.js', // treeview.js
+    iscomponent:'./src/vuejs2-demo/is-component/main.js' // iscomponent 
   },
   output: {
     path: config.build.assetsRoot,

my-project/build/webpack.dev.conf.js

@@ -106,7 +106,14 @@ module.exports = merge(baseWebpackConfig, {
       chunks: ['treeview'], //需要引入的chunk，不配置就会引入所有页面的资源
     }),
     // --------多頁    end
-
+    // --------多頁 start
+    new HtmlWebpackPlugin({
+      filename: 'iscomponent.html',
+      template: 'src/vuejs2-demo/is-component/index.html',
+      inject: true,
+      chunks: ['iscomponent'], //需要引入的chunk，不配置就会引入所有页面的资源
+    }),
+    // --------多頁    end
 
   ]
 })

my-project/build/webpack.prod.conf.js

@@ -210,7 +210,20 @@ var webpackConfig = merge(baseWebpackConfig, {
       chunksSortMode: 'dependency'
     }),
     //----------多页 end
-    //
+    //----------多页 start
+    new HtmlWebpackPlugin({
+      filename: '../dist/iscomponent.html',
+      template: 'src/vuejs2-demo/is-component/index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+      },
+      chunks: ['manifest', 'vendor', 'iscomponent'], //需要引入的chunk，不配置就会引入所有页面的资源
+      chunksSortMode: 'dependency'
+    }),
+    //----------多页 end
     //
     //
 

my-project/src/App.vue

@@ -24,7 +24,8 @@
             </ul>
             <h3>第03章：vue.js 2 示例区</h3>
             <ul>
-                <li><a href='treeview.html'>Tree View for Vue-Cli </a></li>
+                <li><a href='treeview.html'>Tree View 递归组件 示例 </a></li>
+                <li><a href='iscomponent.html'>动态组件 使用 is 示例 </a></li>                
             </ul>
         </div>
     </div>

my-project/src/vuejs2-demo/is-component/App.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <h3>is 动态组件</h3>
+        <home></home>
+    </div>
+    
+</template>
+
+<script>
+ import home from './view/Home.vue'
+    export default {
+        data(){
+            return {
+                path: ''
+            }
+        },
+        components: {
+           home
+        },
+        methods:{
+
+        }
+    }
+</script>

my-project/src/vuejs2-demo/is-component/components/a.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+        123
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                msg: 'Welcome to Your Vue.js App'
+            }
+        }
+    }
+</script>

my-project/src/vuejs2-demo/is-component/components/b.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+        456
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                msg: 'Welcome to Your Vue.js App'
+            }
+        }
+    }
+</script>

my-project/src/vuejs2-demo/is-component/components/c.vue

@@ -0,0 +1,15 @@
+<template>
+    <div v-bind:style="{ top: calsss}">
+        789
+    </div>
+</template>
+<script>
+    export default {
+        props: ['calsss'],
+        data () {
+            return {
+                msg: 'Welcome to Your Vue.js App'
+            }
+        }
+    }
+</script>

my-project/src/vuejs2-demo/is-component/components/footer.vue

@@ -0,0 +1,26 @@
+<template>
+  <footer class="page">
+    foter
+  </footer>
+</template>
+<script>
+    export default{
+        data(){
+            return {
+
+            }
+        },
+        props: {
+            isSelect: {
+                type: String,
+            },
+        },
+        methods: {
+            barSelect(flag){
+                this.$router.push({path: flag});
+            },
+        }
+    }
+
+
+</script>

my-project/src/vuejs2-demo/is-component/components/header.vue

@@ -0,0 +1,19 @@
+<template>
+    <header class="header">
+        <a style="color:white">{{dataNumber}}</a>
+    </header>
+</template>
+<script>
+    export default {
+        props: {
+            dataNumber: {
+                type: Number,
+            },
+        },
+        data () {
+            return {
+                msg: 'Welcome to Your Vue.js App'
+            }
+        }
+    }
+</script>

my-project/src/vuejs2-demo/is-component/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Tree View</title>
+  </head>
+  <body>
+    <div id="app"></div>
+
+  </body>
+</html>

my-project/src/vuejs2-demo/is-component/main.js

@@ -0,0 +1,8 @@
+
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

my-project/src/vuejs2-demo/is-component/view/Home.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+
+        <div style="margin-top:60px">
+            <component v-bind:is="currentView1"></component>
+            <component v-bind:is="currentView2"></component>
+            <component v-bind:is="currentView3"></component>
+        </div>
+        <button v-on:click="methods1()">123</button>
+        <button v-on:click="methods2()">213</button>
+        <button v-on:click="methods3()">321</button>        
+
+    </div>
+</template>
+<script>
+
+    import aaa from './../components/a.vue'
+    import bbb from './../components/b.vue'
+    import ccc from './../components/c.vue'
+    export default{
+        components: {
+
+            aaa,
+            bbb,
+            ccc
+        },
+        data(){
+            return {
+                currentView1: 'aaa',
+                currentView2: 'bbb',
+                currentView3: 'ccc'                                
+            }
+        },
+        created(){
+            //this.init();
+        },
+        methods: {
+            init(){
+                var _self = this;              
+            },
+            methods1:function () {
+                console.log('1')
+                this.currentView1= 'aaa'
+                this.currentView2= 'bbb'
+                this.currentView3= 'ccc'                     
+            },
+            methods2:function () {
+                console.log('2')
+                this.currentView1= 'bbb'
+                this.currentView2= 'ccc'
+                this.currentView3= 'aaa'   
+            },
+            methods3:function () {
+                console.log('3')
+                this.currentView1= 'ccc'
+                this.currentView2= 'bbb'
+                this.currentView3= 'aaa'                                                         
+            },
+        },
+        computed: {
+        }
+    }
+</script>