在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实例要控制的区域