vue-cli3 + ts 全局常量globalData

1.在src新建一个ts文件如：src/globalData/globalData.ts.

2.在ts中写下如下代码。

export default {
    install(Vue: any, options: any) {
        Vue.prototype.$globalData.defaultImage= "/images/head.png";
        Vue.prototype.$globalData.defaultText= "测试";
        // ...
    }
};

3.在main.ts中引入该文件，并放入Vue中。

import globalData from "./globalData/globalData";

Vue.use(globalData);

4.这时在vue文件中就可以直接使用 this.$globalData.defaultImage来访问定义的全局变量。但是由于是在ts文件中使用，在使用时会报错：Property '$globalData' does not exist on type “...”。这时就需要多做一个步骤，

在main.ts中做一下ts的扩展。最终main.ts中的代码如下

import globalData from "./globalData/globalData";

declare module 'vue/types/vue' {
  interface Vue {
    $globalData: any;
  }
}

Vue.use(globalData);