zy-components2 中文文档教程
这个模板
应该可以帮助您开始在 Vite 中使用 Vue 3 进行开发。
推荐的 IDE 设置
VSCode + Volar(并禁用 Vetur)+ TypeScript Vue 插件 (Volar)。
TS TypeScript 中对 .vue
导入的类型支持
默认无法处理 .vue
导入的类型信息,因此我们将 tsc
CLI 替换为 vue-tsc
用于类型检查。在编辑器中,我们需要 TypeScript Vue 插件 (Volar) 来制作 TypeScript 语言服务感知 .vue
类型。
如果您觉得独立的 TypeScript 插件不够快,Volar 还实现了接管模式 性能更高。您可以通过以下步骤启用它:
- 禁用内置的 TypeScript 扩展 1) 从 VSCode 的命令面板运行
Extensions: Showbuilt-in Extensions
2) 找到TypeScript and JavaScript Language Features
,右键单击并选择禁用(工作区)
- 通过运行
Developer: Reload Window
重新加载 VSCode 窗口命令调色板。
自定义配置
参见Vite配置参考。
项目设置
npm install
编译和热重载以进行开发
npm run dev
类型检查、编译和缩小以
npm run build
使用 ESLint 进行生产 Lint
npm run lint
components
This template should help get you started developing with Vue 3 in Vite.
Recommended IDE Setup
VSCode + 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 1) Run
Extensions: Show Built-in Extensions
from VSCode's command palette 2) FindTypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
npm run dev
Type-Check, Compile and Minify for Production
npm run build
Lint with ESLint
npm run lint