# all-space

**Repository Path**: gfh_he/all-space

## Basic Information

- **Project Name**: all-space
- **Description**: 本项目是一个资源聚合网站，适合做个人资料展示，包括图片、视频、音频等
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-22
- **Last Updated**: 2024-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Nodejs, Express

## README

# 聚合空间

## 项目概述

本项目是一个资源聚合网站，适合做个人资料展示，包括图片、视频、音频等。该项目目前设计是纯前端，是比较适合vue初学者拿来练手的，项目仍在开发中...

## 技术栈

本项目采用了`vue2.0` + `vue Router`，组件库使用了[elementUI ](https://element.eleme.cn/#/zh-CN/component/installation)，网站数据采用的是[MOCKjs](http://mockjs.com/)设置的数据，数据请求使用的`axios`，文件存储采用的[七牛云](https://www.qiniu.com/)的免费云空间。


## 功能模块


- 首页

  ![](./public/md1.png)

- 详情页

  ![](./public/md2.png)

- 列表页

  待完善


## 页面结构

对每个页面进行详细的描述，包括页面的结构、布局、样式和交互等。(待完善)


## 数据结构和接口

描述项目中使用的数据结构和接口，包括数据的格式、获取和处理方式等。

> 在mock文件夹下有一mockjs文件来存储数据，可以生成随机数据、模拟请求方式、设置响应时间等

```js
// 设置响应时间
Mock.setup({
  timeout: '100-300ms' // Mock.js的响应时间在100-300ms之间。
})
// 生成随机数据
Mock.mock('/api/data', 'get', {
  'list|5-10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 1,
    'address': '@city'
  }]
})

// 请求数据
this.$http.get("/api/data").then((res) => {})
```




## 安装和部署

- 克隆项目

  ```git
  git clone https://gitee.com/gfh_he/all-space.git
  ```

- 安装包

  ```npm
  npm install
  ```

- 启动项目

  ```npm
  npm run dev
  ```

- 打包项目

  ```npm
  npm run build
  ```