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中可以配置,当然可以不配置略过