Taro安装及使用

CLI 工具安装

使用npm或者yarn全局安装@tarojs/cli

# 使用 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相关的安装错误:

$ npm install -g mirror-config-china

项目初始化

$ taro init myApp

在创建完项目之后,Taro会默认开始安装项目所需要的依赖,如果依赖安装失败,可手动安装

# 使用 yarn 安装依赖
$ yarn

# OR 使用 cnpm 安装依赖
$ cnpm install

# OR 使用 npm 安装依赖
$ npm install

运行

Taro需要运行不同的命令,将Taro代码编译成不同端的代码,然后在对应的开发工具中查看效果

微信小程序

选择微信小程序模式,需要自行下载并打开微信开发者工具,然后选择项目根目录进行预览。

微信小程序编译预览及打包(去掉--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

百度小程序

选择百度小程序模式,需要自行下载并打开百度开发者工具,然后在项目编译完后选择项目根目录下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

支付宝小程序

选择支付宝小程序模式,需要自行下载并打开支付宝小程序开发者工具,然后在项目编译完后选择项目根目录下 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

字节跳动小程序

选择字节跳动小程序模式,需要自行下载并打开字节跳动小程序开发者工具,然后在项目编译完后选择项目根目录下dist目录进行预览。

字节跳动小程序编译预览及打包(去掉--watch将不会监听文件修改,并会对代码进行压缩打包)

# yarn
$ yarn dev:tt
$ yarn build:tt

# npm script
$ npm run dev:tt
$ npm run build:tt

# 仅限全局安装
$ taro build --type tt --watch
$ taro build --type tt

# npx 用户也可以使用
$ npx taro build --type tt --watch
$ npx taro build --type tt

QQ 小程序

选择 QQ 小程序模式,需要自行下载并打开QQ 小程序开发者工具,然后在项目编译完后选择项目根目录下dist目录进行预览。

QQ 小程序编译预览及打包(去掉--watch将不会监听文件修改,并会对代码进行压缩打包)

# yarn
$ yarn dev:qq
$ yarn build:qq

# npm script
$ npm run dev:qq
$ npm run build:qq

# 仅限全局安装
$ taro build --type qq --watch
$ taro build --type qq

# npx 用户也可以使用
$ npx taro build --type qq --watch
$ npx taro build --type qq

常用 CLI 命令

(1)查看 Taro 所有命令及帮助

$ taro --help

(2)环境及依赖检测

Taro提供了命令来一键检测Taro环境及依赖的版本等信息,方便查看项目的环境及依赖,排查环境问题。

$ taro info

(3)Taro Doctor

Taro Doctor 就像一个医生一样,可以诊断项目的依赖、设置、结构,以及代码的规范是否存在问题,并尝试给出解决方案。

$ taro doctor

(4)快速创建新页面

taro create --name [页面名称]能够在当前项目的pages目录下快速生成新的页面文件,并填充基础代码,是一个提高开发效率的利器。

上一篇 Vue 3.0 特性体验
下一篇 Taro基础教程之React
目录
文章列表
1 The selected directory is not a valid home for Go SDK
The selected directory is not a valid home for Go SDK
2
设计模式(3)Builder模式
设计模式(3)Builder模式
3
Docker镜像加速
Docker镜像加速
4
Redis数据导入导出,实例间db迁移
Redis数据导入导出,实例间db迁移
5
JWT InvalidClaimException - The Token can't be used before
JWT InvalidClaimException - The Token can't be used before
最新评论
一位WordPress评论者
一位WordPress评论者
2月12日
您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar。