Taro类别
（真的是类别“泪别”，入手一个框架时一定要认真全面了解一下）
| react | vue | |
|---|---|---|
| Taro | Taro | Taro |
| Taro-UI | Taro-UI | Taro-UI-Vue |
1. Taro 安装和使用
Taro 项目基于 node，请确保已具备较新的 node 环境（>=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
注意事项
如果安装过程出现sass相关的安装错误，请在安装mirror-config-china后重试。
$ npm install -g mirror-config-china
2.项目初始化
使用命令创建模板项目
$ taro init myApp
3.运行
3.1 微信小程序
选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览。
微信小程序编译预览及打包（去掉 --watch 将不会监听文件修改，并会对代码进行压缩打包）
# 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 百度小程序
选择百度小程序模式，需要自行下载并打开百度开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览。
百度小程序编译预览及打包（去掉 --watch 将不会监听文件修改，并会对代码进行压缩打包）
# 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 支付宝小程序
选择支付宝小程序模式，需要自行下载并打开支付宝小程序开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览。
支付宝小程序编译预览及打包（去掉 --watch 将不会监听文件修改，并会对代码进行压缩打包）
# 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 环境及依赖检测
taro info
5.项目目录
├── client 小程序端目录
│ ├── config 配置目录
│ │ ├── dev.js 开发时配置
│ │ ├── index.js 默认配置
│ │ └── prod.js 打包时配置
│ ├── dist 编译结果目录
│ ├── 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 云函数目录
│ └── login login 云函数
│ ├── index.js login 函数逻辑
│ └── 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"; // 引入所需的组件样式 - 方式三