webpack中使用Vue结合render函数渲染指定的组件

步骤：

1. 安装 vue 的包：cnpm i vue -S
2. 由于在webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件 的 loader cnpm i vue-loader vue-template-compiler -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实例 要控制的区域

main.js 文件中的代码

// 注意：在 webpack 中，使用 import Vue from 'vue'; 导入的Vue构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样引用的使用方式
import Vue from 'vue';

// 1. 导入 login 组件 
import login from './login.vue'

var vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    // render: function (createElements) { //在 webpack 中，如果想要通过 vue ，把一个组件
    //     // 放到页面中去展示，vm 实例中的 render 函数可以实现
    //     return createElements(login)
    // }
    
    // render 函数简写

    // 不要大括号，直接返回，可以省略 return 
    render: c => c(login)
})

login.vue 文件中的代码

<template>
 <div>
    <h1>这是登录组件，使用 .vue 文件定义出来的</h1>
 </div>
</template>

<script>

</script>

<style>

</style>

处理 .vue 文件的第三方loader 安装与配置

在上一篇 vue-loader@15.x VueLoaderPlugin中有详细配置

---

注意：
render 函数 会把 el 指定的容器中的内容，全部清空覆盖！！！！！！！！！！！