位置: 编程技术 - 正文
实例教学如何写vue插件(教学实例分析怎么写)
编辑：rootadmin推荐整理分享实例教学如何写vue插件(教学实例分析怎么写)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:实例式教学策略,教学实例是什么意思?,教学实例是什么意思?,实例教学如何写评语,实例教学如何写评语,教学实例分析怎么写,实例教学如何写论文,实例教学如何写论文,内容如对您有帮助，希望把文章链接给更多的朋友！
在学习之前，先问问自己，为什么要编写vue的插件。
在一个项目中，尤其是大型项目，有很多部分需要复用，比如加载的loading动画，弹出框。如果一个一个的引用也稍显麻烦，而且在一个vue文件中引用的组件多了，会显得代码臃肿，所以才有了封装vue插件的需求。
说完需求，就来看看具体实现。目前我尝试了两种不一样的插件编写的方法，逐个介绍。
这是我的项目目录，大致的结构解释这样，尽量简单，容易理解。
一个是loading插件，一个是toast插件，不同的地方在于：loading插件是作为组件引入使用，而toast插件是直接添加在挂载点里，通过方法改变状态调用的。
目前使用起来是酱紫的：
toast插件
toast文件下有两个文件，后缀为vue的文件就是这个插件的骨架，js文件一个是将这个骨架放入Vue全局中，并写明操作逻辑。
可以看一下toast.vue的内容：
这里面主要的内容只有两个，决定是否显示的show和显示什么内容的message。
粗看这里，有没有发现什么问题？
这个文件中并没有props属性，也就是无论是show也好，message也好，就没有办法通过父子组件通信的方式进行修改，那他们是怎么正确处理的呢。别急，来看他的配置文件。
index.js:
这里的逻辑大致可以分成这么几步：
创建一个空对象，这个对象就是日后要使用到的插件的名字。此外，这个对象中要有一个install的函数。使用vue的extend方法创建一个插件的构造函数（可以看做创建了一个vue的子类），实例化该子类，之后的所有操作都可以通过这个子类完成。之后再Vue的原型上添加一个共用的方法。
这里需要着重提的是Vue.extend()。举个例子，我们日常使用vue编写组件是这个样子的：
这是全局组件的注册方法，但其实这是一个语法糖，真正的运行过程是这样的：
Vue.extend会返回一个对象，按照大多数资料上提及的，也可以说是返回一个Vue的子类，既然是子类，就没有办法直接通过他使用Vue原型上的方法，所以需要new一个实例出来使用。
在代码里console.log(instance)
得出的是这样的结果：
可以看到$el:div.toast
也就是toast组件模板的根节点。
疑惑的是，我不知道为什么要创建一个空的div节点，并把这个实例挂载在上面。我尝试注释这段代码，但是运行会报错。
查找这个错误的原因，貌似是因为
这里面的instance.$el的问题，那好，我们console下这个看看。WTF！！！！结果居然是undefined。
那接着
和上一张图片比对一下，发现了什么？对，$el消失了，换句话说在我注释了
这句话之后，挂载点也不存在了。接着我试着改了一下这句：
$el又神奇的回来了………………
暂时没有发现这种改动有什么问题，可以和上面一样运行。但无论如何，这也就是说instance实例必须挂载在一个节点上才能进行后续操作。
之后的代码就简单了，无非是在Vue的原型上添加一个改变插件状态的方法。之后导出这个对象。
接下来就是怎么使用的问题了。来看看main.js是怎么写的：
这样就可以在其他vue文件中直接使用了，像这样：
通过在methods中增加一个方法控制写在Vue原型上的$toast对toast组件进行操作。
这样toast组件的编写过程就结束了，可以看到一开始gif图里的效果。
loading插件
经过上一个插件的讲解，这一部分就不会那么细致了，毕竟大多数都没有什么不同，我只指出不一样的地方。
这个就只是一个模板，传入两个父组件的数据控制显示效果。
那再来看一下该插件的配置文件：
这个和taoat的插件相比，简单了很多，依然是一个空对象，里面有一个install方法，然后在全局注册了一个组件。
比较
那介绍了这两种不同的插件编写方法，貌似没有什么不一样啊，真的是这样么？
来看一下完整的main.js和app.vue这两个文件：
可以看出来，loading是显示的写在app.vue模板里的，而toast并没有作为一个组件写入，仅仅是通过一个方法控制显示。
来看一下html结构和vue工具给出的结构：
看出来了么，toast插件没有在挂载点里面，而是独立存在的，也就是说当执行
之后，该插件就是生成好的了，之后的所有操作无非就是显示或者隐藏的问题了。
Vue+Vux项目实践完整代码 提供完整的路由，services`````````````-----------------------------------------------------------------------------------------------------------------------------------------------------------
vue2.x+webpack快速搭建前端项目框架详解 一、本文将分享如何快速搭起基于webpack+vue的前端项目框架，利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置，再通过npm包管理工具引入相应的
vue 添加vux的代码讲解 简介Vux（读音[v'ju:z]，同views）是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-
标签: 教学实例分析怎么写
本文链接地址:https://www.jiuchutong.com/biancheng/378942.html 转载请保留说明！
](https://www.jiuchutong.com/image/20240129/1706499639.jpg)
