本篇讲述如何将现有的 Vue 模板（template + script + style）以最小的成本拆分成微信的模板（wxml + js + wxss）。
对应关系显而易见，复制粘贴也能实现。但我们如何能够快速的实现这些高频低效的工作呢？
2.1 Vue template ==> WeiXin *.wxml
虽然项目不大，但是当时拆分的 vue组件 比较细致，导致页面很多。挨个的复制、粘贴、全局替换一系列操作下来，就比较耗时间了。所以在一顿搜索之后，仿照网上大佬们的各种版本，最终总结出自己的一个 vueTemplateToWxml 的编译插件，可以将 html 的标签与属性转换成 wxml 中的标签与属性，并且能够在最小的改动成本下，尽可能的还原之前的代码结构。
原理也比较简单：
- 利用
vue-template-compiler插件的parseComponent方法，可以将vue文件的对象结构； - 再将对象中的
template对象的content内容，交给该插件的compile方法去处理，会得到一个CompiledResult对象，其中包含该模板的AST语法树和render函数等信息； - 最终编写我们自己的处理函数，将
AST语法树对象编译成真是的Dom树结构；
编译用的插件代码比较多就不在这粘贴了，会单独写一篇文章介绍。或评论或私聊均可获得源码。
最终的运行效果如下图所示：
2.2 Vue script ==> WeiXin *.js
虽然之前有写过 Vue2 转 微信小程序js 的插件，但现在要转换的项目使用的是 Vue3 的 <script setup> 语法进行编写的，写法上比较简洁，没有像 Vue2 那样在语义上能够明显的区分出 data、props、methods等属性了，所以转换起来比较麻烦。
但好在当时写的代码结构比较清晰，所以我偷了个懒直接选择了直接复制粘贴的形式了。如果后面有兴趣再写一个 Vue3CompileToWxjs 的插件脚本的话，那就再来补充吧。
2.3 Vue style ==> WeiXin *.wxss
因为原本项目使用的是 stylus 预处理器，在写法上是比较粗暴、简洁的，但如果想直接复制到 *.css 文件中使用就比较麻烦了，所以找到了一个 CSS Portal 的网站，里面包含了各种处理 css 的工具。
比如我们就用到了里面的 Stylus to CSS Compiler 编译器，将 stylus 样式代码复制到上面的 Stylus Code 文本框内，点击下面个的 Compile 按钮，即可得到原生的 css 语法。使用方法如下图所示：
这样复制到 *.wxss 文件中就可以使用了，节省了我们大量的高频低效操作。
2.x 总结
到此，一个简单的 *.vue 组件就能够转换为微信所对应的 *.wxml、*.js、*.wxss 文件了，并且样式和事件都相对来说比较完整，已经能够在微信开发者工具中良好的运行起来了。缺失的只是一些动态样式的替换、全局状态管理的维护与引入等问题。再就是一些浏览器的原生API（比如window、document等）在微信环境下是不能用的，需要替换成 微信小程序的API。
系列文章
文章的题目可能还没太确定好，后期会继续进行完善。
