# ComponentLibrary

**Repository Path**: xiang0430/component-library

## Basic Information

- **Project Name**: ComponentLibrary
- **Description**: 基于Vue3框架写的一些组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-29
- **Last Updated**: 2025-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Some components by vue3

基于Vue3写一些常用组件

## 多端适配

主打PC端和兼容大屏显示器、笔记本电脑、平板横屏等场景
**百分比布局 + 视口单位（vw/vh）**

### 核心插件（视口单位转换 + 容器查询）

```sh
pnpm install postcss-px-to-viewport -D
```

### 配置 `vite.js`

### 组件中使用

①首先写PC端下的样式，然后使用**媒体查询**适配不同尺寸下的样式  
②使用全局函数监听窗口大小，根据不同尺寸导入不同的样式文件

### 导航栏组件

允许定制化，包括导航list

viewWidth<=768px时,显示汉堡栏

### 多端布局

①使用Grid布局，最外层设置类名`.Grid-container`,然后在不同窗口下设置容器内元素列宽(grid-template-columns)
②使用flex布局，每一个布局给定类名`col-sm-6`,然后在不同窗口下设置类名宽度(width)

## 轮播图组件

父组件中动态导入照片url,然后传入轮播图组件

## 复杂可定制表格组件

支持数据排序、分页和行内编辑功能

## 全局背景色切换

1.所有颜色值都要使用CSS变量  
2.在`src/assets/css/global.css`中定义全局变量  
3.在`src/assets/js/global.js`中定义全局方法，**注意export**  
4.在组件中引入全局变量和全局方法

## 导航栏点击路由跳转

需在data中定义路由数组，然后在组件中定义路由跳转方法

## ElementPlus 按需引入

1.安装插件

```sh
pnpm install element-plus
```

安装iconfont图标库

```sh
pnpm install @element-plus/icons-vue
```

2.按需导入

```sh
pnpm install unplugin-vue-components unplugin-auto-import -D
```

3.配置`vite.config.js`

4.组件中使用

### 重写样式

1.全局CSS样式文件中定义全局变量

2.组件内找到元素，修改

## 全局插件：背景切换+一键置顶

组件中导入并使用`./components/GlobalPlugins/index.vue`

### 增加gzip压缩

```sh
pnpm install vite-plugin-compression -D
```

## Project Setup

```sh
pnpm install
```

### Compile and Hot-Reload for Development

```sh
pnpm dev
```

### Compile and Minify for Production

```sh
pnpm build
```

### Lint with [ESLint](https://eslint.org/)

```sh
pnpm lint
```

```sh
docker pull node:18-alpine
```

```sh
docker pull nginx:alpine
```

```sh
docker build -t 镜像名称 .
```

```sh
docker run -d -p <端口>:80 --name 镜像名称 容器名称
```

```sh
docker stop 容器名称
docker rm 容器名称
docker rmi 镜像名称
```