组件库入口文件的设计

所有组件一次性全部导入并且作为插件使用

import LegoComponents from 'lego-components'
app.use(LegoComponents)

• 建立一个入口文件index.ts
• 将所有组件导入，作为一个数组，创建一个install函数，循环调用app.component
• 默认导出一个插件(这个install函数)

import { App } from 'vue'
import LText from './components/LText'
import LImage from './components/LImage'
import LShape from './components/LShape'

const components = [
  LText,
  LImage,
  LShape
]

const install = (app: App) => {
  components.forEach(component => {
    app.component(component.name, component)
  })
}

export {
  LText,
  LImage,
  LShape,
  install
}
export default {
  install
}

单个组件导入并且作为插件使用

import { LText } from 'lego-components'
app.use(LText)
// 或者
app.component(LText.name, LText)

• 每个组件新建一个文件夹，并且创建一个单独的index.ts文件
• 每个组件设计成一个插件(一个object拥有install方法)
• 在全局入口文件导出

import { App } from 'vue'
import LText from './LText.vue'
LText.install = (app: App) => {
  app.component(LText.name, LText)
}

export default LText