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

大家好，欢迎来到IT知识分享网。

目录

前言

Taro的优缺点

开发Taro配置环境

前言

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

Taro的优缺点

Taro的优点：

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

Taro的缺点：

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

开发Taro配置环境

1. Node.js 和 npm：
   • Taro 是基于 Node.js 平台的，因此首先需要安装 Node.js。你可以从 Node.js 官方网站 下载并安装最新版本。mac上也可以使用brew来安装node。
   • npm 是 Node.js 的包管理工具，它随同 Node.js 一同安装。你可以使用 npm 来安装 TypeScript 和 Taro 项目的依赖。具体使用技巧可参考：npm使用详解（好吧好吧是粗解）
2. 安装 TypeScript：
   • TypeScript 是 Taro 使用的编程语言。可以使用以下命令全局安装 TypeScript：

     npm install -g typescript

3. 安装 Yarn（推荐）：
   • Yarn 是替代 npm 的包管理工具，用于更快、可靠地管理依赖。可以从 Yarn 官方网站 下载并安装 Yarn。
4. 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

5. 创建 Taro 项目：
   • 使用 Taro CLI 创建一个新的 Taro 项目。选择 Taro 支持的模板，并选择 TypeScript 作为项目语言。

     #taro init 项目名 taro init my-taro-project

     可根据自己实际开发需求进行选择

6. 安装项目依赖：
   • 进入项目目录并使用 Yarn 安装项目依赖（一般来说创建完项目之后就会自动安装依赖，但是可能出现安装失败的情况，可以使用yarn手动安装）：

     cd my-taro-project # yarn install 缩写yarn yarn

7. 小程序开发工具（可选）：
   • 如果你的目标是在小程序平台上运行 Taro 项目（例如微信小程序、支付宝小程序等），你需要安装对应的小程序开发工具。例如，对于微信小程序，你需要安装微信开发者工具。
8. 编辑器配置（可选）：
   • 配置你的编辑器以支持 TypeScript 语法高亮、代码格式化等功能。配置插件推荐可看：VSC（Visual Studio Code）好用插件推荐
9. 使用 Taro CLI 提供的命令来启动开发服务器、构建项目等。dev和build的区别是，dev会监听文件修改，build不会监听，并且build会对代码压缩打包。 taro项目根目录下有一个package.json，里面的scripts包含了可运行的目录。可看这部分内容，运行对应的任务。

   # 使用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