前端开发框架“taro”从入门到爆哭--介绍与安装篇

我是火山呀

已于 2023-12-23 10:05:47 修改

阅读量2.3k

点赞数 39

分类专栏：前端开发文章标签： taro 前端 typescript npm yarn 前端框架

于 2023-12-21 10:29:08 首次发布

本文链接：https://blog.csdn.net/qq_43491495/article/details/135114214

版权

前端开发专栏收录该内容

9 篇文章 1 订阅

订阅专栏

前言

Taro的优缺点

开发Taro配置环境

前言

Taro（泰罗）是一款由京东凹凸实验室（是我想的奥特曼实验室创造了泰罗奥特曼吗？我的童年回来了？！）开发的多端统一开发框架，目前支持微信小程序、百度智能小程序、支付宝小程序、字节跳动小程序、快应用、H5等多个平台。Taro的目标是通过一套代码，实现在不同平台上的统一开发和运行。

Taro的优缺点

Taro的优点：

开发效率高：Taro使用统一的代码结构和开发方式，可以快速开发多个平台的应用，减少了开发者的学习成本和重复劳动。并且社区活跃，有较多的三方库支持。
跨平台兼容性好：Taro能够将代码编译成不同平台所支持的语法，保证了在不同平台上的兼容性和稳定性。
性能优化：Taro在编译过程中会将代码进行优化，减少文件大小和加载时间，提升应用的性能。

Taro的缺点：

学习曲线较陡：对于初学者来说，由于Taro涉及到多个平台的开发，需要学习和理解不同平台的开发方式和规范，相对来说比较复杂。（比如说我从原生转过来的，需要学习ts，react，taro的知识，并且taro和react还有ts的构建界面的方式不太一致，容易混乱。）
功能局限性：由于Taro需要兼容多个平台，可能会受到某些平台的限制，导致部分功能无法实现或效果不如原生开发。

开发Taro配置环境

Node.js 和 npm：
- Taro 是基于 Node.js 平台的，因此首先需要安装 Node.js。你可以从 Node.js 官方网站下载并安装最新版本。mac上也可以使用brew来安装node。
- npm 是 Node.js 的包管理工具，它随同 Node.js 一同安装。你可以使用 npm 来安装 TypeScript 和 Taro 项目的依赖。具体使用技巧可参考：npm使用详解（好吧好吧是粗解）
安装 TypeScript：
- TypeScript 是 Taro 使用的编程语言。可以使用以下命令全局安装 TypeScript：
```
npm install -g typescript
```
安装 Yarn（推荐）：
- Yarn 是替代 npm 的包管理工具，用于更快、可靠地管理依赖。可以从 Yarn 官方网站下载并安装 Yarn。
Taro CLI（命令行工具）：
- Taro 提供了命令行工具（CLI），用于创建和管理 Taro 项目。安装 Taro CLI 的方法是通过 npm 或 Yarn，可以使用以下命令安装：
```
# 使用 npm 
npm install -g @tarojs/cli 
# 或使用 Yarn 
yarn global add @tarojs/cli

#安装完成后，可通过下列代码查看taro版本信息和当前版本
npm info @tarojs/cli
```
创建 Taro 项目：
- 使用 Taro CLI 创建一个新的 Taro 项目。选择 Taro 支持的模板，并选择 TypeScript 作为项目语言。
```
#taro init 项目名
taro init my-taro-project
```
  可根据自己实际开发需求进行选择
安装项目依赖：
- 进入项目目录并使用 Yarn 安装项目依赖（一般来说创建完项目之后就会自动安装依赖，但是可能出现安装失败的情况，可以使用yarn手动安装）：
```
cd my-taro-project 

# yarn install 缩写yarn
yarn
```
小程序开发工具（可选）：
- 如果你的目标是在小程序平台上运行 Taro 项目（例如微信小程序、支付宝小程序等），你需要安装对应的小程序开发工具。例如，对于微信小程序，你需要安装微信开发者工具。
编辑器配置（可选）：
- 配置你的编辑器以支持 TypeScript 语法高亮、代码格式化等功能。配置插件推荐可看：VSC（Visual Studio Code）好用插件推荐

使用 Taro CLI 提供的命令来启动开发服务器、构建项目等。dev和build的区别是，dev会监听文件修改，build不会监听，并且build会对代码压缩打包。

# 使用yarn管理
# 编译运行，开发期间常用
# 意义为：编译运行dev类型的h5项目
yarn run dev:h5

# 构建项目，打包使用
yarn run build:h5

# yarn run可缩写为yarn 脚本名，如
yarn dev:h5

# 使用npm管理
$ npm run dev:h5
$ npm run build:h5

# 若全局安装了taro，watch参数标记的会自动监听文件修改
$ taro build --type h5 --watch
$ taro build --type h5

taro项目根目录下有一个package.json，里面的scripts包含了可运行的目录。可看这部分内容，运行对应的任务。