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