Taro学习手册（一）—— Taro的安装和运行

最新推荐文章于 2026-03-29 09:31:15 发布
原创 最新推荐文章于 2026-03-29 09:31:15 发布 · 8.3k 阅读 · 11 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细介绍了Taro框架的安装与配置过程，包括Taro和TaroUI的安装，微信开发者工具的使用，以及项目运行方法。同时，针对新手可能遇到的常见问题，如模块找不到和端口冲突等，提供了具体的解决方案。

有一些事情要先说在前面，使用Taro最好有微信小程序开发的经验，因为Taro的文档内容比较少，很多方便的效果其实是可以调用函数的，但是因为我之前都没用过，不知道可以调函数，比如，一个整体的loading效果，是可以调用 Taro.showLoading() ,但我开始不知道，直接用 TaroUI 做了一个loading效果出来，所以，如果你是一个新手没有微信小程序开发的经验，一定要先好好阅读微信的开发者文档，里面很多方法在Taro里面都是可以用的。

一、 Taro 的安装

  1. 首先是安装 taro （ npm 或者 yarn 全局安装@tarojs/cli
    1. npm install -g @tarojs/cli
  2. 初始化项目
    1. taro init myApp
      在这里插入图片描述
      直接一路回车就好了，会自动帮你安装依赖，这样就成功建立一个Taro项目

二、 Taro UI 的安装

  1. 安装 Taro UI
    1. npm install taro-ui
  2. TaroUI的引入
    1. 在 src/app.tsx 中引入就好了
    2. import ‘taro-ui/dist/style/index.scss’
      在这里插入图片描述在这里插入图片描述

三、 微信开发者工具的安装

直接在官网上就可以下载了，这是微信小程序开发的重要工具，在h5页面开发，在开发者工具上测试，最后真机调试
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

四、 在这里插入图片描述、 项目运行

可以看下官网，有各种小程序运行的方法，我这里就写一种h5的运行
在这里插入图片描述

五、 出现的问题

虽然是跟着官网的操作安装Taro的，但还是出现了一些问题

  1. Module not found: Can’t resolve ‘@tarojs/taro-h5’ in ‘xxx/.temp’
    1. 这是因为里面某个包找不到了，这个时候重新安装就好了
    2. npm install @tarojs/taro-h5
  2. Module not found: Can’t resolve ‘@tarojs/taro’ in ‘xxx/.temp’
    1. npm install @tarojs/taro
  3. Module not found: Can’t resolve ‘nervjs’ in ‘xxx/.temp’
    1. npm install nervjs
  4. Error: listen EADDRINUSE 127.0.0.1:10086
    1. 这个是因为Taro运行要用10086端口，但是这个端口被占用了，所以就报错了，这个时候把占用这个端口号的程序kill掉就好了
    2. sudo lsof -i tcp: 10086
      在这里插入图片描述
    3. sudo kill -9 52594

参考链接：
https://nervjs.github.io/taro/docs/GETTING-STARTED.html
https://taro-ui.aotu.io/#/docs/quickstart
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

