1. Project operating environment

  • The node v12.9.0

  • NPM v6.10.2

  • Cli – service v4.5.0

2. Core framework version number

  • “Vue” : “^ 3.0.0”,

  • “Vue – class – component”, “^ 8.0.0-0”.

  • “Vue – the router” : “^ 4.0.0-0”.

  • “Vuex” : “^ 4.0.0-0”.

  • “Vuex – class”, “^ 0.3.2”

3. Mount the VUE instance

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

4. How to obtain component 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>
Copy the code

5. How do I register global methods

A common way to do this is to mount a vue prototype

vue2

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

// main.js
vue.use(common)
Copy the code

vue3 + ts

  1. Type declarations

    // common.ts

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

  2. Mount to 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. Register global methods

    import { createaApp } from “vue” let app = createaApp(…)

    App.use (common) // Register app.mount(“#app”)

6. setup + vue-class-component

Vue-class-component V8 documentation is not available yet. For specific syntax rules, please check the project issues or source code

  • @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. Generate a unique identification key

    import { InjectionKey } from “vue”

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

  2. Associate a key with a store

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

    app.use(store, key)

    app.mount(“#app”)

  3. Using 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. Add the global type file vuex.d.ts to the root of the project

    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')
Copy the code

9. In cli-service configuration, Vue axios vuex vuE-Router is not packed

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