爱分享Coder 潜水
  • 1发帖数
  • 1主题数
  • 0关注数
  • 0粉丝
开启左侧

一套代码,多端运行——利用Vue3开发兼容多平台的小程序

[复制链接]
 楼主| 爱分享Coder 发表于 2021-7-12 21:50:32 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
介绍

Vue3发布已经有一段时间了,从目前来看,其生态还算可以,也已经有了各种组件库给予了支持,但是不管是Vue3照旧Vue2都无法直接用来开发小程序,因此国内一些技术团队针对Vue开发了一些多端兼容运行的开发框架,本日来体验一下利用Taro来体验一下利用Vue3开发多平台运行的小程序,以便于兼容各大小程序平台!
<hr>


                               
登录/注册后可看大图


Taro

Taro是一个由多个团队一起维护的开放式跨端跨框架办理方案,支持利用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 付出宝 / 字节跳动 / QQ 小程序 / H5 / RN 等应用
https://github.com/nervjs/taro
目前支持以下平台的转换



                               
登录/注册后可看大图



开发体验

首先我们安装Taro 3脚手架,以便于我们进行初始化项目
# 利用 npm(或cnpm) 安装 CLInpm install -g @tarojs/cli#或者利用 yarn 安装 CLIyarn global add @tarojs/clitaro --version查看版本

                               
登录/注册后可看大图



如果利用yarn安装后未出现版本信息,则利用 yarn global bin查看yarn包目录,将之添加到环境变量即可,然后再利用taro --version查看版本号,当前是Taro v3.3.0
然后利用taro cli初始化一个vue3版本的项目:taro init



                               
登录/注册后可看大图



自己选择合适的选项,然后等待安装依赖,大概必要稍等一会:

                               
登录/注册后可看大图

安装完成,这时候就可以打开项目了,我们利用VSCode进行代码编写

                               
登录/注册后可看大图

这里我们利用字节跳动的小程序为例:



                               
登录/注册后可看大图

熟悉的CompositionAPI,这里我们利用yarn dev:tt(其余平台类似)进行编译,然后将dist目录导入到开发者工具进行预览测试



                               
登录/注册后可看大图




                               
登录/注册后可看大图

这里我们项目默认利用了NutUI,像Vue3一样开发组件,仅仅测试利用
  主要按钮  信息按钮  默认按钮  危险按钮  警告按钮  成功按钮和Vue3一样的写法,引入组件:

                               
登录/注册后可看大图

渲染结果

                               
登录/注册后可看大图



总结

Vue3结合Taro让熟悉Vue3 的开发者们更加容易开发小程序,虽然还有一些问题尚待办理,但是大部分情况下,Taro已经能胜任多端开发的任务,感兴趣的小伙伴可以尝试一下!

精彩评论20

飞檐走壁52229292 发表于 2021-7-12 22:41:31 | 显示全部楼层
转发了
Try石头 发表于 2021-7-12 22:56:39 | 显示全部楼层
转发了
wenguoqing 发表于 2021-7-12 23:05:19 | 显示全部楼层
转发了
嘘嘘papi 发表于 2021-7-12 23:21:38 | 显示全部楼层
转发了
JS数据小白 发表于 2021-7-12 23:29:03 | 显示全部楼层
转发了
三千七百 发表于 2021-7-12 23:34:23 | 显示全部楼层
看起来比uniapp好一些,不知道能不能发布成app
大力56584464 发表于 2021-7-12 23:38:21 | 显示全部楼层
转发了
好男人有点坏丫头 发表于 2021-7-13 06:38:25 | 显示全部楼层
转发了
货加车 发表于 2021-7-13 07:44:48 | 显示全部楼层
转发了
猜你喜欢
在线客服邮箱
wxcy#wkgb.net

邮箱地址#换为@

Powered by 创意电子 ©2018-现在 专注资源实战分享源码下载站联盟商城