Taro使用Vue3踏坑日记：Module not found: Can‘t resolve ‘@vue/server-renderer‘ in ‘/Users/...‘
楼招颜
06-07 1597
版本：Taro v3.0.7 使用框架：Vue3 项目完成后，进行编译时报错编译失败 横向对比一下尝试使用框架React进行安装，taro版本依旧 项目可以正常编译，也可以正常使用和开发 Vue3框架编译时安装了Vuex以及使用了TS，看下报错信息发下有个模块没有找到 在项目中也没有找到这个模块 @vue/server-renderer 翻了一下package没有对应的模块，我决定尝试安装一下这个模块 安装完成 @vue/server-renderer模块后 再次..
将Taro项目融合小程序项目中运行
F_22579的博客
12-03 1117
将Taro项目融合小程序项目中运行
2023最新版Taro-UI整合指南：让你的React微信小程序开发效率翻倍
最新发布
weixin_29001423的博客
03-29 456
本文详细介绍了2023最新版Taro-UI在React微信小程序开发中的高效整合方法。通过Taro-UI丰富的预制组件和性能优化，开发者可以显著提升开发效率，实现界面风格统一。文章涵盖项目初始化、核心组件应用、主题定制及常见问题解决方案，助力开发者快速掌握Taro-UI与微信开发者工具的最佳实践。
@tarojs/components 和 taro-ui 中的组件之间的区别
m0_61998604的博客
10-24 1250
提供了更加高级和样式丰富的组件，适合快速搭建复杂界面，而。提供了基础组件，灵活性更高但需要手动管理样式和功能。
Taro：Module not found: Can‘t resolve ‘./pages/xxx/xxx.config‘ in ‘xxxx‘解决
furfur-jiang的博客
10-31 2126
eg Can’t resolve ‘./pages/dialog/testDialog.config’ in ‘D:\taro\taro\mytaro\src’ 解决： 在dialog文件夹下创建testDialog.config.js文件 写入内容 export default { navigationBarTitleText: 'testDialog' }
taro开发工具安装_taro使用教程（详细版）
weixin_39789399的博客
12-22 4719
Taro框架的简介和开篇介绍Taro是由京东凹凸实验室推出的框架，目的就是解决多端混乱的局面，也是当下比较新兴的一个框架。当我们按照一种模式一种代码进行开发，开发完成后，项目就有了在任何终端显示的能力，这是一种想想都很爽的。那具体Taro有那些优点，请看下面的图片。目前Taro支持的终端微信小程序H5 移动端Web页面百度小程序支付宝小程序快应用ReactNative字节跳动小程序QQ轻应用是目前...
taro+taro-ui学习
星际老男孩
10-15 2067
参考文章：https://blog.csdn.net/weixin_45650629/article/details/126830301。参考文章:https://b2nil.github.io/taro-ui-vue3/docs/introduction.html。参考文章：https://nodejs.org/en/download/package-manager。参考文章：https://taro-docs.jd.com/docs/GETTING-STARTED。使用下面语句安装-全局安装。
（小程序taro框架入门到实战）一、taro框架安装及项目搭建
er_ba的专栏
07-06 4441
说明：项目使用技术栈taro+typescript+redux 一、安装及案例使用 1.安装全局配置 >cnpm install -g @tarojs/cli 2.搭建项目 >taro init 项目名 3.安装成功提示 说明：安装过程中会出现依赖安装报错问题【没翻墙】，需要进入项目目录用cnpm install来完成安装 4.运行体验【微信小程序举例】 >cnpm run dev:weapp --watch // 说明：--watch会 5.下载小程序开..
Taro 开发快速入门手册
分享前端工程化、动效魔法与性能之舞！
11-02 1569
本文介绍了Taro跨端开发框架的详细使用指南。主要内容包括：1. 环境搭建与项目初始化，包括Node.js环境要求、Taro CLI安装、项目创建和模板选择；2. 项目结构与基本开发，讲解目录组织、核心文件和常用组件（View、Text、Image等）的使用；3. API功能介绍，涵盖网络请求、Toast提示、设备信息获取等常见场景；4. 多端开发方案，重点说明通过环境变量、条件编译和多端文件实现跨平台适配；5. 构建与发布流程，详细介绍微信小程序和H5应用的打包部署方法。文章还包含平台插件化设计和Dock
[Taro] Taro 环境安装 (一)
weixin_30488085的博客
07-19 1864
Taro 环境安装 Taro是一个前端小程序框架，通过这个框架写一套代码，再通过 Taro 的编译工具，就可以将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、H5、React-Native 等）运行的代码，[Taro官网](https://nervjs.github.io/taro/docs/README.html) 环境搭建： 1、先查看Node版本，确...
Taro安装入门
BA陈的博客
06-17 2102
Taro项目安装Taro入门——taro-application-template项目运行环境准备taro环境安装1、安装taro：2、安装项目依赖：3、运行项目：启动完成 Taro入门——taro-application-template项目运行 环境准备 node环境（≥8.0.0） taro环境安装 1、安装taro： # 使用 npm 安装 cli $ npm install -g @tarojs/cli # 使用 yarn 安装 cli $ yarn global add @tarojs/cli
Taro表单编辑器使用手册
gitblog_00378的博客
09-15 902
Taro表单编辑器使用手册 1. 项目目录结构及介绍 本项目基于Taro 3和React DND，提供了一个可视化的表单编辑器，适用于多种平台如小程序、H5和APP。下面是其基本目录结构概览： . ├── android # 安卓相关的配置或资源（如果存在） ├── app.json # 小程序全局配置文件 ├── babel.config.js # Babel编译...
Taro开发微信小程序安装运行
gay
10-26 4988
简介 Taro是一个遵循React语法能够编译出微信小程序、H5、RN等运行代码并统一多端开发的框架。 安装 注意：安装前先把node更新为最新的版本，以防在安装taro的时候会出现错误！！ 在window上更新直接去node官网下载，安装路径在node旧版本的路劲下，这样就会覆盖掉旧版本的 npm install -g @tarojs/cli taro init demo 注意：出现以下这样的...
taro1/2及taro3实现原理
祥哥的说
01-12 5517
JSX限制如下： 不支持动态组件 不能在包含 JSX 元素的 map 循环中使用 if 表达式 不能使用 Array#map 之外的方法操作 JSX 数组 不能在 JSX 参数中使用匿名函数 不允许在 JSX 参数(props)中传入 JSX 元素 只支持class组件 暂不支持在 render() 之外的方法定义 JSX 不能在 JSX 参数中使用对象展开符 不支持无状态组件（函数式组件） props.children只能传递不能操作 设计思路 仅仅将代码按照对应语法规则转换过去后，还远远不够，因为不同端
一、关于小程序开发Taro框架的学习（安装及使用）
ZJ_LONG的博客
04-22 1018
随着小程序越来越普遍的应用，app的轻量化开发成为了行业趋势，京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架，通过Taro框架，可以快速把项目转换成H5，微信小程序等现在主流的小程序平台，做到一次开发全部应用的效果。 安装 aro 项目基于 node，请确保已具备较新的 node 环境（>=8.0.0），推荐使用 node 版本管理工具nvm来管理 nod...
第一次打开taro项目报错：Module not found: Can‘t resolve ‘@nutui/nutui-taro‘ site:blog.csdn.net
认真，努力，记录学习
11-03 6555
文章目录前言一、配置webstorm二、打开项目1.错误信息2.安装taro三、解决方案 前言 在今天我准备开始学习新的框架：taro，然后喔朋友发了一个taro项目给我，我试了一下打开，然后遇到了不少问题，该文章只是为了记录问题和解决方案 一、配置webstorm 首先将项目放到webstorm中打开，进行配置，别问为什么不用vscode （因为试了很多次打不开，我一个朋友才要我用webstorm试试的） webstorm配置如图： 该文件是h5的，所以我这里scripts的选项才选的h5 二、打开
Taro安装、启动命令、创建项目、修改端口号以及如何在微信开发者工具内运行
weixin_50236973的博客
04-12 6916
1. 安装Taro开发工具：npm install -g @tarojs/cli (或者yarn global add @tarojs/cli，使用npm可能会有一些报错的信息，建议使用cnpm安装); 2. 使用命令创建模板：taro init myApp 3. 开发期启用命令 npm run dev:h5 --------- WEB npm run dev:weapp --------- 微信小程序 npm run dev:alipay --------- 支付宝小程序 npm run de
打开taro项目
sinat_38992528的博客
09-02 1059
1.在此项目按shift+ctrl+右键打开命令行“在此处打开powershell 命令； 小插曲： 更新 Taro 提供了更新命令来更新 CLI 工具自身和项目中 Taro 相关的依赖 更新 Taro CLI 工具 # taro $ taro update self # npm npm i -g @tarojs/cli@latest # yarn yarn global add @tarojs/cli@latest 更新项目.
入门 Taro
fivefiveopenway的博客
04-03 3491
入门 Taro
前端开发框架“taro”从入门到爆哭--介绍与安装篇
火山的博客
12-21 6200
Taro框架入门
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值