[ 分享 ] 微信小程序与Vue的巧妙碰撞

简介: [ 分享 ] 微信小程序与Vue的巧妙碰撞

mpvue.png

写微信小程序有一段时间了,最近半年来张小龙大大动作频频,对应的公司里小程序业务也多了很多。
写了那么久的小程序,久则生变,恰巧这周美团前端技术团队开源了mpvue,一款基于vue的小程序开发框架,它可以使你写vue一样的写法小程序,也就是说可以在小程序上用上熟悉的vue开发方式,组件化、vuex、条件渲染、事件绑定、 hotReload,
接下来我们一起快速上手体验一番吧!
mpvue 快速上手

// 创建一个基于 mpvue-quickstart 模板的新项目
vue init mpvue/mpvue-quickstart my-project
// 安装依赖,走你
cd my-project
npm install
npm run dev

随着运行成功的回显之后,可以看到本地多了个 dist 目录,这个目录里就是生成的小程序相关代码。

接下来在小程序引入项目目录就可以开始编写小程序了。
1.png
对照 mpvue 完整文档 开始我们mpvue之旅。
使用生命周期:

需要留意的几点:
不支持.png

注意点.png

目录
相关文章
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
535 2
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
985 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
2138 0
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
795 0
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
596 0
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
589 0
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
475 0
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
JavaScript
vue尚品汇商城项目-day06【43.微信支付业务】
vue尚品汇商城项目-day06【43.微信支付业务】
143 0
|
3月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
4月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
198 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记

热门文章

最新文章