一、安装篇
1、安装Taro, 这个过程就不过多赘述了。官网文档已经写的很清楚了,地址:官方手册
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
使用命令创建模板项目
$ taro init myApp
2、安装 Taro UI
cd 到自己创建的项目根目录。
$ cd myApp
$ npm install taro-ui
3、项目目录
|-config/ 开发环境配置
|-src/ 项目目录
|----images/ 存放图片目录
|---- pages/ 项目各模块、页面
|----utils/ 全局封装配置、函数、方法部分
4、引入Taro UI
由于引用 `node_modules` 的模块,默认不会编译,所以需要额外给 H5 配置 `esnextModules`,在 taro 项目的 `config/index.js` 中新增如下配置项:
h5: {
esnextModules: ['taro-ui']
}
根据不同的环境可以放在不同的文件中,像这种全局使用的文件,可以直接放在index.js,当然,也可以放在不同的开发环境中,比如我放在dev.js:
module.exports = {
env: {
NODE_ENV: '"development"'
},
defineConstants: {
},
weapp: {},
h5: {
esnextModules: ['taro-ui']
}
}
5、运行
# 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
6、 项目预览界面