# air-share-plus

**Repository Path**: fly-rabbit/air-share-plus

## Basic Information

- **Project Name**: air-share-plus
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: https://file.cupb.top/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-06
- **Last Updated**: 2025-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.


# A flexible and fun JavaScript file upload library

https://github.com/pqina/filepond  15.2k star的上传库，支持各大框架

# 前端各大框架语法对比学习

https://component-party.lainbo.com/

https://github.com/lainbo/component-party

# 火狐浏览器开发者版本

https://www.mozilla.org/en-US/firefox/developer/

## vite配置

<h1 style="color: red">特别注意！ 配置必须以 `VITE_`开头。否则接受不到。</h1>

https://blog.csdn.net/weixin_45292658/article/details/109447633

# 运行环境

## 安装nodejs

https://nodejs.org/

> 支持版本 20.11.0 LTS

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## 【推荐试试】bun

node与npm整合到一起了。

https://github.com/oven-sh/bun

![alt text](image.png)

# 发布

```
yarn build && scp -r dist/ insite@139.217.230.42:/mnt/resource/data/docker/nginx/www
```

```
npm  run build && scp -r dist/ insite@139.217.230.42:/mnt/resource/data/docker/nginx/www
```


```shell
yarn build && scp -r dist/* grow@52.131.235.89:/media/data/docker/nginx/www/airshare
```

# 开发步骤

https://cn.vuejs.org/guide/quick-start.html

```
yarn create vite air-share-plus --template vue
```

![](assets/20230311_160917_image.png)

```shell
yarn # 直接安装依赖
```

或者

```shell
npm install --registry=https://registry.npm.taobao.org
```


```shell
yarn dev # 启动项目
```

![](assets/20230311_161441_image.png)

![](assets/20230311_161516_image.png)

```
yarn add vue-router@next
```

![](assets/20230311_161943_image.png)

## 第一个版式

![](assets/20230311_163959_image.png)

## 文件上传框架，可以无缝替换ZUI的分块上传，直接与后端完美对接。

https://github.com/simple-uploader/vue-uploader/tree/vue3

```shell
yarn add  vue-simple-uploader@next
```

### 问题

1. 后端接收文件错误

https://github.com/simple-uploader/vue-uploader/issues/106

解决方案：

1、 分块文件在后端逐个新建，然后最后合并即可。
2、去掉前端并发上传，无序改成有序。

![image](./assets/上传顺序错乱.png)

并发数改为1

![](assets/20230319_132639_image.png)

## 安装element-plus框架

https://element-plus.org/zh-CN/

```shell
yarn add element-plus
yarn add -D unplugin-vue-components unplugin-auto-import
```

[解决打包后Message等样式丢失问题](https://blog.csdn.net/Delete_89x/article/details/126430049)


![](assets/20230523_102440_image.png)

![](assets/20230523_102354_image.png)

# Axios

```shell
yarn add axios
```

文件下载

https://blog.csdn.net/qq_42919799/article/details/123479981


axios的参数默认就是封装好的。
data就是放在请求body里面，序列化成json格式。
params就是放在链接后面的编码格式。
也就是不需要自己拼接啥的，但是前提就是传入jsonObject对象。

# md5

https://github.com/satazor/js-spark-md5

![img.png](assets/md5.png)

typescript版本
https://www.npmjs.com/package/@types/spark-md5
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/spark-md5

```shell
npm install --save @types/spark-md5
```

```shell
npm install typescript
```

# 基础导航 升级到头部菜单

https://element-plus.gitee.io/zh-CN/component/menu.html

```javascript
      <el-header>
        <div id="nav">
          <router-link to="/">Home</router-link>|
          <router-link to="/file">File</router-link>
        </div>
      </el-header>
```

```javascript
      <el-header>
        <el-menu
            class="el-menu-demo"
            mode="horizontal"
            :default-active="this.$router.path"
            router
        >
          <el-menu-item index="/">
            Home
          </el-menu-item>
          <el-menu-item index="/file">
            File
          </el-menu-item>
        </el-menu>
      </el-header>
```

### Flex布局

批量删除和pagination同一行显示。

https://mp.weixin.qq.com/s/5t2MX2DYS1BKxRZJXJMqPQ

![img_1.png](assets/Menu.png)
![img.png](assets/Home.png)

# 状态管理

废弃vuex，直接使用pinia(官方视为vuex5) https://pinia.vuejs.org/zh/

```shell
npm install pinia
```

不推荐vuex
```
yarn add vuex@next --save  //  废弃，直接使用pinia
```

# 添加md5计算标识

目前框架不支持自定义状态

https://github.com/simple-uploader/vue-uploader/issues/83

这个fork的仓库是支持的。
https://github.com/lrfbeyond/vue-uploader
https://github.com/lrfbeyond/vue-uploader/commit/7a1f24fdc688b42b9fb6f6058d967813f1c22f72

![img.png](img.png)

# 添加统一格式化

https://prettier.io/docs/en/configuration.html

```shell
yarn add --dev --exact prettier
```

```javascript
    "eslint": "^7.23.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.8.0",
    "prettier": "^2.2.1",
```

https://juejin.cn/post/6938687606687432740

# console.log 或者 console.table

使用 + 连接，无法查看变量

```javascript
console.log("start mount1" + this.$refs.uploaderRef.uploader)
```

使用逗号连接，可以查看变量。

```javascript
console.log("加载的数据 " , res);
```

![](assets/20230522_205027_image.png)

# ElementPlus

## 消息编写优化

```javascript
  // ElMessage({
    //   message: '复制到粘贴板失败',
    //   type: 'error'
    // })
    ElMessage.error('复制到粘贴板失败')
```

# TODO

## 自适应布局开发

适配手机和电脑

```css
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .uploader-example {
    width: 300px;
   }
}

@media screen and (min-width: 600px) { /*当屏幕尺寸大于600px时，应用下面的CSS样式*/
  .uploader-example {
    width: 880px;
   }
}
```

## locatorjs

没成功

https://www.locatorjs.com/i

## vue-click-to-component

也没有成功

https://github.com/zjffun/vue-click-to-component

# tab闪动

这个margin :0 auto目的是为了居中，但是切换tab menu的时候，带来了不一样的值，造成了闪动的现象。

这个事项的目标是:居中和不闪动即可。

![](assets/20230522_111416_image.png)

![](assets/20230522_111316_image.png)

![](assets/20230522_111349_image.png)

主要发现是html和body两级的width有问题，大小还是不一。

解决办法：将html和body的宽度设置成100% 和 body设置 `overflow: hidden;`

```css
html, body {
  margin: 0;
  padding: 0;
}


body {
  overflow: hidden;
}

```

使用 `  overflow: hidden;`新问题就是 file页面的列表多了，下面就不显示了。直接隐藏了。

进一步发现这个bug只有部分电脑的部分浏览器会发生，同一个电脑换个浏览器也是可以正常的。