一套代码,多端运行——使用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年11月6日
    0
  • 完善劳动合同管理

    完善劳动合同管理是维护劳动者权益、保障企业合法合规的重要措施之一。随着就业市场的不断发展和变化,劳动合同管理也需要不断地完善和优化,以适应市场的需求。 完善劳动合同管理可以提高劳动…

    科研百科 2024年8月13日
    55
  • 项目管理之采购管理(项目管理之采购管理是什么)

    前言 本文分别从采购计划的编制、策略的把握好项目采购的时机和方式、规范采购管理、项目采购的外包管理等几个方面探讨项目的采购管理。 采购计划的编制 “凡事预则立,不预则废”,项目采购…

    科研百科 2023年8月6日
    166
  • 5S,6S,7S,8S,9S……14S,企业到底要做几个S?「标杆精益」

    全文总计2501字,需阅读7分钟,以下为正文: 导读: 5S关乎企业的各个领域,阳春三月不约而同在传播与推广5S。企业需要5S,员工需要5S。我们也给企业开展5S培训与咨询,大家在…

    2022年9月12日
    736
  • 国家电网公司科技部(国家电网部级科研项目是什么)

    国家电网部级科研项目: 电力物联网关键技术研究与应用 随着互联网技术的快速发展,电力物联网技术也逐渐成为电力行业的重要发展方向。电力物联网技术将电力网络与互联网相结合,实现对电力设…

    科研百科 2024年8月1日
    73
  • 四川广元市利州区把肉牛羊产业作为精准扶贫主导产业

      利州区按照投资少、见效快、污染轻、能致富、小规模、大群体的原则,把肉牛产业作为贫困村贫困户增收的重要渠道,鼓励有养殖技术和有养殖意愿的贫困户直接参与肉羊牛养殖。重点支持宝轮苏家…

    科研百科 2022年5月25日
    324
  • 兰州协同办公系统

    兰州协同办公系统: 数字化时代下的办公解决方案 随着数字化时代的到来,企业办公方式也在不断地变革。兰协同办公系统作为一款基于云计算和人工智能技术的办公解决方案,为兰州地区的企业提供…

    科研百科 2024年8月23日
    31
  • 商业银行客户关系管理的业务流程建设(银行的客户关系管理办法)

    1.需要商业银行领导层的高度重视与支持。商业银行营销客户关系管理系统的实施实质上是一种观念的更新和新的管理方法的应用,只有领导层的重视与支持,员工才有可能改变原来的思维方式和行为方…

    科研百科 2022年12月4日
    228
  • 协同办公系统手机端(协同办公系统 oa)

    协同办公系统(Office Automation,简称oa)是一种现代化的办公软件,可以帮助企业或组织实现更高效的工作流程和更好的协作能力。本文将介绍协同办公系统的重要性以及如何选…

    科研百科 2024年6月4日
    70
  • 办公室项目管理

    办公室项目管理:一个高效团队的关键 在现代社会,办公室项目管理已经成为了一个高效团队的关键要素。一个好的办公室项目管理不仅可以提高团队的工作效率,还可以提高团队的绩效和成果。本文将…

    科研百科 2024年7月27日
    38