vue3 + ts 组件全局挂载

vue3 + ts 组件全局挂载

1. 生成组件

<template>
  <button class="m-button" :class="type">
    <slot></slot>
  </button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'mButton',
  components: {},
  props: {
    // 按钮类型
    type: {
      type: String,
      default: 'default'
    },
    // 是否朴素
    plain: {
      type: Boolean,
      default: false
    },
    // 是否边框 圆
    round: {
      type: Boolean,
      default: false
    },
    // 是否圆形
    circle: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    return {}
  }
})
</script>

<style scope lang="scss">
.default {
  color: $--button-default-font-color;
  background-color: $--button-default-background-color;
  border-color: $--button-default-border-color;
  font-size: $--button-font-size;
  font-weight: $--button-font-weight;
  border-radius: $--button-border-radius;
  padding: $--button-padding-vertical $--button-padding-horizontal;
}
</style>

2. install

新建一个index.ts文件，引入上面的组件，并且install

import mButton from './src/button.vue'
import { App } from 'vue'
const components = {
  install: (Vue: App): void => {
    Vue.component(mButton.name, mButton)
  }
}

3. 导出

在 index.ts 中将定义的 components 导出

export default components

4. createApp.use

main.ts 中引入上面的index.ts文件，并且createApp.use在vue中使用

import { createApp } from 'vue'
import App from './App.vue'
import mButton from '@/components/button/index'

const app = createApp(App)
app.use(mButton)
app.mount('#app')

Tips:
组件的命名是在index.ts 中的install中的mButton.name 中定义。也就是在 button.vue文件中的name属性。