gulp-vue2mini

简单的将vue 转化为小程序代码

使用示例请查看【此处】

使用文档

命令说明

小程序说明

模板说明

打包说明

使用方法

安装

npm i gulp-vue2mini --save-dev

暂不支持 gulp watch

gulpfile.js 使用

var template = require('gulp-vue2mini');

gulp.src('src/**/*.ts')
        .pipe(template('ts'))   // 去除引入的 微信声明文件


gulp.src('src/**/*.{scss,sass}')
        .pipe(template('presass'))
        .pipe(sass())
        .pipe(template('endsass'))   // 解决兼容小程序的 @import 样式
    

gulp.src('src/**/*.{vue,html}')
        .pipe(template('js'))     // 提取 js 部分

gulp.src('src/**/*.{vue,html}')
        .pipe(template('ts'))      // 提取 ts 部分，进行转化

gulp.src('src/**/*.{vue,html}')
        .pipe(template('css'))    // 提取css 部分

gulp.src('src/**/*.{vue,html}')
        .pipe(template('scss'))
        .pipe(template('presass'))
        .pipe(sass())
        .pipe(template('endsass'))   // 提取 sass 部分

gulp.src('src/**/*.{vue,html}')
        .pipe(template('less'))
        .pipe(gulpLess())   // 提取 less 部分

gulp.src('src/**/*.{vue,html}')
        .pipe(template('json'))   // 提取并转化 json 部分

gulp.src('src/**/*.{vue,html}')
        .pipe(template('tpl'))   // 提取 html 代码并转化成 wxml 代码

新增 对 vue 编译，但必须保证源目录为 src 目标目录为 dist

推荐 用下面的方法

await gulp.src('src/test.vue')
    .pipe(template('js'))
    .pipe(gulp.dest('dist/'))
    .pipe(template('css'))
    .pipe(gulp.dest('dist/'))
    .pipe(template('json'))
    .pipe(gulp.dest('dist/'))
    .pipe(template('tpl'))
    .pipe(gulp.dest('dist/'))
    .pipe(template('ts'))
    .pipe(tsProject())
    .pipe(gulp.dest('dist/'))

自带命令

必须全局安装

npm i gulp-vue2mini -g

vue2mini

--watch   监听脚本变动
--mini    编译小程序
--theme   编译模板
--css     转css为scss
--prefix  前缀,css 中的值前缀, 有值则启用var, 默认启用
--help    帮助
--input   源码文件或文件夹，默认为`src`文件夹
--output  编译后保存的文件夹，默认为`dist`
--min     压缩ts和sass 生成的文件代码，仅对模板有效

转化核心

支持 ts sass

支持拆解html js ts sass css 写在一个文件上的情况

sass 支持ttf文件自动转化为 base64

sass 引用模式自动处理

自动转化html 为 wxml, 自动转化 v-if v-for v-else v-show

支持json自动生成，支持 属性合并

注意：span 标签下不能包含其他标签，否则会自动转换为view

标签属性转化列表

属性名 | 目标属性 ---------|---------- v-if | wx:if="{{ }}" v-elseif | wx:elif="{{ }}" v-else | wx:else v-bind:src | src href | url @click | bindtap @click.stop | catchtap v-on:click | bindtap (click) | bindtap @touchstart | bindtouchstart @touchmove | bindtouchmove @touchend | bindtouchend :key | v-show | hidden="{{! }}" v-for | wx:for="{{ }}" wx:for-index=" " wx:for-item="" v-model | value="{{ }}" bind:input=" Changed" 第一个字符为@且值不为空 | bind: 第一个字符为: | ={{ }} 其他包含@ |

支持 对 picker switch slider 执行 v-model 值绑定

支持 :class 数组形式及 {active: true} 形式自动会合并 class

支持 @click 直接赋值及直接传参数 @click="i = 1" 或 @click="tap(i, a)"，直接传参数，最后增加一个为 事件原本的值

定义WxPage WxCommpent WxApp 三个类，增强 setData 的智能提示，

export 是为了避免提示未使用，编译时会自动去除

增加自动添加 Page(new Index()) Commpent(new Index()) App(new Index()) 到末尾

增加json配置生成

@WxJson({
    usingComponents: {
        MenuLargeItem: "/components/MenuLargeItem/index",
        MenuItem: "/components/MenuItem/index"
    },
    navigationBarTitleText: "个人中心",
    navigationBarBackgroundColor: "#05a6b1",
    navigationBarTextStyle: "white"
})

自动合并页面相关的json文件

支持自动合并 methods lifetimes pageLifetimes， 如果已有 属性会自动合并

methods  @WxMethod
lifetimes @WxLifeTime
pageLifetimes @WxPageLifeTime

自定义部件自动合并方法到methods属性中

methods = {
    aa() {

    }
}

@WxMethod()
tapChange(mode: number) {
}

最终生成

methods = {
    tapChange(mode: number) {
    },
    aa() {
        
    }
}

标准模板

index.vue

<template>
    <div>
        
    </div>
</template>
<script lang="ts">
import {
    IMyApp
} from '../../app';

const app = getApp<IMyApp>();

interface IPageData {
    items: number[],
}

export class Index extends WxPage<IPageData> {
    public data: IPageData = {
        items: []
    };

    onLoad() {
        this.setData({
            items: []
        });
    }
}
</script>
<style lang="scss" scoped>

</style>

最终会处理为3个文件

index.wxml

<view></view>

index.wxss

index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var app = getApp();
var Index = (function () {
    function Index() {
        this.data = {
            items: [],
        };
    }
    Index.prototype.onLoad = function () {
        this.setData({
            items: []
        });
    };
    return Index;
}());
Page(new Index());

注意

新增了一些指定的声明请参考

如果 ts 报错太多而中断，可以考虑屏蔽

var plumber = require('gulp-plumber');

.pipe(plumber({
    errorHandler() {
        this.emit('end');
    }
}))