Taro v4框架开发微信小程序（使用CLI创建项目与文件）

Taro 计划在 2024 年第二季度推出其 4.0 正式版，而目前我们正在使用这个版本的测试版进行学习。一旦 Taro 发布了最新版，相应的文档也会得到更新。

安装脚手架

安装 Taro 的 v4.0.0 CLI 工具：

bash 复制代码

npm i -g @tarojs/cli@beta

创建项目

命令格式：taro init 项目名称

例如，若要创建一个名为 learn-taro-wxapp 的项目，可如下操作：

bash 复制代码

taro init learn-taro-wxapp

# 亦可省略 CLI 工具的安装，直接使用 npx 创建项目
npx @tarojs/cli@beta init learn-taro-wxapp

执行上述命令后，CLI 工具会询问我们几个问题：

项目介绍
所选择的框架
是否使用 TypeScript
要使用哪种 CSS 预处理器
选择的编译工具
包管理器的选择
模板源选项
以及最后的模板选择

完成这些设置后，我们需要在项目根目录下的 project.config.json 文件中填入小程序的 appid。

紧接着在终端中运行项目：

bash 复制代码

pnpm dev:weapp
# 或者
npm dev:weapp

在这个例子中，我使用 pnpm 作为包管理工具来启动项目。

打开微信开发者工具，目录路径指向编译后生成的 dist 目录，随后点击"确定"。

这样，我们便能预览到项目的效果。

项目结构

arduino 复制代码

├── dist                        // 编译结果所在的目录
|
├── config                      // 项目编译配置目录
|   ├── index.js                // 默认配置
|   ├── dev.js                  // 开发环境配置
|   └── prod.js                 // 生产环境配置
|
├── src                         // 源码所在目录
|   ├── pages                   // 页面文件夹
|   |   └── index               // index 页面目录
|   |       ├── index.tsx       // index 页面逻辑文件
|   |       ├── index.scss      // index 页面样式文件
|   |       └── index.config.ts // index 页面配置文件
|   |
|   ├── app.ts                  // 项目的入口文件
|   ├── app.scss                // 项目的通用样式文件
|   ├── app.config.ts           // 项目的入口配置文件
|   └── index.html              // 静态页面模板
|
├── project.config.json         // 微信小程序项目配置文件
|
├── .eslintrc                   // ESLint 配置文件
├── .editorconfig               // 编辑器格式配置文件
├── .gitignore                  // git 忽略文件配置
|
├── .env.dev                    // 开发环境变量文件
├── .env.prod                   // 生产环境变量文件
├── .env.test                   // 测试环境变量文件
|
├── project.tt.json             // 抖音小程序项目配置文件
|
├── jest.config.ts              // Jest 测试框架的配置文件
├── babel.config.js             // Babel 配置文件
├── tsconfig.json               // TypeScript 配置文件
|
└── package.json                // 项目依赖配置文件