Vue3+Vite+TypeScript+ElementPlus项目最优配置

Vite项目初始化

1. 项目初始化

1.1. 项目准备

Vite 需要Node.js >=18+ 或者 >=20+版本，有些模板依赖更高的Node版本，所以需要确认Node版本
我们使用node.js : 22.21.1

1.2. 包管理工具pnpm

pnpm快速的,节省磁盘空间的包管理工具
中文官网：https://pnpm.io/zh/motivation

# 安装pnpmnpminstallpnpm-g# 更新所有依赖项，遵守 package.json 中指定的范围pnpmupdate# 更新所有依赖pnpmup--latest# 更新所有依赖到最后版本

2.Vite创建项目

中文官网文档：https://vitejs.cn/vite3-cn/guide/#trying-vite-online

# pnpm create vite 项目名称 --template 预设模板pnpmcreate vite vue3Admin--templatevue-ts

查看create-vite以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts

辅助插件工具

1.ESLint配置

• vscode需要安装插件Vue-officical

• 中文文档：https://zh-hans.eslint.org/docs/latest/use/getting-started

• ESLint是一个根据方案识别并报告ECMAScript/JavaScript代码问题的工具，其目的是使代码风格更加一致并避免错误。在很多地方它都与JSLint和JSHint类似，除了：
  ESLint使用Espree对JavaScript进行解析。
  ESLint在代码中使用AST评估方案。
  ESLint完全是插件式的，每个规则都是一个插件，你可以在运行时中添加更多插件

• 前提条件：内置 SSL 支持的 Node.js 版本（12.22.0、14.17.0 或 >=16.0.0），如果你使用的是官方 Node.js 发行版，那么已经内置了 SSL 支持

1.1. 初始化ESLint配置

npminit @eslint/config

配置步骤

1.2. ESLint配置文件

ESLint初始化后自动生产配置文件eslint.config.ts，如下：

importjsfrom"@eslint/js";// 校验js文件importglobalsfrom"globals";importtseslintfrom"typescript-eslint";// 校验ts文件importpluginVuefrom"eslint-plugin-vue";// 校验vue文件import{defineConfig}from"eslint/config";exportdefaultdefineConfig([<