记录使用 Vue3 + Vite + Typescript 所踩的坑。
更新
[2021-3-31]
- Initial release
[2021-4-1]
Added
- 新增 异步的setup
初始化项目
1 | yarn create @vitejs/app vue3-vite-example-todo --template vue-ts |
[vite] Internal server error: Failed to resolve import “@/api/api” from “src/main.ts”. Does the file exist?
问题概述
已经在 vite.config.ts
中配置了路径别名:
1 | export default defineConfig({ |
并且于 tsconfig.json
中配置了路径映射:
1 | { |
还是出现了无法识别路径别名的错误。
解决方案
查阅 issue#2316 发现,vite 其实是使用 rollup 作为构建工具的,rollup 配置路径别名的语法与 webpack 有所不同,采用的是如下方式:
1 | export default defineConfig({ |
vue3挂载全局属性
问题概述
在 vue2.x
中,我们一般直接在 Vue.prototype 上挂载一个方法或属性:
1 | import Vue from 'vue'; |
之后,为了更好的 ts 代码提示,我们需要声明类型:
1 | import * as api from '@/api/api'; |
解决方案
在 vue3.x
中,可以通过如下方式挂载全局属性
1 | import { createApp } from 'vue'; |
接着,如果我们需要编写类型声明文件,vue3.x
和 vue2.x
所采取的方式不太一样。
src/@types/
目录下新建 properties-vue.d.ts
,接着引入并声明自定义的各种方法和属性:
1 | import api from '@/api/api'; |
记住,编写声明文件之后,需要重新启动编辑器!
最后,我们可以在 Composition API 中这么使用:
1 | import { |
如果你依旧想用 Options API 的话,那么你可以这么做,如下图所示:
异步的setup
问题概述
在编写组件的时候,遇到了一个问题,如果在组件中定义了异步的 setup
,那么该组件就无法被渲染,例如 src/components/Todo/index.vue
1 | import { defineComponent } from 'vue'; |
解决方案
由于 async 返回的 Promise 使得 setup 函数被挂起,也就是该组件会被异步渲染,解决方式很简单,如果定义了异步的 setup,那么需要在其父组件中包裹一层 <Suspense>
组件:
1 | <Suspense> |