taro 之--taro的安装与创建项目

安装

Taro 项目基于 node,请确保已具备较新的 node 环境(>=12.0.0),推荐使用 node 版本管理工具 nvm 来管理 node,这样不仅可以很方便地切换 node 版本,而且全局安装时候也不用加 sudo 了。

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
查看 Taro 全部版本信息

可以使用 npm info 查看 Taro 版本信息,在这里你可以看到当前最新版本

npm info @tarojs/cli

由图第 1 行可知最新版本,如果你用的是 beta 或者 canary 你可以通过 dist-tags: 下面那行看到最新的版本。

项目初始化

使用命令创建模板项目:

$ taro init myApp

npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目:

$ npx @tarojs/cli init myApp

在创建完项目之后,Taro 会默认开始安装项目所需要的依赖,安装使用的工具按照 yarn > cnpm > npm 顺序进行检测。一般来说,依赖安装会比较顺利,但某些情况下可能会安装失败,这时候你可以在项目目录下自己使用安装命令进行安装:

# 进入项目根目录$ cd myApp# 使用 yarn 安装依赖$ yarn# OR 使用 npm 安装依赖$ npm install# OR 使用 pnpm 安装依赖$ pnpm install# OR 使用 cnpm 安装依赖$ cnpm install

编译运行

使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码,然后在对应的开发工具中查看效果。

Taro 编译分为 dev 和 build 模式:

  • dev 模式(增加 --watch 参数) 将会监听文件修改。

  • build 模式(去掉 --watch 参数) 将不会监听文件修改,并会对代码进行压缩打包。

  • dev 模式生成的文件较大,设置环境变量 NODE_ENV 为 production 可以开启压缩,方便预览,但编译速度会下降。

微信小程序

编译命令
# 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# watch 同时开启压缩$ set NODE_ENV=production && taro build --type weapp --watch # CMD$ NODE_ENV=production taro build --type weapp --watch # Bash
小程序开发者工具

下载并打开微信开发者工具,然后选择项目根目录进行预览。

需要注意开发者工具的项目设置:

  • 需要设置关闭 ES6 转 ES5 功能,开启可能报错

  • 需要设置关闭上传代码时样式自动补全,开启可能报错

  • 需要设置关闭代码压缩上传,开启可能报错

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: taro-plugin-tailwind是一个用于Taro开发框架的插件,它结合了Tailwind CSS和Taro框架的功能,旨在提供更便捷、高效的开发体验。 Tailwind CSS是一个功能强大、可定制的CSS框架,它通过提供一系列预定义的样式类,使开发者能够快速构建出丰富多样的UI界面。而Taro是一款跨平台的前端开发框架,它可以同时构建小程序、H5和React Native等多个平台的应用。 taro-plugin-tailwind的作用就是将这两者有机地结合在一起,让开发者在使用Taro开发项目时能够直接使用Tailwind CSS提供的各种样式类,从而节省编写繁琐CSS样式的时间。 使用taro-plugin-tailwind,我们只需要在Taro项目安装并配置好该插件,然后就可以在项目中使用Tailwind CSS的样式类来定义组件的样式。例如,我们可以使用类似"bg-blue-500"、"text-white"这样的样式类来设置组件的背景颜色和文字颜色。 此外,taro-plugin-tailwind还提供了一些自定义配置的选项,允许开发者根据具体项目的需求进行样式配置和扩展。这使得我们可以根据项目需要添加自定义的样式类或修改现有的样式类,进一步满足项目的设计需求。 总之,taro-plugin-tailwind是一个帮助开发者将Tailwind CSS快速应用到Taro项目中的插件,它简化了样式开发流程,提高了开发效率,让我们可以更专注于项目的逻辑实现。 ### 回答2: taro-plugin-tailwind是一个适用于Taro前端开发框架的插件,它允许开发者在Taro项目中使用Tailwind CSS来简化样式开发流程。 Tailwind CSS是一个功能强大的工具集,它提供了一系列的CSS类名,开发者可以通过组合这些类名来构建出复杂的样式。使用Tailwind CSS能够大大提高开发效率,减少样式代码量,并且能够保持代码的可读性和可维护性。 taro-plugin-tailwind的使用非常简单,只需要在Taro项目安装该插件,然后在配置文件中进行相应的配置即可。该插件会自动将Tailwind CSS的类名转换为对应的样式。 通过使用taro-plugin-tailwind,开发者可以在Taro项目中使用大量的预定义样式类名,如颜色、背景、边框、文本样式等,可以轻松实现样式的定制化和重用。同时,该插件还支持自定义配置,开发者可以根据项目需求进行个性化的设置。 总之,taro-plugin-tailwind是一个非常实用的插件,它使得在Taro项目中使用Tailwind CSS更加方便和高效,能够帮助开发者快速构建出漂亮而且响应式的界面。无论是新项目还是现有项目,都可以考虑使用taro-plugin-tailwind来加速开发进程。 ### 回答3: taro-plugin-tailwind是一个为Taro框架提供的Tailwind CSS的插件。Taro是一个跨平台的前端开发框架,可以使用一套代码开发多个平台的应用程序,包括小程序、H5、React Native等。 Tailwind CSS是一个高度可定制的CSS框架,它通过将原子类(例如m-4、p-2)组合来构建样式,可以快速而灵活地创建各种各样的界面。Taro-plugin-tailwind的目的就是将Tailwind CSS集成到Taro框架中,提供更强大的样式处理能力。 使用taro-plugin-tailwind可以让开发者更轻松地在Taro应用中使用Tailwind CSS,省去了手动配置的繁琐过程。只需要在Taro项目安装这个插件,并在项目的配置文件中进行相应的配置,即可开始使用Tailwind CSS样式。 通过taro-plugin-tailwind,开发者可以使用Tailwind CSS的所有特性,如响应式布局、自定义颜色、间距、阴影等。可以通过直接引用Tailwind CSS的类名,或者使用插件提供的自定义组件,来实现所需的样式效果。 总之,taro-plugin-tailwind是一个集成了Tailwind CSS的Taro插件,通过使用这个插件,开发者可以更方便地在Taro应用中使用Tailwind CSS,快速构建出具有各种样式效果的界面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瞬间的醒悟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值