Taro新手上路（腳手架），項目結構

簡介

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 模式，無需特定的開發者工具，在執行完下述命令之後即可通過瀏覽器進行預覽

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
複製代碼