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

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

介绍

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


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

Taro

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

https://github.com/nervjs/taro

目前支持以下平台的转换

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

开发体验

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

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

taro –version查看版本

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

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

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

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

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

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

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

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

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

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

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

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

这里我们项目默认使用了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开发兼容多平台的小程序

渲染效果

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

总结

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

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.net/share/25038.html

发表评论

登录后才能评论