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

    1. 如何注册全局方法
      比较常见的一种方式就是挂载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")

    1. 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

    1. 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
    }
    }

    1. vuex + setup

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

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

    1. cli-service 配置,不打包Vue axios vuex vue-router 等

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

posted @ 2021-04-16 17:58  老年游侠  阅读(5121)  评论(1编辑  收藏  举报