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
--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
import {
IMyApp
} from '../../app';
const app = getApp();
interface IPageData {
items: number[],
}
export class Index extends WxPage {
public data: IPageData = {
items: []
};
onLoad() {
this.setData({
items: []
});
}
}
最终会处理为3个文件
index.wxml
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');
}
}))
