zrlazyui 中文文档教程
Vue 3 + TypeScript + Vite
该模板应该可以帮助您开始在 Vite 中使用 Vue 3 和 TypeScript 进行开发。该模板使用 Vue 3 SFC,请查看 脚本设置文档以了解更多信息。
推荐的 IDE 设置
- VS Code + Volar(并禁用 Vetur)+ TypeScript Vue 插件 (Volar)。
TS TypeScript 中对 .vue
导入的类型支持
默认情况下无法处理 .vue
导入的类型信息,因此我们将 tsc
CLI 替换为 vue-tsc
用于类型检查。在编辑器中,我们需要 TypeScript Vue 插件 (Volar) 来制作 TypeScript 语言服务感知 .vue
类型。
如果您觉得独立的 TypeScript 插件不够快,Volar 还实现了接管模式 性能更高。您可以通过以下步骤启用它:
- 禁用内置的 TypeScript 扩展
- 从 VSCode 的命令面板运行
Extensions: Showbuilt-in Extensions
- 找到
TypeScript and JavaScript Language Features
,右侧单击并选择禁用(工作区)
- 通过从命令面板运行
Developer: Reload Window
重新加载 VSCode 窗口。
Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup>
SFCs, check out the script setup docs to learn more.
Recommended IDE Setup
- VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
Type Support For .vue
Imports in TS
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.