最近有搭建前端框架的需求，网上查阅大部分写的都是使用npm的，本篇采用yarn搭建。

一、使用Homebrew安装node、yarn

安装Homebrew

1、打开终端，粘贴并运行以下命令（%之后的）以安装 Homebrew：

nina@fengdeMacBook-Pro-2 ~ % /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2、按照屏幕上的指示完成Homebrew的安装。

安装Node.js

1、终端运行以下命令（%之后的）以安装 Node.js：

nina@fengdeMacBook-Pro-2 ~ % brew install node   

2、安装完成后，可以通过运行以下命令（%之后的）来验证Node.js 是否正确安装:

nina@fengdeMacBook-Pro-2 ~ % node -v                            

v20.19.0                                                        

安装yarn

1、终端运行以下命令（%之后的）以安装 Yarn：

nina@fengdeMacBook-Pro-2 ~ % brew install yarn                  

2、安装完成后，可以通过运行以下命令（%之后的）来验证Yarn 是否正确安装:

nina@fengdeMacBook-Pro-2 ~ % yarn -v                            

1.22.22                                                         

二、使用Vite新建前端工程

1、vite创建前端ts项目（例test2025）

nina@fengdeMacBook-Pro-2 workspace_test % create-vite test2025 --template vue-ts

2、yarn install

nina@fengdeMacBook-Pro-2 workspace_test % cd test2025           

nina@fengdeMacBook-Pro-2 test2025 % yarn install                

3、使用vscode打开test2025，结构如下：

4、配置组件库等（根据需要自行添加）

yarn add unplugin-auto-import -D
yarn add unplugin-vue-components -D

yarn add @types/node

yarn add axios

yarn add vue-router

5、vscode中终端运行yarn dev，点开链接终端窗口链接http://localhost:5173/ 即可查看前端工程

6、vscode中终端运行yarn build，生成web的dist包

三、使用capacitor构建android

1、通过yarn添加以下组件库

yarn add @capacitor/cli

yarn add @capacitor/core

yarn add @capacitor/android

yarn add @capacitor/ios

2、运行 yarn cap init，配置app名称和包名，可在capacitor.config.ts中查看；

3、运行 yarn cap add android，此时会生成一个android的文件夹；

4、运行 yarn cap open android，在android studio中打开，模拟器运行；

四、使用capacitor构建ios

1、运行 yarn cap add ios，此时会生成一个ios的文件夹；

2、运行 yarn cap open ios，在xcode中打开，模拟器运行；