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实例控制的区域即可
————————————————
版权声明:本文为CSDN博主「Piconjo_Official」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Piconjo/article/details/105790335

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值