wxmini-to-vue

微信小程序页面（组件）转vue组件

Usage no npm install needed!

<script type="module">
  import wxminiToVue from 'https://cdn.skypack.dev/wxmini-to-vue';
</script>

README

小程序页面（组件）转Vue组件

☄️一个微信小程序页面组件转为Vue组件的库

GitHub code size in bytes GitHub issues GitHub GitHub package.json version

🤪 Installing

$ npm install wxmini-to-vue

🤔 Example

const path = require('path')
// 导入 wxmini-to-vue
const WTV = require('wxmini-to-vue')
// 实例化
const wtv = new WTV()
// 入口路径
const entryPath = path.resolve(__dirname, './path')
// 存放位置
const outputPath = path.resolve(__dirname, './o/path')
// 执行转换
wtv.transform(entryPath, outputPath)

// 执行完成后会在 [outputPath] 中存放

Api

wtv.transform(entryPath, outputPath)

// 入口路径
const entryPath = path.resolve(__dirname, './path')
// 存放位置
const outputPath = path.resolve(__dirname, './o/path')
// 执行转换
wtv.transform(entryPath, outputPath)

🥳 Introduce

小程序js -> script

babel code to ast

1. 将wxApi替换成 一些自定义的方式
    例如：
    wx.showToast => this.$toast
    wx.getStorageSync => this.$store2
    wx.setStorageSync => this.$store2

2. ..其他处理 暂不细说

小程序wxml -> template

使用 htmlparser2 将code 转换成 ast

1. 标签转换
2. 模版转换

小程序wxss -> style

使用 csstree 将code 转换成 ast

1. 标签转换
2. 单位转换