Vue学习之旅Part14：使用render在Webpack中渲染Vue组件

步骤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实例控制的区域即可

---