React+Taro创建小程序

第一步:首先确认是否安装Node.js和npm

如果已安装Node.js和npm,以下可以查询

javascript 复制代码
node -v
npm -v

第二步:安装Taro CLI

javascript 复制代码
npm install -g @tarojs/cli

第三步:创建项目

javascript 复制代码
taro init my-react-taro-app

然后可以看到,下图

第四步:进入到根目录

cd my-react-taro-app 安装依赖,个人建议使用cnpm,也可以使用npm。

javascript 复制代码
cnpm install

项目目录

第五步:启动到开发服务器

你可以通过以下命令启动不同平台的开发模式:

启动到微信小程序,之后可以在根目录看到dist文件,直接用微信开发者工具打开就可以预览效果。

javascript 复制代码
npm run dev:weapp

启动H5 开发环境

javascript 复制代码
npm run dev:h5

第六步:构成生产版本

当你准备发布时,可以使用以下命令进行构建:

复制代码
npm run build:h5

或构建微信小程序:

复制代码
npm run build:weapp

构建后的文件会放在 dist/ 目录中

相关推荐
南方kenny40 分钟前
移动端适配的利器:lib-flexible 原理与实战
前端·javascript·react.js
遂心_2 小时前
React Hooks:彻底革新函数组件的魔法武器(实战详解+最佳实践)
前端·javascript·react.js
purpleseashell_Lili2 小时前
react 和 react native 的开发过程区别
javascript·react native·react.js
懋学的前端攻城狮4 小时前
Next.js + TypeScript + Shadcn UI:构建高性能懒加载与无限滚动系统
前端·react.js·前端框架
徐礼昭|商派软件市场负责人10 小时前
从“多、老、旧”到“4i焕新”:品牌官方商城(小程序/官网/APP···)的范式跃迁与增长再想象
小程序·商城系统·零售
半个烧饼不加肉19 小时前
React + ts + react-webcam + CamSplitter 实现虚拟摄像头解决win摄像头独占的问题
前端·react.js·前端框架
小喷友20 小时前
第 6 章:API 路由(后端能力)
前端·react.js·next.js
胡西风_foxww20 小时前
微信小程序转Vue2组件智能提示词
微信小程序·小程序·提示词·智能体·vue2组件
七七软件开发21 小时前
一对一交友小程序 / APP 系统架构分析
java·python·小程序·系统架构·php
代码的余温1 天前
React核心:组件化与虚拟DOM揭秘
前端·react.js·前端框架