机遇屋-vue新项目使用笔记

vue新项目使用笔记

作者：ych

### 安装 pnpm并运行项目
#### 先看下环境位置
```
pnpm config get global-bin-dir
pnpm config set global-bin-dir C:\Users\Administrator\pnpm-global
```
#### 之后设置环境变量
`PNPM_HOME`
`C:\Users\Administrator\pnpm-global`
将`%PNPM_HOME%;`设置为用户环境变量或系统环境变量。
#### 执行安装
```
pnpm list -g
npm install -g pnpm
pnpm -v
rd /s /q node_modules
del pnpm-lock.yaml
pnpm i
```
#### vite安装
```
pnpm install vite
```
### 问题
#### ENOENT: no such file or directory
使用pnpm安装
```
 ERR_PNPM_ENOENT  ENOENT: no such file or directory, rename 'E:\code\git\vue-pure-admin-main\node_modules\.pnpm\@commitlint+cli@19.4.0_@types+node@20.16.1_typescript@5.5.4\node_modules\@commitlint\types' -> 'E:\code\git\vue-pure-admin-main\node_modules\.pnpm\@commitlint+cli@19.4.0_@types+node@20.16.1_typescript@5.5.4\node_modules\@commitlint\.ignored_types'
Progress: resolved 1227, reused 769, downloaded 396, added 0
```

在 exFAT 文件系统上收到此错误，因为exFAT不被支持。

#### 'NODE_OPTIONS' 不是内部或外部命令
npm run dev前端运行项目时候报错：
```
'NODE_OPTIONS' 不是内部或外部命令，也不是可运行的程序或批处理文件。
```
运行
```
npm install -g win-node-env
```
然后再运行`npm run dev`就可以成功运行了！

#### Error: modules: vue-demi
error when starting dev server:
Error: modules: [vue-demi](https://www.npmjs.com/package/vue-demi "vue-demi") package.json file does not exist
```
npm i vue-demi
# or
yarn add vue-demi
# or 
pnpm i vue-demi
```

#### Could not resolve dependency
pnnpm run dev
```
node:internal/event_target:1062
  process.nextTick(() => { throw err; });

TypeError [Error]: pluginContext.vueCompilerOptions.plugins is not iterable
```
npm i 安装正常，但是运行报错
```
'Log files:
C:\Users\ych\AppData\Local\npm-cache\_logs\2024-09-14T00_11_53_225Z-debug-0.log

# npm resolution error report

While resolving: vue-pure-admin@5.8.0
Found: eslint@9.10.0
node_modules/eslint
  dev eslint@"^9.9.0" from the root project

Could not resolve dependency:
peer eslint@"^8.56.0" from @typescript-eslint/parser@7.18.0
node_modules/@typescript-eslint/parser
  dev @typescript-eslint/parser@"^7.18.0" from the root project
  peer @typescript-eslint/parser@"^7.0.0" from @typescript-eslint/eslint-plugin@7.18.0
  node_modules/@typescript-eslint/eslint-plugin
    dev @typescript-eslint/eslint-plugin@"^7.18.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
```
##### 解决方案
降级 eslint 版本
将 eslint 降级到符合 @typescript-eslint/parser 的版本需求。根据错误提示，@typescript-eslint/parser@7.18.0 需要 eslint@"^8.56.0"，所以你可以将 eslint 降级到 8.x。
执行以下命令来降级 eslint：
```
npm install eslint@^8.56.0 --save-dev
pnpm install eslint@^8.56.0 --save-dev
```

评论区

先去登录