vue3+TS+vite项目创建

1.nvm安装

因为本地存在老的项目，使用的node版本低，vite需要 Node.js 版本 18+，20+，为方便切换nodejs版本，安装nvm

nvm下载地址：https://github.com/coreybutler/nvm-windows/releases

1.首先删除本地nodejs

2.运行setup.exe


更换nodejs的地址

cmd输入nvm回车，查看到版本信息安装成功

设置国内镜像

设置npm_mirror:

nvm npm_mirror https://npmmirror.com/mirrors/npm/

设置node_mirror:

nvm node_mirror https://npmmirror.com/mirrors/node/

nvm常用命令

1.1 nvm list available：查看所有可以安装的版本

下面有完整链接点开查看

找到我要的版本
1.2 nvm install 版本号 ：安装指定版本

这个版本供老的项目使用

安装最新版本供vue3使用

1.3 nvm ls: 查看已经安装的版本

1.4 nvm use 版本号： 使用指定版本node

使用最新的nodejs，供我们vue3项目使用
1.5 nvm current：查看当前使用的node版本号

以上已经完成vue3项目node版本的安装以及兼容老的项目其他node的版本安装，接下来我们正式开始新建vue3项目

2.vue3项目创建

新建一个文件夹study,cmd里输入初始化命令

查看package的scripts的命令，基本操作，首先npm i 安装依赖，然后 npm run dev运行打开

以上只是一个基本的项目

3.项目依赖安装

我们还需要 状态管理 pinia、UI 框架选用Antd-vue （因为element和iview用多了），网络请求 axios，路由router（在 vue3 中使用 vue-router4）；
先把这四个依赖安装一下

npm install --save vue-router@4 pinia axios ant-design-vue@4.x

在main.ts中引入 ant-design-vue

然后项目我需要eslint来规范编码风格,

npm init @eslint/config

很多大公司都提出了自己公司的标准，例如使用 Airbnb （就是一系列规则），我们项目使用Airbnb， 安装 eslint-config-airbnb，并且将 .eslintrc 文件改写

{
  "extends": ["airbnb"]
}

4.vscode 插件安装

打开vscode发现代码下面都是虚线，不识别vue3代码

vue3装一下这两个插件

如果没有安装成功，点击参考这个解决方法

如果使用vue2 ，使用的是插件vetur，和vue3会冲突，换项目记得切换禁用启用

项目中还使用了eslint来规范编码风格，如果靠人工写来格式化代码就太麻烦了，Prettier来帮我们解决 ，Prettier 还给予了一部分配置项，可以通过 .prettierrc 文件修改。
安装Prettier

项目报错，ts不识别.vue格式文件
Cannot find module ‘./App.vue’ or its corresponding type declarations.ts(2307)

到git上查看是否有这个问题


上面项目已经使用了volar和typecsript vue plugin【volar】禁用了vetur
网上提供的方法在d.ts文件中夹添加declare module无效

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

在vs code中f1输入> type,设置ts版本为workspace也无效

最终安装vscode插件 Vue - Official 解决，再见！！
由于 TypeScript Vue Plugin (Volar) 用于支持在 TS 中 import *.vue 文件，但是已弃用，更名为Vue - Official

————————————————————————————————————————————

另外一种vue的项目构建命令 npm init vue@latest，依赖包多一点

npm run dev运行项目

cmd ipconfig查看自己ip地址，然后在package.json中可以配置，当然可以不配置略过