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

项目运行环境

node v12.9.0

npm v6.10.2

cli-service v4.5.0

核心框架版本号

"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"

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<Store> = 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'

},

},