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/ 目录中

相关推荐
青青家的小灰灰16 分钟前
告别 Prop Drilling:Context API 的陷阱、Reducer 模式与原子化状态库原理
前端·javascript·react.js
ssshooter15 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
青青家的小灰灰1 天前
迈向全栈新时代:SSR/SSG 原理、Next.js 架构与 React Server Components (RSC) 实战
前端·javascript·react.js
青青家的小灰灰1 天前
透视 React 内核:Diff 算法、合成事件与并发特性的深度解析
前端·javascript·react.js
小霖家的混江龙1 天前
从 0 到 1 实现一个 useState
前端·javascript·react.js
晓得迷路了1 天前
栗子前端技术周刊第 118 期 - Oxfmt Beta、Angular GitHub stars、React 基金会...
前端·javascript·react.js
AAA阿giao2 天前
从零构建一个现代登录页:深入解析 Tailwind CSS + Vite + Lucide React 的完整技术栈
前端·css·react.js
昨晚我输给了一辆AE862 天前
为什么现在不推荐使用 React.FC 了?
前端·react.js·typescript
不会敲代码12 天前
深入浅出 React 闭包陷阱:从现象到原理
前端·react.js
不会敲代码12 天前
React性能优化:深入理解useMemo和useCallback
前端·javascript·react.js