zoukankan      html  css  js  c++  java
  • 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'
      },
      },

    欢迎各位大虾指正
  • 相关阅读:
    CodeForces 510C Fox And Names (拓扑排序)
    Codeforces 1153D Serval and Rooted Tree (简单树形DP)
    HDU 6437 Problem L.Videos (最大费用)【费用流】
    Luogu P3381 (模板题) 最小费用最大流
    Codeforces 741B Arpa's weak amphitheater and Mehrdad's valuable Hoses (并查集+分组背包)
    Codeforces 1144F Graph Without Long Directed Paths (DFS染色+构造)
    HDU 2204 Eddy's 爱好 (容斥原理)
    Codeforces 939E Maximize! (三分 || 尺取)
    Codeforces 938D. Buy a Ticket (最短路+建图)
    CodeForces 959E Mahmoud and Ehab and the xor-MST (MST+找规律)
  • 原文地址:https://www.cnblogs.com/he-zhi/p/14668196.html
Copyright © 2011-2022 走看看