在 webpack中 Vue 使用组件模板 .vue

1，在webpack中 使用vue这个组件模板文件来定义组件，所以要安装能解析这种文件的 Loader :
cnpm i vue-loader vue-template-compiler -D
2，需要在webpack中新增这个vueLoaderPlugin，Vue Loader 的配置和其它的 loader 不太一样，【重要】需要添加第一步和第二部

3，定义一个 .vue 结尾的组件， 其中组件有三部分构成：template script style，如图

4，在 main.js 文件中导入 vue 和 .vue 组件模板：
import Vue from ‘vue’
import login from ‘./login.vue’
通过.vue 文件引入的组件，则使用render:function(){} 来定义 而不是之前的commpent：{}
如图：