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

标签：space   imp   symbol   框架   app   组件   全局   关联   环境   

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
   

   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‘
   },
   },

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

标签：space   imp   symbol   框架   app   组件   全局   关联   环境   

原文地址：https://www.cnblogs.com/he-zhi/p/14668196.html