render方法渲染組件和在webpack中導入vue

使用component注冊的組件div容器里可以放多個，但是使用render的只能放一個

<div id="app">
        <p>我可以放兩個</p>
        <login></login>
    </div>
    <script>
       var login = {
           template:'<h1>login的</h1>'
       }
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            components:{
                login
            }
        });
    </script>

<div id="app">
        <p>我顯示不出來的，只能顯示login中的內容</p>
        <p>我也顯示不出來</p>
    </div>
    <script>
        
       var login = {
           template:'<h1>login的</h1>'
       }
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{},
            render:function(createElements){
                return createElements(login)
            }
        });
    </script>

在普通網頁中使用vue：

1. 使用 script 標簽 ，引入 vue 的包
2. 在 index 頁面中，創建 一個 id 為 app div 容器
3. 通過 new Vue 得到一個 vm 的實例

 webpack 中使用 vue :

1. 安裝vue的包： cnpm i vue -S
2. 由於 在 webpack 中，推薦使用 .vue 這個組件模板文件定義組件，所以需要安裝能解析這種文件的 loader cnpm i vue-loader vue-template-complier -D
3. 在 main.js 中，導入 vue 模塊 import Vue from 'vue'
4. 定義一個 .vue 結尾的組件，其中，組件有三部分組成： template script style
5. 使用 import login from './login.vue'導入這個組件
6. 創建 vm 的實例 var vm = new Vue({ el: '#app', render: c => c(login) })
7. 在頁面中創建一個 id 為 app 的 div 元素，作為我們 vm 實例要控制的區域；

 

可以寫node_modules下vue文件的路徑，也可以使用import Vue from 'vue' ，使用第import Vue from 'vue'方法需要在配置文件webpack.config.js里加一個reslove結點，和plugins和module平級，但每次修改都需要重啟。如果沒有配置的話會報如下的錯誤！

 

 

 

在vue中結合render函數渲染指定的組建到容器中

方法一：小例子，可以像平時一樣直接在main.js里面寫vue的代碼，但這種方法只能在導入最全的vue.js路徑下使用。不靈活import Vue from '../node_modules/vue/dist/vue.js'

     

方法二：新建XXX.vue文件，此文件中由<template></template>，<script></script>，<style></style>三部分組成。在main.js里面引用此文件，

1. 導入 login 組件    import login from './login.vue'

2. 默認webpack 無法打包 .vue 文件，需要安裝 相關的loader：     cnpm i vue-loader vue-template-compiler -D

3. 在配置文件中，新增loader配置項 { test:/\.vue$/, use: 'vue-loader' }，注意：這里還需要增加const VueLoaderPlugin = require('vue-loader/lib/plugin')，

  plugins: [ new VueLoaderPlugin() ]
詳情：https://vue-loader.vuejs.org/guide/#manual-setup

 

4.在main.js里面調用

 

 

 可以看到這個Root就是我們new Vue得到的實例，在實例身上掛載了一個login組件

 

 

render:function(createElements){

    return createElements(login)        ------------------->     這一段可以簡寫成render : c => c(login)

  }

export default方法和export的使用方法

可以直接在login.vue里定義組件數據

 

 

  Node 中向外暴露成員的形式：

module.exports = {}

// 在Node中 使用 var 名稱 = require('模塊標識符')
// module.exports 和 exports 來暴露成員

在 ES6中，也通過規范的形式，規定了 ES6 中如何導入和導出模塊

ES6中導入模塊，使用 import 模塊名稱 from '模塊標識符' import '表示路徑'

在 ES6 中，使用 export default 和 export 向外暴露成員：

// 注意： export default 向外暴露的成員，可以使用任意的變量來接收
// 注意： 在一個模塊中，export default 只允許向外暴露1次
// 注意： 在一個模塊中，可以同時使用 export default 和 export 向外暴露成員

// 注意： 使用 export 向外暴露的成員，只能使用 { } 的形式來接收，這種形式，叫做 【按需導出】
// 注意： export 可以向外暴露多個成員， 同時如果某些成員，我們在 import 的時候，不需要，則可以 不在 {} 中定義
// 注意： 使用 export 導出的成員，必須嚴格按照 導出時候的名稱，來使用 {} 按需接收；
// 注意： 使用 export 導出的成員，如果 就想 換個 名稱來接收，可以使用 as 來起別名；

現在新建一個test.js文件演示

 

在main.js中調用