%20(2).svg)
项目简介
本项目是一个基于Vue3、Vite和Element Plus框架创建的二次封装组件库。封装了省市区选择、城市选择、时间选择等多种常用组件，旨在提高开发效率，简化UI开发流程。
项目的主要特性和功能
- 采用最新的Vue3和Vite，保证项目性能与现代性。
- 基于Element Plus进行二次封装，兼容其丰富功能与样式。
- 提供丰富组件库，可满足各类UI需求。
- 支持全量引用和按需引用，使用方式灵活。
- 具备详细文档，方便开发者使用。
安装使用步骤
安装
假设用户已经下载了本项目的源码文件，在项目目录下执行npm install安装依赖。
快速开始
全量引用
在main.js文件中按以下方式引入和使用组件库：
```javascript
//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 ElementPlus from 'element-plus';
import '@element-plus/icons-vue';
const app = createApp(App); app.use(ElementPlus); app.use(ecc); app.mount('#app'); ```
按需引用
可手动引入样式文件，也可使用Vite配置文件自动按需引入组件。具体如下：
- 手动按需引入：在需要使用的组件中引入样式，如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.config.ts中插入以下代码：
```ts
// 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添加到tsconfig.json的include下。unplugin-vue-components`插件建议使用@0.22.12版本。
Volar支持
若使用Volar且全量引用组件库，可在tsconfig.json中配置：
json
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["elementplus-components-celerity/global"]
}
}
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】