webpack和vue使用

最新推荐文章于 2025-08-14 17:31:00 发布

weixin_30349597

最新推荐文章于 2025-08-14 17:31:00 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/feixiangdecainiao/p/11066738.html

本文介绍了Vue中render函数的使用，它与直接使用组件标签形式不同。还详细说明了在Webpack中使用Vue的步骤，包括安装vue包、相关loader，导入vue模板，定义.vue文件，使用render函数渲染等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用入门

    var login = {
      template:'<h1>this is login component</h1>'
    }

使用render函数

      render:function(createElements){//一种方法，调用它会调用指定的模板渲染成HTML
        return createElements(login)
      }

他是Vue实例中的一个属性

和原始的直接使用组件标签的形式不同的是，render会将div中的东西清空将自己放进去，但是使用标签的形式不会，而是直接放在对应的后面

webpack中使用vue

1、首先安装vue

cnpm i vue -D

2、导入vue

import Vue from 'vue'

这种导入功能不完整，只提供运行时候的功能，没有提供web情况的功能，使用下面的形式

直接在webpack.config.js中设置导入包时候的路径

var vm =new Vue({

　　el:'#app',

　　data: {},

})

webpack是无法使用.vue文件需要和之前的一样安装vue相关的loader

cnpm i vue-loader vue-template-compiler -D

配置文件中配置相关的项

{test: /\.vue$/, use: 'vue-loader'}

使用render函数渲染，直接import方式的没有在配置文件中配置alias的只能使用render函数渲染

render函数的终极简写方式

render: c=>c(login)
相当于
render: function(createElements){
     return createElements(login)  
}

总结webpack使用vue函数

1、安装vue包：cnpm i vue -D

2、由于webpack推荐使用.vue组件模板定义组件，所以安装能解析这种文件的loader

cnpm i vue-loader vue-template-compiler -D

3、在mian.js文件中导入vue模板，import Vue from 'vue'

4、定义一个.vue结尾的文件，有三部分组成，

5、使用import导入组件

6、床vm实例，其中使用render函数渲染render: c=>c(login)

7、在页面中创建一个id是app的实例，作为vm实例控制的区域

转载于:https://www.cnblogs.com/feixiangdecainiao/p/11066738.html