首页 > Web开发 > 详细

在webpack中封装并渲染vue组件(笔记)

时间:2020-05-04 10:48:21      阅读:81      评论:0      收藏:0      [点我收藏+]

传统的做法可用性不好,不利于团队协作开发。

在模块化开发的前提下,它给我们提供了一种新的使用组件的方式

首先需要在src文件夹里新建一个文件,名为app.vue

技术分享图片

 

 如果我们需要一个组件,就创建一个.vue的文件来封装这个组件(实现了对单独的组件的模块化封装)

这个组件里面有三个根元素template,script,style

技术分享图片

注意:在这里组件的data成员必须是一个函数,还需要有return返回值,而methods仍旧是一个对象。

技术分享图片

 

 接下来导入组件:

强调:"vue-loader": "^15.x.x",版本 用法:

1.首先要在webpack.config,js文件中导入vue-loader的插件,

输入命令:

技术分享图片

在webpack.config.js中引入vue-loader15所依赖的插件
技术分享图片

 2.接下来需要配置webpack插件的节点

技术分享图片

3.配置节点,如果是以.vue结尾的文件,就用vue-loader。

 技术分享图片

以下贴出案例部分代码截图:

技术分享图片

技术分享图片

技术分享图片

 技术分享图片

 

 

 

 

 

在webpack中封装并渲染vue组件(笔记)

原文:https://www.cnblogs.com/mmit/p/12825187.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!