一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

介绍

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


一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)


Taro

Taro是一个由多个团队一起维护的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 / RN 等应用

https://github.com/nervjs/taro

目前支持以下平台的转换

一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

开发体验

首先我们安装Taro 3脚手架,以便于我们进行初始化项目

# 使用 npm(或cnpm) 安装 CLInpm install -g @tarojs/cli#或者使用 yarn 安装 CLIyarn global add @tarojs/cli

taro –version查看版本

一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

如果使用yarn安装后未出现版本信息,则使用 yarn global bin查看yarn包目录,将之添加到环境变量即可,然后再使用taro –version查看版本号,当前是Taro v3.3.0

然后使用taro cli初始化一个vue3版本的项目:taro init

一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

自己选择合适的选项,然后等待安装依赖,可能需要稍等一会:

一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

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

一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

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

一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

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

一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

这里我们项目默认使用了NutUI,像Vue3一样开发组件,仅仅测试使用

<template> <nut-button type="primary">主要按钮</nut-button> <nut-button type="info">信息按钮</nut-button> <nut-button type="default">默认按钮</nut-button> <nut-button type="danger">危险按钮</nut-button> <nut-button type="warning">警告按钮</nut-button> <nut-button type="success">成功按钮</nut-button></template><script lang="ts">import { defineComponent } from "vue";import { Button } from "@nutui/nutui-taro";export default defineComponent({ name: "Button", components: { Button }, setup() { return {}; },});</script><style lang="sass"></style>

和Vue3一样的写法,引入组件:

一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

渲染效果

一套代码,多端运行——使用Vue3开发兼容多平台的小程序(vue 多应用)

总结

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年4月29日 上午9:42
下一篇 2023年4月29日 上午9:52

相关推荐

  • 投资项目管理系统规划

    投资项目管理系统规划 投资项目管理系统是一种重要的管理工具,可以帮助企业或政府组织对投资项目进行有效的管理和监督。一个好的投资项目管理系统可以提高项目的效率,降低风险,提高效益。本…

    科研百科 2024年12月16日
    0
  • 《医院巡查工作管理办法(试行)》发布(附解读)(医院巡查制度)

    关于印发《医院巡查工作管理办法(试行)》的通知 各省、自治区、直辖市及新疆生产建设兵团卫生健康委、中医药局、疾控局: 为全面贯彻党的二十大精神和习近平总书记在二十届中央纪委第二次全…

    科研百科 2024年1月24日
    88
  • 驻村工作队经费管理办法

    驻村工作队经费管理办法 为规范驻村工作队的经费管理,提高驻村工作队的工作效率和质量,确保驻村工作队能够更好地服务于农村基层,根据《中华人民共和国预算法》和《驻村工作队管理办法》等相…

    科研百科 2024年7月12日
    108
  • 国自然一直显示已审核

    国自然一直显示已审核,这是一个让人困扰的问题。有些人可能会认为这是国自然系统在检测他们的论文是否原创,但实际情况并非如此。实际上,国自然一直显示已审核,这是一个非常常见的问题,并且…

    科研百科 2024年11月15日
    1
  • 重庆市涪陵区今年上半年畜牧业发展迅速

       重庆市涪陵区南沱镇狠抓畜牧工作,今年1~6月全镇畜牧业发展迅速,共出栏生猪26989头、牛羊376头、家禽168629只,同比增长均超过10%,在发展的同时有狠抓动…

    科研百科 2022年5月26日
    343
  • 高频项目管理系统

    高频项目管理系统 随着金融市场的不断发展,高频交易已经成为了金融市场中不可或缺的一部分。高频交易是指在短时间内进行大量交易,通常需要使用高度自动化和高效的系统来进行。因此,建立一个…

    科研百科 2024年12月15日
    0
  • 内蒙古科技进步奖申报时间

    内蒙古科技进步奖申报时间:2023年2月28日 近年来,随着内蒙古经济的发展和科技创新的不断推进,科学技术对于内蒙古的发展起着越来越重要的作用。为了推动内蒙古科技创新的发展,提高内…

    科研百科 2024年9月30日
    17
  • 计算机系统集成项目管理师

    计算机系统集成项目管理师 计算机系统集成项目管理师是指在计算机系统集成领域的项目管理师,负责协调、监督和管理计算机系统集成项目的过程,确保项目按时、按质、按量完成。作为一个专业的项…

    科研百科 2024年9月24日
    21
  • 五部哈佛商学院推荐的电影 商务人士必看经典(哈佛商学院推荐10部电影)

    甜心先生 杰里待人和善,仪表不凡,是个出色的体育界经纪人。也许连天都妒忌这个完美的男人,决定给他一个打击,杰里因为一篇流畅出色的发言稿而招来上司不满,导致被炒鱿鱼。漂亮女友离他而去…

    科研百科 2022年8月12日
    268
  • 四类以上科研项目

    科研项目是推动科技进步的重要力量,四类以上科研项目是推动科技进步的重要力量。这些项目涉及多个学科领域,旨在解决现实世界中的各种问题。本文将介绍四类以上科研项目的特点和重要性。 四类…

    科研百科 2024年10月1日
    21