创意电子
标题:
一套代码，多端运行——利用Vue3开发兼容多平台的小程序
[打印本页]
作者:
爱分享Coder
时间:
2021-7-12 21:50
标题:
一套代码，多端运行——利用Vue3开发兼容多平台的小程序
介绍
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/cli
taro --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已经能胜任多端开发的任务，感兴趣的小伙伴可以尝试一下！
作者:
飞檐走壁52229292
时间:
2021-7-12 22:41
转发了
作者:
Try石头
时间:
2021-7-12 22:56
转发了
作者:
wenguoqing
时间:
2021-7-12 23:05
转发了
作者:
嘘嘘papi
时间:
2021-7-12 23:21
转发了
作者:
JS数据小白
时间:
2021-7-12 23:29
转发了
作者:
三千七百
时间:
2021-7-12 23:34
看起来比uniapp好一些，不知道能不能发布成app
作者:
大力56584464
时间:
2021-7-12 23:38
转发了
作者:
好男人有点坏丫头
时间:
2021-7-13 06:38
转发了
作者:
货加车
时间:
2021-7-13 07:44
转发了
作者:
一起租
时间:
2021-7-13 08:02
转发了
作者:
阵前一风
时间:
2021-7-13 08:30
转发了
作者:
81146566
时间:
2021-7-13 13:07
转发了
作者:
刘涛520a
时间:
2021-7-14 09:24
难受，不好用
作者:
智尚云科技
时间:
2021-7-15 07:15
好多企业还在用IE怎么兼容？
作者:
linxi74521
时间:
2021-7-15 17:42
转发了
作者:
麦子胖了
时间:
2021-7-18 23:30
转发了
作者:
温金雄3
时间:
2021-7-24 20:23
转发了
作者:
糊糊粉
时间:
2021-9-9 11:54
转发了
作者:
初夏小札
时间:
2021-9-10 09:39
转发了
作者:
博学晚风e
时间:
2021-10-2 15:08
转发了
欢迎光临 创意电子 (https://wxcydz.cc/)
Powered by Discuz! X3.4