• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

MpVue致力打造H5与小程序的代码共用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
基于 Vue.js 的小程序开发框架
从底层支持 Vue.js 语法和构建工具体系。
使用vue开发小程序

修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中

使用vue语法开发,编译为小程序语法

一套vue程序h5+小程序

Vue组件规范,熟悉vuejs即可开发小程序

比wepy工具对vue语法支持度更高

小程序的缺点

语法和html css不兼容,单独开发
学习成本

MpVue的能力

彻底的Vue组件化开发能力:提高代码复用性

完整的vue开发体验

彻底的Vue组件化开发能力:提高代码复用性

快捷的 webpack 构建机制:开发阶段 hotReload

支持npm安装依赖

使用 Vue.js 命令行工具 vue-cli 快速初始化项目

H5 代码转换编译成小程序目标代码的能力

MpVue入门

# 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@2.9

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

MpVue目录结构与讲解

Vue生命周期+兼容小程序生命周期

Created 创建初始化

有一些vue不支持的就必须结合小程序自带的API
例如 onPullDownRefresh

模板语法

动态style和class 使用计算属性返回字符串

V-if和v-for用法不变

表单v-model全支持

事件处理

bind换成@ 使用vue的绑定语法    

模板

除了动态渲染,别的都支持    (v-html)

.vue单文件组件

小程序自带组件也可以用

自带组件事件绑定也使用vue的,比如@click

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序picker组件中的(普通选择器:mode=selector)发布时间:2022-07-18
下一篇:
微信小程序弹框提示绑定手环实例发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap