webpack与vue的结合使用（二）—— 在vue中结合render函数渲染指定的组件

默认webpack无法打包 .vue 文件，需要安装相关的loader

cnpm i vue-loader vue-template-compiler -D

在webpack配置文件中，新增loader配置项

 {test：/\.vue$/,use:'vue-loader'}

在webpack中，如果想要通过vue,把一个组件放到页面中去展示，vm实例中的render函数可以实现

简写方式如下 

总结梳理：webpack 中如何使用vue

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导入这个组件

6. 创建vm的实例

var vm = new Vue({el:'#app',render:c=>c(login)})

7. 在页面中创建一个id 为app的div元素，作为我们vm实例要控制的区域