Vue3 相关笔记

记录 Vue3 使用过程中的问题和解决方案

Vite

缓存问题

文件系统缓存

Vite 会将预构建的依赖缓存到 node_modules/.vite，但是如果你是库作者，调试中会经常遇到需要频繁刷新缓存的场景。
想要强制 Vite 重新构建依赖，你可以用 --force 命令行选项启动开发服务器，或者手动删除 node_modules/.vite 目录。

这里我选择写入 package.json 中

"scripts": {
  "dev": "vite --force"
},

另外 vite build 似乎也会受到缓存的影响

/src/main

  • 全局属性可以通过 appconfig.globalProperties 绑定
    vue3

    import { createApp } from 'vue'
import axios from 'axios'

createApp(App).config.globalProperties.$http = axios

    vue2

    import Vue from 'vue';
import axios from 'axios'

Vue.prototype.$http = axios;
  • Augmenting Global Properties

  • 为 globalProperties 扩充类型
    如果使用了 ts，在 build 的时候,可能会报如下错误
    Property '$http' does not exist on type 'CreateComponentPublicInstance<......
    这个时候需要在 src/shims-vue.d.ts 中补充如下声明，并且确保 shims-vue.d.ts 文件被包含在 tsconfig.json 中了

    import axios from 'axios'

declare module 'vue' {
interface ComponentCustomProperties {
  $http: typeof axios
}
}

setup script