介绍

这是一个 vue3+vite+ts 创建的基于 element-plus 的二次封装组件库。

组件库包含了省市区选择、城市选择、时间选择、表单、导航菜单、弹出框表单、通知菜单、步骤、表格组件的封装。

详细的文档请点击这里

安装

npm install elementplus-components-celerity

快速开始

全量引用

//main.js
import { createApp } from 'vue';
import App from './App.vue';

import ecc from 'elementplus-components-celerity';
import 'elementplus-components-celerity/lib/style.css';

//单独组件全局注册
//import ChooseCity from 'elementplus-components-celerity/lib/ecccomponents/choose-city';
//import 'elementplus-components-celerity/lib/ecccomponents/choose-city/style.css';

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

const app = createApp(App);

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app.use(ElementPlus);
app.use(ecc);
//app.use(ChooseCity);
app.mount('#app');

按需引用

手动按需引入

在你需要使用的组件中:

import 'elementplus-components-celerity/lib/ecccomponents/choose-city/style.css';

自动按需引入

下载unplugin-auto-import和unplugin-vue-components这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

以及专门搭配给这个组件库的resolver

npm install ecc-vue-resolver -D

然后把下列代码插入到你的 Vite 配置文件中

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import EccVueResolver from 'ecc-vue-resolver'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver(),EccVueResolver()],
    }),
  ],
})

确保还将 Components.d.ts 添加到 include 下的 tsconfig.json 中。

这里的unplugin-vue-components插件建议使用@0.22.12版本。如果使用插件的高版本，生成的components.d.ts文件中的declare module '@vue/runtime-core'为declare module 'vue'，可能不会有组件的声明提示。

Volar 支持

如果您使用 Volar，并且使用的是全量引用组件库的方式，可以在 tsconfig.json 中通过 compilerOptions.types指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["elementplus-components-celerity/global"]
  }
}

element-plus版本

组件库的peerDependencies版本是[email protected]。

如果出现样式或者其他问题，建议把项目中的element-plus修改成2.3.14。