社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
档传送门:官方文档说明
先来看一下,知乎的大佬们对mpvue的看法………….
mpvue
(github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js
核心,mpvue
修改了 Vue.js
的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js
开发体验。
使用 mpvue
开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:
Vue.js
开发体验Vuex
数据管理方案:方便构建复杂应用webpack
构建机制:自定义构建策略、开发阶段 hotReloadVue.js
命令行工具 vue-cli 快速初始化项目其它特性正在等着你去探索,详细文档。
mpvue
作为小程序版本的 Vue.js
,在框架 SDK 之外,完整的技术体系还包括如下设施。
● 将小程序页面编写为 Vue.js 实现
● 以 Vue.js 开发规范实现父子组件关联
小程序代码
● 以小程序开发规范编写视图层模板
● 配置生命周期函数,关联数据更新调用
● 将 Vue.js 数据映射为小程序数据模型
并在此基础上,附加如下机制
● Vue.js 实例与小程序 Page 实例建立关联
● 小程序和 Vue.js 生命周期建立映射关系,能在小程序生命周期中触发 Vue.js 生命周期
● 小程序事件建立代理机制,在事件代理函数中触发与之对应的 Vue.js 组件事件响应
本文假设你既不会 vue 也不会小程序,如嫌拖沓,请直接快进跳读。
现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装。
然后打开命令行工具:
# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0
$ npm -v
5.6.0
# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/
# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli
# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
随着运行成功的回显之后,可以看到本地多了个 dist
目录,这个目录里就是生成的小程序相关代码。
这一步比较简单,按照提示一步步安装好就行,然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。
选择 小程序项目
并依次填好需要的信息:
如图:
点击“确定”按钮后会跳到正式的开发页面,点击“编辑器”按钮,关闭自带的小程序编辑器。然后如图:
此时,整个 mpvue
项目已经跑起来了。
用自己趁手的编辑器(或者IDE)打开 my-project
中的 src
目录下的代码试试,如示例:
到此,上手完毕。
npm run dev
来进行编译如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!