如何使用
1. 安裝 Taro 腳手架工具
安裝 Taro
開發工具 @tarojs/cli
使用 npm
或者 yarn
全局安裝,或者直接使用 npx
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli
2. 初始化項目
使用命令創建模板項目
$ taro init myApp
3. 安裝 Taro UI
$ cd myApp
$ npm install taro-ui
自己補充一點用yarn安裝taro-ui
yarn add taro-ui
P.S.因爲要支持自定義主題功能,需要將樣式從組件中抽離出來,在微信小程序中依賴 globalClass 功能,所以需要微信基礎庫版本在 v2.2.3 以上。
配置需要額外編譯的源碼模塊
由於引用 `node_modules` 的模塊,默認不會編譯,所以需要額外給 H5 配置 `esnextModules`,在 taro 項目的 `config/index.js` 中新增如下配置項:
h5: {
esnextModules: ['taro-ui']
}
4. 使用 Taro UI
引入所需組件
在代碼中 import
需要的組件並按照文檔說明使用
// page.js
import { AtButton } from 'taro-ui'
// 除了引入所需的組件,還需要手動引入組件樣式
// app.js
import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
按照官網給的順序一步一步往下執行, 會發現報錯:
Module not found: Can't resolve 'nervjs' in 'E:\taro\test\node_modules\taro-ui\dist\h5\components\accordion'
node_modules/taro-ui/dist/h5/components/accordion/index.js
解決辦法:
cnpm install [email protected] -S
yarn add [email protected] -S