vue编译小程序-mpvue(一)


mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

http://mpvue.com/

mpvue基于vue生成小程序,从微信开放众多组件并自身完善后,开发者便看到H5功能页面互转希望。

一、准备

构建mpvue项目,幸运的是mpvue提供完整流程命令, 打开命令行工具:

# 1. 先检查下 Node.js 是否安装成功
# /
$ node -v
v8.9.0

# /
$ npm -v
5.6.0

# 3. 全局安装 vue-cli
# /
$ npm install --global vue-cli@2.9

# 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文件夹此时你将可以参数真机测试



Cabbagelol将做些什么
负责记录Cabbagelol的总结,或者共享有趣的内容,这就是后院的最重要做的事情⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄。
备案:粤ICP备15107172号-1
邮箱:nickmiku@foxmail.com

Copyright © 2015 - 2017 Cabbagelol. All Rights Reserved. Powered By Wordpress(EverBox).