Taro類別
（真的是類別“淚別”，入手一個框架時一定要認真全面了解一下）
| react | vue | |
|---|---|---|
| Taro | Taro | Taro |
| Taro-UI | Taro-UI | Taro-UI-Vue |
1. Taro 安裝和使用
Taro 項目基于 node，請確保已具備較新的 node 環(huán)境（>=8.0.0）废累，推薦使用 node 版本管理工具 nvm 來管理 node脏款，這樣不僅可以很方便地切換 node 版本乍桂，而且全局安裝時候也不用加 sudo 了侈咕。
1.CLI 工具安裝
需要使用 npm 或者 yarn 全局安裝@tarojs/cli，或者直接使用npx:
# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli
# OR 安裝了 cnpm梳杏，使用 cnpm 安裝 CLI
$ cnpm install -g @tarojs/cli
注意事項
如果安裝過程出現(xiàn)sass相關的安裝錯誤，請在安裝mirror-config-china后重試淹接。
$ npm install -g mirror-config-china
2.項目初始化
使用命令創(chuàng)建模板項目
$ taro init myApp
3.運行
3.1 微信小程序
選擇微信小程序模式十性，需要自行下載并打開微信開發(fā)者工具，然后選擇項目根目錄進行預覽塑悼。
微信小程序編譯預覽及打包（去掉 --watch 將不會監(jiān)聽文件修改劲适，并會對代碼進行壓縮打包）
# yarn
$ yarn dev:weapp
$ yarn build:weapp
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 僅限全局安裝
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用戶也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp
3.2 百度小程序
選擇百度小程序模式，需要自行下載并打開百度開發(fā)者工具厢蒜，然后在項目編譯完后選擇項目根目錄下 dist 目錄進行預覽霞势。
百度小程序編譯預覽及打包（去掉 --watch 將不會監(jiān)聽文件修改，并會對代碼進行壓縮打包）
# yarn
$ yarn dev:swan
$ yarn build:swan
# npm script
$ npm run dev:swan
$ npm run build:swan
# 僅限全局安裝
$ taro build --type swan --watch
$ taro build --type swan
# npx 用戶也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan
3.3 支付寶小程序
選擇支付寶小程序模式斑鸦，需要自行下載并打開支付寶小程序開發(fā)者工具愕贡，然后在項目編譯完后選擇項目根目錄下 dist 目錄進行預覽。
支付寶小程序編譯預覽及打包（去掉 --watch 將不會監(jiān)聽文件修改鄙才，并會對代碼進行壓縮打包）
# yarn
$ yarn dev:alipay
$ yarn build:alipay
# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 僅限全局安裝
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用戶也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay
4.常用 CLI 命令
4.1看 Taro 所有命令及幫助
taro --help
4.2 環(huán)境及依賴檢測
taro info
5.項目目錄
├── client 小程序端目錄
│ ├── config 配置目錄
│ │ ├── dev.js 開發(fā)時配置
│ │ ├── index.js 默認配置
│ │ └── prod.js 打包時配置
│ ├── dist 編譯結(jié)果目錄
│ ├── package.json
│ ├── src 源碼目錄
│ │ ├── app.scss 項目總通用樣式
│ │ ├── app.js 項目入口文件
│ │ ├── components 組件文件目錄
│ │ │ └── login login 組件目錄
│ │ │ └── index.weapp.js login 組件邏輯
│ │ └── pages 頁面文件目錄
│ │ └── index index 頁面目錄
│ │ ├── index.scss index 頁面邏輯
│ │ └── index.js index 頁面樣式
├── cloud 服務端目錄
│ └── functions 云函數(shù)目錄
│ └── login login 云函數(shù)
│ ├── index.js login 函數(shù)邏輯
│ └── package.json
└── project.config.json 小程序項目配置
6.Taro-ui 框架使用
7.Taro-ui-vue 框架使用
7.1 安裝 Taro UI Vue
$ cd myApp
$ npm install taro-ui-vue
配置需要額外編譯的源碼模塊
由于引用
node_modules的模塊颂鸿，默認不會編譯，所以需要額外給 H5 配置esnextModules攒庵，在 taro 項目的config/index.js中新增如下配置項：
h5: {
esnextModules: ['taro-ui-vue']
}
7.2 使用 Taro UI
引入所需組件
在代碼中
import需要的組件并按照文檔說明使用
// page.js
import { AtButton } from 'taro-ui-vue'
// 除了引入所需的組件嘴纺，還需要手動引入組件樣式
// app.js
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
引入組件樣式的三種方式
-
全局引入（JS中）： 在入口文件中引入
taro-ui所有的樣式
import 'taro-ui/dist/style/index.scss' // 引入組件樣式 - 方式一
-
全局引入（CSS中）： 在
app.scss樣式文件中import組件樣式并按照文檔說明使用
@import "~taro-ui-vue/dist/style/index.scss"; // 引入組件樣式 - 方式二
-
按需引入： 在頁面樣式或全局樣式中
import需要的組件樣式.
@import "~taro-ui-vue/dist/style/components/button.scss"; // 引入所需的組件樣式 - 方式三
