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

参考：
项目详细文档：
稀土挖金：https://juejin.cn/post/7228990409909108793#heading-1
csdn： https://blog.youkuaiyun.com/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.youkuaiyun.com/qq_45954390/article/details/142780564
https://blog.youkuaiyun.com/qq_45954390/article/details/144606262

其他可参考的博客：
https://juejin.cn/post/7418530380194201626
https://www.cnblogs.com/zhouxiaobai/p/17564807.html
https://blog.youkuaiyun.com/azl397985856/article/details/108090980
https://blog.youkuaiyun.com/s178435865/article/details/131417356
https://blog.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/qq_45954390/article/details/144606262】、【https://blog.youkuaiyun.com/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 项目可以进行增量构建有关 √
    "noEmit": false //是否不生成编译后的js文件,默认值是false，即生成 【确保没有 "noEmit": true】 √
  },