Mini-vue-sugar NPM

Vue模板语法转小程序语法

此编译器将vue模板语法转化为小程序模板语法，让你可以用vue模板语法来写小程序，如：v-for 转为 wx:for，@click.stop="handler"转换catchtap="handler" 通过编译并watch项目下所有的.vue文件，在.vue文件同目录下生成小程序所需.js、.wxml、.wxss、.json文件，注意：script里面的js还是要按小程序方式来写，因为并没有引入vue的运行时

为什么要做这个编译器

像mpvue这些框架，加入了vue的运行时，很重，侵入性太强，再者说小程序的逻辑层本身就与vue类似，基本满足开发需要
简单，只做编译，只要会写vue模板就行

用法一，开启一个新项目

npm i mini-vue-sugar -g
sugar i 或者 sugar init // 会生成一个默认叫miniapp小程序项目，也可指定名称 sugar i my-project
cd miniapp

在vue文件里面写模板，js，style，如：

<template>
    <div>
        <span v-for="(list,index) in lists" :key="index">{{list.title}}</span>

        <p v-if="type==1"></p>
        <p v-else-if="type==2"></p>
        <p v-else></p>
        
        <span v-show="isTrue></span>

        <div class="header" :class="{active:isActive}">
            <div>{{username}}</div>
        </div>

        <div :data-name="username" @click="onClick">
            <div>{{password}}</div>
        </div>

        <TestComps @test="onTest">
            <template v-slot>
                <div>我是默认slot</div>
            </template>
            <template #header>
                <div>我是header slot</div>
            </template>
        </TestComps>
    </div>
</template>

<script>
    import TestComps from './test.vue'    // **引入自定义组件，会自动生成json文件的usingComponents配置**
    import TestComps from '/component/test1/test1.vue'

    let app=getApp()
    import utils from '../modules/utils'   // 引入模块js
    
    // **注意js的写法还是按小程序的写法来写，编译器只做模板编译，不改变运行时**，除引入的自定义组件会被用于生成.json文件外，
    // 其他的都不会变
    Compoennt({
        data() {
            return {
            username: "aliarmo",
            password: "123"
            };
        }
    });
</script>

<style>
    .box {
        color: #123123;
        font-size: 12px;
        width: 100px;
        height: 200px;
        margin: 20px;
    }
    .content {
        display: inline-block;
        padding: 12px;
    }
</style>

sugar // 会编译并watch所有.vue文件，最终在.vue的同目录下生成小程序所需的.js、.wxml、.wxss、.json文件

用法二，接入已存在项目

npm i mini-vue-sugar -g
切换到已存在项目目录下，执行 sugar
新建.vue文件，写模板和业务逻辑，一保存你就会发现多出小程序所需的.js、.wxml、.wxss、.json文件

原理

依次读取每个.vue文件，然后解析文件里面的template，script，style
对template，进行指令和事件绑定转化，最后进行元素转化，生成.wxml文件，如果原来有.wxml会覆盖
对script，解析import进来的组件，生成小程序所需的.json配置文件，如果原来有.json，会进行merge，去除import组件的代码，生成.js文件，如果原来有js文件，会覆盖，注意：剩余的script写法还是要按小程序的方式来写，因为并没有引入vue的运行时
对style，直接生成.wxss文件，如果原来有.wxss文件，会覆盖
监测.vue文件变动，重复1-4步骤

不同点

v-bind:class="classObject" // 注意区别，小程序平台认为classObject代表具体类名的字符串
v-bind:style="styleObject" // 注意区别，小程序平台认为styleObject代表具体样式的字符串
.vue文件的script模块要按小程序方式来写，因为并没有引入vue的运行时,组件还是通过import方式引入，编译器会解析引入的组件，然后自动生成.json里面的usingComponents配置