本篇为系列文章的第一篇。讲述如何把现有的 Vue3 项目以最低的成本迁移到微信小程序插件内（后来发现成本并不低）
注：是微信小程序插件，不是微信小程序。如果有不太明白的同学，可以看官方对于 插件 的介绍。
非正规. 引言
先说一下为什么非要蹚这滩浑水 ~ （下面是与产品经理的一段友好会晤）
- 🐵 产品：我们要做一个插件给微信小程序用。
- 👨💻 我：插件？不是微信小程序？好吧，我了解一下吧...
- 👨💻 我：Emmm，既然做小程序了，那是否考虑支付宝小程序？抖音小程序？等等？
- 🐵 产品：暂时不考虑，但后期也不是没有可能
- 👨💻 我：啊这？（...文明用语...）知道了
我司现有一个 智能在线客服访客端 的项目，是基于 Vue3 + Vuex + Typescript + stylus 的，已开发 8 个多月迭代至 V3.3 版本。客户仅需在自己网站的 script 标签中嵌入我们的 SDK 代码，即可为自己的网站提供我司的智能在线客服服务，并且已经支持 pc 端和 h5 端。由于上层要求，某大客户想要将其在自己的小程序内使用，并且明令拒绝使用 webview 嵌入的方式（在后期的尝试中刚好发现，小程序插件根本就不支持使用 webview 标签）。
于是，我被迫走上了这条不归路...
壹。 各种尝试
因为我们已经有了现有的 Vue3 项目，而且市场上已经有那么多可以把 vue 项目转化为小程序的编译框架，所以我们初期探索的思路很明确：使用市场上现有的小程序编译框架将现有的 Vue3 项目以最小的修改成本转换为微信小程序的代码。于是开始我们的探索之旅。
在每一小节后面用
×和√已经表明哪种方式是可以正常初始化项目的，不想看中间爬坑内容的朋友，可以只看本章 1.1 小节即可。
1.1 官方提供的原生小程序插件Demo（√）
在我们进行各框架采坑之前，我们首先要确保一下 小程序插件 这个东西真实是存在并且现在还是可用的。于是我们去微信公众平台官网找到了开发插件的章节，下载了一个所谓可以直接在微信开发者工具中查看的完整插件示例。在微信开发者工具中打开，如下图所示：
可以发现目录结构跟普通小程序是有一些差异的。
miniprogram文件夹：这里面就是普通的微信小程序代码，是用来引入插件并对插件进行测试的（当你上传插件时，审核者会通过这个Demo去审核你插件的功能，所以尽可能完善你的测试页）。plugin文件夹：所有插件的内容都放在了这里面，除了pages、components、index.js等基础文件以外，多出了一个plugin.json文件，这里面放的就是你要导出的公共组件、页面、以及你插件的入口。project.config.json文件：该文件的内容同正常小程序的配置文件，就是你插件的配置信息。但有一点区别是，里面多了一个"compileType": "plugin"的字段，表明你这个小程序当前是插件模式。
在经过一番尝试之后，基本上已经确定了插件的目录结构与各自功能。只要把你的普通小程序代码，放到 plugin 文件夹下，能够正常的运行起来，并且导出你相应的事件、页面与组件，就完成了小程序插件的开发。
所以，我们接下来的任务就是：如何把现有的 Vue3 项目，转换为 普通小程序 的语法，并且放到 plugin 文件夹内能正常跑起来。
1.2 Uni-App 框架（×）
明确了目标，经过初步考虑之后，我们决定使用 DCloud 提供的 Uni-App 框架进行转换。即可以使用 Vue.js 的语法，又能同时编译成 H5、App 和 小程序 等多端平台。而且还有 那(不) 么(算) 庞 大 的插件市场，应该也能对后期的开发提供一些帮助。（简直是不要太符合需求）于是，就开始了...
根据文档中的 创建 uni-app 项目 步骤初始化，并启动项目，在微信开发者工具中 完美运行。
于是将此项目发布为 微信小程序，将打包后的代码全部复制到 plugin 目录下，完美报错！
(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["pages/index/index"]{......},[["df45","common/runtime","common/vendor"]]]);
Emmm...
可能是通过 HBuilderX 创建的项目有问题，那我们通过命令行创建 Uni-App 项目：
vue create -p dcloudio/uni-preset-vue#vue3 vue3_uni_app
同样，在微信开发者工具中完美运行，但将代码复制到 plugin 文件夹中，完美报错！
弃之。
1.3 Taro 框架（×）
后来了解到 tarojs/cli 脚手架可以初始化一个微信小程序插件的模板，于是按照官网给出的 安装与使用 安装了脚手架，并根据官网给出的 小程序插件开发 指南初始化了 vue3 + typescript + stylus 的插件项目。（简直不要太完美~）
发现项目的目录与 1.1 中官网下载的目录结构很相似，也有 plugin 文件夹
├── config 配置目录
├── src 源码目录
| ├── pages 调试页面目录，用于调试插件
| | └── index
| ├── plugin 插件目录
| | ├── doc 插件文档目录
| | ├── components 组件插件目录
| | ├── pages 页面插件目录
| | ├── index.js 接口插件文件
| | └── plugin.json 插件配置文件
| ├── app.css 项目总通用样式
| └── app.js 项目入口文件
└── package.json
└── package.config.json
通过明令完美的编译项目。
taro build --plugin weapp --watch
用微信开发者工具打开编译后的 ../root/dist/ 目录，完美报错！
(wx["webpackJsonp"]=wx["webpackJsonp"]||[]).push([[7]{......}Page(Object(o["createPageConfig"])(w,"pages/index/index",{root:{cn:[]}},j||{}))}},[[40,0,1,2]]]);
并尝试只将该 taro 项目打包后的 plugin 文件夹的内容，复制到官网下载的插件项目的 plugin 文件夹下，同样，完美报错！
弃之。
注：使用
tarojs/cli创建的react模板的插件项目是可以跑起来的，但后期开发的坑也贼多，比如各种taro及微信原生的api找不到、修改render就报错、插件安装或使用报错等等，如果有兴趣的可以去尝试，由于跟我的技术栈不匹配，在此就不多赘述了。
1.4 mp-vue 框架（×）
根据 mpvue 官网给出的 使用手册 安装脚手架并初始化了项目，编译后没有报错，将编译后的代码复制到 plugin 文件夹中，同样，完美报错！
弃之。
1.5 WePY（×）
同样，根据官网给出的 安装步骤 安装脚手架并初始化了项目，编译后没有报错，将编译后的代码复制到 plugin 文件夹中，同样，完美报错！
弃之。
总结
最终，我们 无奈 选择 微信公众平台官网 给出的 插件Demo，并使用微信原生语法进行开发。
一篇踩坑教程到此结束~
谢谢大家~
拜~
系列文章
除了第一篇文章，其他的题目可能还没想好，后期会继续进行完善
