Taro新手上路（脚手架），项目结构

Florence ·

更新时间:2024-11-14

· 504 次阅读

简介

Taro 是一套遵循 React 语法规范的多端开发解决方案。

使用 Taro，只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等）运行的代码。

Taro脚手架安装

CLI 工具安装

Taro 项目基于 node，请确保已具备较新的 node 环境（>=8.0.0）

首先，你需要使用 npm 或者 yarn 全局安装@tarojs/cli，或者直接使用npx:

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

项目初始化

使用命令创建模板项目

$ taro init myApp

在这里插入图片描述

在创建完项目之后，Taro 会默认开始安装项目所需要的依赖，安装使用的工具按照 yarn>cnpm>npm 顺序进行检测，一般来说，依赖安装会比较顺利，但某些情况下可能会安装失败，这时候你可以在项目目录下自己使用安装命令进行安装

运行

Taro 需要运行不同的命令，将 Taro 代码编译成不同端的代码，然后在对应的开发工具中查看效果。

H5 模式，无需特定的开发者工具，在执行完下述命令之后即可通过浏览器进行预览

H5 预览项目

# yarn
$ yarn dev:h5
# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx 用户也可以使用
$ npx taro build --type h5 --watch

H5 打包项目

# yarn
$ yarn build:h5
# npm script
$ npm run build:h5
# 仅限全局安装
$ taro build --type h5

React Native

React Native 端运行需执行如下命令，React Native 端相关的运行说明请参见 React Native 教程

# yarn
$ yarn dev:rn
# npm script
$ npm run dev:rn
# 仅限全局安装
$ taro build --type rn --watch

这就是Taro项目最简单的初始化，新建项目。详情请访问Taro

官方有一篇基于 Redux 的项目最佳实践文章：《Taro深度开发实践》。** 官方推荐的项目结构——

├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── components         公共组件目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── banner     页面 index 私有组件
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── utils              公共方法库
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

作者：南筏i

脚手架

1024 个赞