taro中安裝taro-ui

如何使用

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


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章