mwl-components

基于vue 3.0 + ts + vite + element-plus 组件库

Type Support for .vue Imports in TS

默认情况下，TypeScript无法处理“.vue”导入的类型信息，因此我们将“tsc”CLI替换为“vue-tsc”进行类型检查。在编辑中，我们需要Volar使TypeScript语言服务能够识别.vue类型。

 vite.config.ts 文件

Lint with ESLint

本地测试

pnpm link 或者 npm link

主项目 引入

pnpm link mwl-components

项目使用 先引入 element-plus 全局注册

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import mwlComponents from 'mwl-components'
import 'mwl-components/dist/index.css'

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

如果你不想 全局注册element-plus 你要在注册组件库前，单独注册组件库使用的element-plus组件

import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css' //暗黑模式

import mwlComponents from 'mwl-components'
import 'mwl-components/dist/mwl-components.css'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElSelectV2,
  ElTreeSelect,
  ElOption,
  ElDatePicker,
  ElSwitch,
  ElCascader,
  ElCheckbox,
  ElRadio,
  ElRadioGroup,
  ElCheckboxGroup,
  ElInputNumber,
  ElTable,
  ElTableColumn,
  ElButton,
  ElMenu,
  ElSubMenu,
  ElMenuItem,
  ElPagination,
  ElDialog,
  ElScrollbar,
  ElCard,
  ElTooltip,
  ElIcon
} from 'element-plus'

const components = [
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElSelectV2,
  ElTreeSelect,
  ElOption,
  ElDatePicker,
  ElSwitch,
  ElCascader,
  ElCheckbox,
  ElRadio,
  ElRadioGroup,
  ElCheckboxGroup,
  ElInputNumber,
  ElTable,
  ElTableColumn,
  ElButton,
  ElMenu,
  ElSubMenu,
  ElMenuItem,
  ElPagination,
  ElDialog,
  ElScrollbar,
  ElCard,
  ElTooltip,
  ElIcon
]

export const installs = (app: any) => {
  // app.use(ElementPlus)
  components.forEach((component) => {
    app.component(component.name, component)
  })
  app.use(mwlComponents)
}

⚠️ 注意：： 主项目使用 ”插件按需导入“ 的无效,请使用手动按需导入

组件包括如果

ContentWarp

import { ElCard, ElTooltip, ElIcon } from 'element-plus'

Dialog

import { ElDialog, ElScrollbar, ElButton } from 'element-plus'

Pagination

import { ElPagination } from 'element-plus'

MenuTree

import { ElMenu, ElSubMenu, ElMenuItem } from 'element-plus'

EasyTable

import { ElTable, ElTableColumn, ElButton } from 'element-plus'

EasyForm

import { ElForm, ElFormItem, ElInput, ElSelect, ElSelectV2, ElTreeSelect, ElOption, ElDatePicker, ElSwitch, ElCascader, ElCheckbox, ElRadio, ElRadioGroup, ElCheckboxGroup, ElInputNumber } from 'element-plus'

打包配置问题

如果想让组件库 在主项目使 el-config-provider 的配置生效，在组件库中的组件中不要单独引入 element-plus 的组件，并且 在vite.config.ts 中配置如下 自动导入方法AutoImport resolvers: [ElementPlusResolver()] 一定要注销掉 ，否则打包也会把element-plus 的组件打包进去

总结: 组件库 不用单独引入 element-plus 的组件，也不能注册,使组件库与主项目使用的 element-plus 保持(源)相同

export default defineConfig({
  plugins: [
    vue(),
    // viteCompression({ algorithm: 'gzip' }), // 压缩
    dts({
      tsconfigPath: './tsconfig.json',
      insertTypesEntry: true,
      include: ['src/**/*.ts', 'src/**/*.vue']
    }), // 生成dts
    // AutoImport({ // 自动引入 打包一定要开启 否则 不会打包组件未引入而使用的ref等方法 或者 在组件中手动引入使用的方法
    //   imports: ['vue', 'vue-router'],
    //   dts: 'src/auto-imports.d.ts',
    //   // ignore: ['h'], // 关键配置 忽略h函数
    //   // resolvers: [ElementPlusResolver()]
    // }),
    // Components({
    //   dts: 'src/components.d.ts',
    //   resolvers: [ElementPlusResolver()],
    //   dirs: ['src/components/'],
    //   exclude: [/node_modules/],
    //   extensions: ['vue']
    // })
  ],
})