vue3+ts+vite创建的后台管理系统笔记

参考：
项目详细文档：
稀土挖金：https://juejin.cn/post/7228990409909108793#heading-1
csdn： https://blog.csdn.net/u013737132/article/details/130191394
vite文档：
https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
gitee项目源码：
https://gitee.com/youlaiorg/vue3-element-admin

版本信息：
node: v20.18.0
npm: 10.8.2
pnpm: v10.8.0

创建项目

npm init vite@latest power_front --template vue-ts

生成的项目目录：

package.json文件：

{"name": "power_front","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"vue": "^3.5.13"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.1","@vue/tsconfig": "^0.7.0","typescript": "~5.7.2","vite": "^6.2.0","vue-tsc": "^2.2.4"}
}

文件创建时tsconfig.json原始内容：

参考配置：
https://blog.csdn.net/qq_45954390/article/details/142780564
https://blog.csdn.net/qq_45954390/article/details/144606262

其他可参考的博客：
https://juejin.cn/post/7418530380194201626
https://www.cnblogs.com/zhouxiaobai/p/17564807.html
https://blog.csdn.net/azl397985856/article/details/108090980
https://blog.csdn.net/s178435865/article/details/131417356
https://blog.csdn.net/2301_79568124/article/details/137783628

{"files": [],//指定待编译文件"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }]
}references 属性作用是指定工程引用依赖。
在项目开发中，有时候我们为了方便将前端项目和后端node项目放在同一个目录下开发，两个项目依赖同一个配置文件和通用文件，但我们希望前后端项目进行灵活的分别打包，那么我们可以进行如下配置：files 属性作用是指定需要编译的单个文件列表。
默认包含当前目录和子目录下所有 TypeScript 文件参考：https://blog.csdn.net/azl397985856/article/details/108090980

bug汇总，知识点

src 路径别名配置和tsconfig.json文件报错【这个不配置好，会引起其他页面引用时报错：见–整合 Pinia】：

配置路径别名时，引入组件报错：cannot find module ‘’ or its corresponding type declarations
但可以正常渲染，跟tsconfig.json报错一块解决。

tsconfig.json有报错
问题：按照有来项目的的tsconfig.json配置，tsconfig.json中对tsconfig.app.json和tsconfig.app.json引用有报错。



解决方法参考：https://blog.csdn.net/qq_40244755/article/details/146768391
在tsconfig.app.json和tsconfig.app.json文件中，分别添加"composite": true并确保没有设置"noEmit": true：

三个文件的详细配置如下：

tsconfig.json文件配置

//默认的配置
// {
//   "files": [],//明确列出要编译的文件
//   "references": [//项目引用，是 TS 3.0 中的一项新功能，它允许将 TS 程序组织成更小的部分。使用小技巧：在填写路径时 ** 表示任意目录， * 表示任意文件。
//     { "path": "./tsconfig.app.json" },
//     { "path": "./tsconfig.node.json" }
//   ],
// }//有来科技和【https://blog.csdn.net/qq_45954390/article/details/144606262】、【https://blog.csdn.net/qq_45954390/article/details/142780564】
{"compilerOptions": {"target": "esnext", // 目标语言的版本"module": "esnext",// 指定生成代码的模板标准"moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入"lib": ["esnext", "dom"],// 编译时引入的 ES 功能库，包括：es5 、es6、es7、dom 等。// 如果未设置，则默认为： target 为 es5"baseUrl": ".", // 模块解析根路径，默认为 tsconfig.json 位于的目录"paths": {// 路径映射，相对于baseUrl"@/*": ["src/*"]},// 严格性和类型检查相关配置"strict": true,// 开启所有严格的类型检查"skipLibCheck": true,// 是否跳过声明文件的类型检查，这可以在编译期间以牺牲类型系统准确性为代价来节省时间，默认：false"forceConsistentCasingInFileNames": true,// 是否区分文件系统大小写规则// 模块和兼容性相关配置"allowSyntheticDefaultImports": true,//允许从那些使用 CommonJS（require）导出模块的库中导入默认导出（default exports）"esModuleInterop": true,// 允许export=导出，由import from 导入 【解决了在 TypeScript 中使用 CommonJS 模块和 ECMAScript 模块相互兼容的一些问题】"resolveJsonModule": true,//是否解析 JSON 模块// 调试和兼容性相关配置"sourceMap": true,// 生成目标文件的sourceMap文件"useDefineForClassFields": true,// useDefineForClassFields 为 true 时，TypeScript 编译器会生成符合 ECMAScript 标准的类字段。useDefineForClassFields 有利于我们平滑地升级 TypeScript 。"allowJs": true, // 允许编译器编译JS，JSX文件// 类型声明相关配置// "types": ["node", "vite/client", "element-plus/global"]"types": ["node", "vite/client",],// 加载的声明文件包// "composite":true,// 是否编译构建引用项目},// 指定需要被编译的TypeScript文件和需要被排除的文件// 指定要编译的文件或目录"include": ["mock/**/*.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts"],//如果不指定include属性，‌则默认当前目录下除了exclude之外的所有.ts、‌.d.ts、‌.tsx文件都会被编译。‌// 指定不需要编译的文件或目录"exclude": ["node_modules", "dist"],// "composite":true,// 是否编译构建引用项目//用于指定项目之间的引用关系，当前项目的 tsconfig.json 文件引用了位于相对路径 "./tsconfig.node.json" 的另一个 TypeScript 配置文件"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }], 
}

tsconfig.app.json配置：

// {
//   "extends": "@vue/tsconfig/tsconfig.dom.json",
//   "compilerOptions": {
//     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",//     /* Linting */
//     "strict": true,
//     "noUnusedLocals": true,
//     "noUnusedParameters": true,
//     "noFallthroughCasesInSwitch": true,
//     "noUncheckedSideEffectImports": true,//     "noImplicitAny": false,//     "emitDeclarationOnly": true,// 仅生成声明文件，不编译输出如 JS 文件。√
//     "composite": true,  // 与 TypeScript 项目可以进行增量构建有关 √
//     "noEmit": false //是否不生成编译后的js文件,默认值是false，即生成 【确保没有 "noEmit": true】 √
//   },
//   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
// }// 按照 https://juejin.cn/post/7418530380194201626 配置的{"extends": "./tsconfig.json", // 继承主配置文件"compilerOptions": {// "emitDeclarationOnly": true,// 仅生成声明文件，不编译输出如 JS 文件。√"composite": true,  // 与 TypeScript 项目可以进行增量构建有关 √