springboot+vue3搭建项目

springboot+vue3搭建项目

yarn创建前端项目

1.执行如下命令创建项目

yarn create @vitejs/app sut-vue3 --template vue

2.创建vite自定义

yarn create @vitejs/app sut-vue3

yarn创建项目遇到的问题

D:\project\vue_project>yarn create vite-app alex-vue3 --template vue
yarn create v1.22.10
[1/4] Resolving packages...
warning create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@vue/cli > jscodeshift@0.9.0" has unmet peer dependency "@babel/preset-env@^7.1.6".
[4/4] Building fresh packages...
success Installed "create-vite-app@1.21.0" with binaries:
      - create-vite-app
      - cva
文件名、目录名或卷标语法不正确。
error Command failed.
Exit code: 1
Command: D:\soft\node\node_global\bin\create-vite-app
Arguments: alex-vue3 --template vue
Directory: D:\project\vue_project
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.

原因

是因为yarn全局安装的位置与yarn的bin文件不在一个磁盘下

$ yarn global bin
D:\soft\node\node_global\bin

$ yarn global dir
C:\Users\majf\AppData\Local\Yarn\Data\global

解决方式：

设置全局信息：

$ yarn config set global-folder "D:\soft\node\yarn_global"
yarn config v1.22.10
success Set "global-folder" to "D:\\soft\\node\\yarn_global".
Done in 0.04s.

设置缓存信息

$ yarn config set cache-folder "D:\soft\node\yarn_cache"
yarn config v1.22.10
success Set "cache-folder" to "D:\\soft\\node\\yarn_cache".
Done in 0.04s.

最后的结果

$ yarn create @vitejs/app alex-vue3 --template vue
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "@vitejs/create-app@2.2.3" with binaries:
      - create-app
      - cva

Scaffolding project in D:\project\vue_project\alex-vue3...

Done. Now run:

  cd alex-vue3
  yarn
  yarn dev

Done in 2.70s.

yarn add ant-design-vue;
yarn add pinia;
yarn add vue-router;
yarn add unplugin-vue-components -D;
 yarn add sass
 yarn add axios