#Vue 3+TypeScript+Vite

这个模板应该有助于您开始在 Vite 中使用 Vue 3 和 TypeScript 进行开发。模板使用 Vue 3<script setup>SFCs，请查看[script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-脚本设置）以了解更多信息。

##建议的 IDE 设置

-VS 代码+沃拉尔（并禁用 Vetur）+[TypeScript Vue 插件（Volar）](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript vue 插件）。

##在 TS 中键入对.vue导入的支持 TypeScript 默认情况下无法处理“.vue”导入的类型信息，因此我们将“tsc”CLI 替换为“vue-tsc”进行类型检查。在编辑器中，我们需要[TypeScript Vue 插件（Volar）](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript vue 插件），以使 typescript 语言服务知道.vue类型。

如果你觉得独立的 TypeScript 插件不够快，Volar 还实现了[接管模式](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669）更具性能。您可以通过以下步骤启用它：

1.禁用内置的 TypeScript 扩展

1.从 VSCode 的命令调色板运行“扩展：显示内置扩展”

2.找到“TypeScript 和 JavaScript 语言功能”，右键单击并选择“禁用（工作区）”`

2.通过从命令调色板运行“Developer:重新加载窗口”来重新加载 VSCode 窗口。

问题

1. 找不到模块“./App.vue”或其相应的类型声明。ts(2307) vscode 安装插件 👉👉 TypeScript Vue Plugin

2. { "compilerOptions": { "moduleResolution": "node", "baseUrl": ".", "paths": { "@/": ["src/"] } } } 完成这些配置后，重新运行项目，应该能够成功解析 "vue" 模块并消除错误。 如果问题仍然存在，请检查其他可能导致错误的因素，比如 Vue 的安装是否正确或其他相关依赖项的配置。

3. 代理配置

 server: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 设置代理目标
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
      },
    },
  },

4. 上述配置中，"src/*/.vue" 已经被正确包含在编译中。

IDE 缓存问题： 如果你是在某个集成开发环境 (IDE) 中工作，有时可能会出现缓存未更新导致的错误。尝试重新启动 IDE 并重新编译项目，以确保最新的文件信息被加载。

4. vite.config.ts Error: Dynamic require of "path" is not supported

import path from 'path'; // 错误，需要将这里的 require 改为 import

添加vue-router

参考

问题

Error [ERR_REQUIRE_ESM]: require() of ES Module 使用 .prettierrc.cjs 文件：将 .prettierrc.js 文件重命名为 .prettierrc.cjs，这样 Node.js 将会把它当做 CommonJS 模块加载，而不是 ES 模块。

修改 package.json：在项目的根目录下的 package.json 文件中，将 "type": "module" 改为 "type": "commonjs"。这样所有的 .js 文件都将被视为 CommonJS 模块。

At least one or <script> is required in a single file component. 在 Vue 的单文件组件中，通常应该包含至少一个 标签用于定义组件的模板，以及一个 <script> 标签用于定义组件的 JavaScript 代码。

Preprocessor dependency "sass" not found. Did you install it? 首先，确认你是否已经在项目中安装了 Sass 预处理器的依赖，即 sass 或 node-sass，并且在项目中正确配置了它。

[sass] Expected newline. 这个问题有点调皮，是个小坑，虽然我们用的是 sass ，但是这里却不能写 sass ，要写 scss ，咱啥也不知道啥也不敢问啊，现在改好了就可以运行了