步骤1：

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

由三部分组成：
<template>：HTML代码
<script>：业务逻辑
<style>：样式

例：
login.vue

<template> <div> <h1>登录</h1> </div> </template> <script> </script> <style> </style> 

步骤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的组件 组件由三部分组成：<template>、<script>和<style>
• 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实例控制的区域即可