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

1,在webpack中 使用vue这个组件模板文件来定义组件,所以要安装能解析这种文件的 Loader :
cnpm i vue-loader vue-template-compiler -D
2,需要在webpack中新增这个vueLoaderPlugin,Vue Loader 的配置和其它的 loader 不太一样,【重要】需要添加第一步和第二部
在 webpack中 Vue 使用组件模板 .vue
3,定义一个 .vue 结尾的组件, 其中组件有三部分构成:template script style,如图
在 webpack中 Vue 使用组件模板 .vue
4,在 main.js 文件中导入 vue 和 .vue 组件模板:
import Vue from ‘vue’
import login from ‘./login.vue’
通过.vue 文件引入的组件,则使用render:function(){} 来定义 而不是之前的commpent:{}
如图:
在 webpack中 Vue 使用组件模板 .vue