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

1. 项目运行环境

• node v12.9.0

• npm v6.10.2

• cli-service v4.5.0

2. 核心框架版本号

• "vue": "^3.0.0",

• "vue-class-component": "^8.0.0-0",

• "vue-router": "^4.0.0-0",

• "vuex": "^4.0.0-0",

• "vuex-class": "^0.3.2"

3. vue实例挂载

import { createaApp } from "vue"
let app = createaApp(...)
app.mount("#app")

4.如何获取组件 ref

<template>
  <div ref="childRef"></div ></template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { ref } from "vue";


@Options({
 
})
export default class HelloWorld extends Vue {
  setup() {
    const childRef = ref(null);
    return {
      childRef,
    };
  }
  mounted() {}
}
</script>

5. 如何注册全局方法

比较常见的一种方式就是挂载vue的原型上

vue2

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

// main.js
vue.use(common)

vue3 + ts

1. 申明类型

   // common.ts

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

2. 挂载到 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 } }

3. 注册全局方法

   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

1. 生成唯一标识key

   import { InjectionKey } from "vue"

   export const key: InjectionKey<Store> = Symbol()

2. 关联 key 与 store

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

   app.use(store, key)
   app.mount("#app")

3. 使用 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()) }

   }

4. 项目的根目录增加全局类型文件 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'
    },
},