在Vue中結合render函數渲染指定組件

一、在網頁中如何使用Vue

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

二、在webpack中嘗試使用Vue

注意：在webpack中，使用import Vue from 'vue'導入的Vue構造函數功能不完整，只是提供了runtime-only的方式，並沒有提供像網頁中那樣的使用方式

import Vue from '../node_modules/vue/dist/vue.js'

三、包的查找規則

1. 找 項目跟目錄中有沒有node_modules的文件夾
2. 在node_modules中根據包名，找對應的vue文件夾
3. 在vue文件夾中，找package.json的包配置文件
4. 在package.json文件中，查找一個main屬性（main屬性指定了這個包在被加載時候的入口文件）

 

三、總結

1,安裝vue的包 cnpm i vue -s

2,由於在webpack中，推薦使用.vue這個組件模板文件定義組件，所以需要安裝能解析這種文件的loader cnpm i vue-loader vue-templater -D

3,在main.js中導入vue模板 import Vue from 'vue'

4，定義一個.vue結尾的組件，其中組件由三部分組成

<template>
    <div>
        <h1>這是登錄組件</h1>
    </div>
</template>

<script>

</script>

<style>

</style>

5,在main.js中使用import導入這個組件 import login from './login.vue'

6,創建vm實例 var vm = Vue({el: 'app', render: c => c(login)})

注意：render 會把 el 指定的容器中所有的內容都清空覆蓋

    import login from './login.vue'
    //默認webpack無法解析.vue文件，需要安裝相關的loader
    //cnpm i vue-loader vue-templater -D
    //在配置文件中，新增loader配置項
    
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        //3,在webpack中 如果想要通過vue 把一個組件放到頁面中取展示，vm示例中的render函數可以實現
        // render: function (createEle) {
        //     return createEle(login)
        // }
        // render: f => {
        //     return f(login)
        // }

        // render: f => return f(login)

        render: f => f(login)
    })

7,在index.html頁面中創建一個id為app的div元素，作為我們的vm實例要控制的區域