【项目复盘-Vue2.0】如何将一个组件封装成一个插件并在项目中使用

一、项目需求

（效果图）

1.要在商品详情页面点击“加入购物车”之后出现，延迟2秒消失；

2.要在购物车页面点击“提交订单”后出现，出现的内容与加购成功显示的内容不一致，延迟2秒消失；

二、分析

两种思路：

1.分别在商品详情页和购物车页面引入Toast组件（会出现重复代码、重复设置）

2.将Toast组件作为全局组件，封装成插件，使其在组件树中的所有子组件的模板中使用；

此处选择第二种思路；

三、实现思路复盘：

注：以下思路源于本人对b站coderwhy老师项目的过程复盘

结构搭建：

封装插件所需：

1.Toast组件（设置好模板内容、样式、方法等）；

2.在Toast文件夹内新建一个index.js，与Toast组件同级；

安装插件所需：

3.在main.js安装插件；

index.js内容：

1.引入Toast组件

2.新建一个空对象

3.给第2步的空对象定义install方法，接收Vue作为参数（注意&