Vue3 + TypeScript + vue-class-component +Webpack 实战踩坑

vue实例挂载
import { createaApp } from "vue"
let app = createaApp(...)
app.mount("#app")
4.如何获取组件 ref

5. 如何注册全局方法
   比较常见的一种方式就是挂载vue的原型上

vue2

// common.js
export default {
install(Vue){
Vue.prototype.$loginInfo = loginInfo;
}
}

// main.js
vue.use(common)

vue3 + ts

申明类型
// common.ts

declare module ‘@vue/runtime-core‘ {
interface ComponentCustomProperties {
$loginInfo = loginInfo
}
}

挂载到 globalProperties
// common.ts
import { App } from ‘vue‘;

declare module ‘@vue/runtime-core‘ {
interface ComponentCustomProperties {
$loginInfo = loginInfo
}
}

export default {
install(app: App) {
app.config.globalProperties.$loginInfo = loginInfo
}
}

注册全局方法
import { createaApp } from "vue"
let app = createaApp(...)

app.use(common) //注册
app.mount("#app")

6. setup + vue-class-component
   vue-class-component v8版本的文档还没出来，具体语法规则可以查看项目的 issues 或者 源码

@Component will be renamed to @Options.
@Options is optional if you don‘t declare any options with it.
Vue constructor is provided from vue-class-component package.
Component.registerHooks will move to Vue.registerHooks

7. Vuex + vue-class-component
   生成唯一标识key

import { InjectionKey } from "vue"

export const key: InjectionKey> = Symbol()
关联 key 与 store

import { createaApp } from "vue"
import {store, key } from "./store"
let app = createaApp(...)

app.use(store, key)
app.mount("#app")
使用 vuex

import { namespace } from "vuex-class";
const moduleAny = namespace("moduleName");

export default class AnyCom extends Vue {

@moduleAny.State("token") public token?: any;

@moduleAny.Mutation("getToken") public getToken!: Function;

create(){ console.log(this.getToken()) }

}
项目的根目录增加全局类型文件 vuex.d.ts

import { ComponentCustomProperties } from ‘vue‘
import { Store } from ‘vuex‘

declare module ‘@vue/runtime-core‘ {
// declare your own store states
interface State {
//
}
// provide typings for this.$store
interface ComponentCustomProperties {
$store: Store
}
}

8. vuex + setup

import {useStore } from "vuex"
import { key } from ‘@/store/index‘

const store = useStore(key);
store.dispatch(‘moduleName/query‘)

9. cli-service 配置，不打包Vue axios vuex vue-router 等

configureWebpack: {
externals: {
‘vue‘: ‘Vue‘,
‘vue-router‘: ‘VueRouter‘,
‘vuex‘: ‘Vuex‘,
‘axios‘: ‘axios‘
},
},