基于yarn搭建vite + vue3开发框架

运行环境

NodeJs v16.20.x
Yarn 1.22.x
@vue/cli 5.0.8

准备条件

1、Nodejs安装

a. 如果安装在带有空格目录中，比如【Program Files】那么，那么yarn创建基于模板vite项目时，就会报错：

D:\XXXX>yarn create vite my-vue-app --template vue
success Installed "create-vite@4.4.1" with binaries:
      - create-vite
      - cva
'D:\Program' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
error Command failed.
Exit code: 1
Command: D:\Program Files\nodejs\node_global\bin\create-vite
Arguments: my-vue-app --template vue
Directory: D:\VueProjects

有两种方案：
（1） 将NodeJS安装在非汉字且不带空格的路径；
（2） 手动改变Yarn的Prefix和golbao、cache环境变量；

有不少技术文章，都说是NodeJs和项目非在中分区中，可能只说对了一半，具体没有做过测试。
反正，我的NodeJs安装是在【Program Files】中，结果导致的悲剧，因为create-vite是直接找yarn全局变量指定的路径上。

2、Yarn配置

（1）调整全局变量

yarn config set global-folder "D:\yarn\global"
yarn config set cache-folder "D:\yarn\cache"

实际上，也是直接修改【‪C:\Users\{用户名}\.yarnrc】文件。

（2）包安装及检查环境

--检查global当前位置
yarn global dir

--检查global bin位置，也就是create-vite脚手架包的安装路径，关键的就是生成.bin目录
yarn global bin  

--安装全局vite脚手架
yarn add global create-vite

--移除全局vite脚手架
yarn global remove create-vite-app  

注意，当安装包成功后，重新调整global-bin环境路径：
yarn config set prefix "D:\yarn\global\node_modules\.bin"
只有包安装成功了，才能在该路径下找到这个路径位置。

创建Vite + Vu3项目框架

yarn create vite

--执行结果：
D:\XXXX>yarn create vite
yarn create v1.22.19
warning package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["create-vite@^4.4.1"] is trying to unpack in the same destination "D:\\yarn\\cache\\v6\\npm-create-vite-4.4.1-7d29a6ec53491914d3b176a7facfecba1b2659fd-integrity\\node_modules\\create-vite" as pattern ["create-vite@latest"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@4.4.1" with binaries:
      - create-vite
      - cva
√ Project name: ... lowercode-mes-app
√ Select a framework: » Vue
√ Select a variant: » Customize with create-vue ↗
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vue@3.8.0" with binaries:
      - create-vue
[#######] 7/7
Vue.js - The Progressive JavaScript Framework

√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是

正在构建项目 D:\VueProjects\lowercode-mes-app...

项目构建完成，可执行以下命令：

  cd vite-app
  yarn
  yarn format
  yarn dev

Done in 21.22s.
Done in 70.60s.

至此项目已经搭建好了。
--END--