步骤1：

在src下创建一个名为后缀名为vue的文件
该文件在Webpack中是纯粹的Vue组件

由三部分组成：
：HTML代码
：业务逻辑
：样式

例：
login.vue

登录

步骤2：

在webpack中若想通过vue将一个组件放到页面中展示 可通过Vue实例中的render属性实现

main.js：

导入login组件的模板对象： import login from "./login.vue" 创建Vue实例用render属性设置组件： var vm=new Vue({ el:"#app", data:{ msg:"asdsad" }, render:function(createElements) { return createElements(login) } })

用箭头函数简写：render:create=>create(login)(该处create为形参 非固定 可任意取)

var vm=new Vue({ el:"#app", data:{ msg:"asdsad" }, render:create=>create(login) }) 步骤3：

默认的webpack是无法打包.vue文件的
因此 需安装第三方相关loader来解析：输入cnpm i vue-loader vue-template-compiler -D
安装vue-loader 其内部依赖于vue-template-compiler

注入VueLoader插件：const { VueLoaderPlugin } = require("vue-loader");
创建一个VueLoader插件：new VueLoaderPlugin()
然后在配置文件中新增配置对象规则：{test:/\.vue$/,use:"vue-loader"}

var path=require("path") const { VueLoaderPlugin } = require("vue-loader"); module.exports={ entry:path.join(__dirname,"./src/main.js"), output:{ path:path.join(__dirname,"./dist"), filename:"bundle.js" }, // 插件 plugins:[ new VueLoaderPlugin() ], // 配置第三方loader模块 module:{ rules:[ {test:/\.vue$/,use:"vue-loader"} // 处理.vue文件的loader ] } } 总结：

若在webpack中使用vue组件 需经过如下步骤：

1、安装vue的包：cmpn i vue -S 2、在webpack中推荐使用.vue该组件模板文件来定义组件 需要安装相应的能解析vue的loader：cnpm i vue-loader vue-template-compiler -D 3、在webpack.config.js中配置vue-loader：
const { VueLoaderPlugin } = require(“vue-loader”)
new VueLoaderPlugin()
{test:/.vue$/,use:“vue-loader”} 4、在main.js中导入vue模块：import Vue from "vue" 5、定义后缀名为.vue的组件 组件由三部分组成：、和 6、在main.js中使用import导入该组件：import login from "./login.vue" 7、创建Vue实例：var vm=new Vue({el:"#app",render:create=>create(login)}) 8、最后 在页面中创建id为app的div元素 作为Vue实例控制的区域即可 Piconjo_Official 原创文章 228获赞 33访问量 168万+ 关注 私信 展开阅读全文
作者：Piconjo_Official

VUE part webpack