http://mpvue.com/
mpvue
(github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架。框架基于Vue.js
核心,mpvue
修改了Vue.js
的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js
开发体验。
mpvue基于vue生成小程序,从微信开放众多组件并自身完善后,开发者便看到H5功能页面互转希望。
一、准备
构建mpvue项目,幸运的是mpvue提供完整流程命令, 打开命令行工具:
# 1. 先检查下 Node.js 是否安装成功
# /
$ node -v
v8.9.0
# /
$ npm -v
5.6.0
# 3. 全局安装 vue-cli
# /
$ npm install --global [email protected]
# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# /
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安装依赖
$ cd my-project
# my-project/
$ npm install
$ npm run dev
创建成功后,打开微信开发者工具(遇到项目导入以及配置问题请参考微信公众平台小程序帮助文档)导入,这时你将看到mpvue所运行的程序。
二、打包生成小程序
建构流程是整个项目最核心的地方之一,通过我们所熟知的 webpack,完成了 template 转换为 wxml 和 样式转换优化以及其他的若干代码的拼接压缩混淆等操作,最终使之可以运行在微信小程序的环境中。
http://mpvue.com/build/
为编译为小程序,在项目根目录安装依赖:
# my-project/
npm i mpvue-template-compiler mpvue-loader mpvue-webpack-target postcss-mpvue-wxss webpack-dev-middleware-hard-disk -S-D
# my-project/
// 打包
npm run build
在执行npm run build后根目录出现dist文件夹,里面便是小程序项目,现在打开微信开发者工具,再次导入dlst文件夹此时你将可以参数真机测试