# sdqx

**Repository Path**: mmkj/sdqx

## Basic Information

- **Project Name**: sdqx
- **Description**: 这是山东气象大屏展示项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-06-02
- **Last Updated**: 2026-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端模板工程

这是一个前端模板工程，旨在提供一个基础的、可扩展的开发框架，包含了常见的前端功能封装和配置，便于快速开发和搭建项目。以下是各个模块和文件夹的简要说明。

## 项目说明

> 使用了插件自动导入组件，所以组件命名需要清晰。
> 所有在styles文件夹中定义的各类变量、函数、混合可以在页面中直接使用，无需引入

### 1、使用 pnpm 作为包管理器

> 该项目统一使用 pnpm 作为包管理工具，代替了传统的 npm 或 yarn。pnpm 在安装依赖时更为高效，能够通过硬链接来减少磁盘空间占用，并且加速依赖的安装过程。

#### 安装 pnpm

如果你还没有安装 pnpm，可以通过以下命令进行安装：

```bash
npm install -g pnpm
```

#### 安装依赖

```bash
pnpm install
```

#### 运行开发环境

```bash
pnpm dev
```

### 2、 使用 SCSS 作为 CSS 预处理器

> 项目统一使用 SCSS（Sass）作为 CSS 预处理器，这提供了更强大的功能，例如嵌套、变量、mixins、函数等。所有样式文件均为 .scss 格式，并且通过 @import 或 @use 引入模块化的样式文件。

##### 配置 SCSS

项目中的 SCSS 文件都存放在 src/styles/ 文件夹内。

### 3、项目 base URL 配置在 .env 文件中

为了方便管理不同环境下的配置，项目中的 base URL 以及其他环境特定的设置都统一配置在 .env 文件中。这样做的好处是能够轻松地切换开发、测试、生产环境的配置，且不需要在代码中硬编码这些配置。

**配置 `.env` 文件**

项目中包含了多个环境配置文件，分别是：

- .env.development：用于开发环境的配置。
- .env.production：用于生产环境的配置。
- .env：默认配置文件，可以设置一些通用的环境变量。
  例如，你可以在 .env 文件中配置 API 基础 URL：

```env
VITE_API_BASE_URL=https://api.example.com   # 生产环境 API 地址
VITE_API_BASE_URL=http://localhost:3000   # 开发环境 API 地址
```

#### 在项目中使用 base URL 配置

在代码中，你可以通过 import.meta.env 获取到 .env 文件中的变量。以 API_BASE_URL 为例：

```js
const apiUrl = import.meta.env.VITE_API_BASE_URL;
```

这样，当你切换环境（例如从开发到生产环境）时，项目会自动使用不同的 base URL 配置，而无需修改代码中的 URL。

## 目录结构

## 1. `src/api/` - 接口文件夹

- 功能：封装与后端的交互逻辑，通过 request.js 进行统一管理。
- 扩展性：支持多个接口实例的配置，适应不同环境的接口地址（开发、生产环境等）。开发者只需修改 .env 文件中的接口地址，不必直接修改代码中的 API 路径。
  **配置方式：** - 在 `.env.development` 和 `.env.production` 文件中配置 API 基础路径。 - 通过 `request.js` 统一管理不同环境下的请求逻辑。

                    **多个接口实例**：如果有多个不同地址的接口，可以在 `request.js` 中增加新的实例。

## 2. `src/directives/` - 自定义指令

该文件夹包含了三个常用的 Vue 指令，并已在 `main.js` 中全局注册：

1. **数值动画指令**：实现数值变化的动画效果。
2. **无缝滚动指令**：用于实现无缝滚动的效果。
3. **条件动态插入图片指令**：在没有数据时显示提示图片。

## 3. `src/componets/` - 组件文件夹

该文件夹包含了多种类型组件：

1.  **布局组件**：基础的左中右布局组件。
2.  **通用组件**：比如通用大屏幕头部内容，全局弹窗组件。
    重点解释一下弹窗组件使用，自动居中的弹窗，支持拖拽，提供事件关闭弹窗功能。具体使用方法：

    - **打开弹窗**：

        ```js
        import { defineAsyncComponent } from "vue"; //异步加载组件
        import eventBus from "@/utils/eventBus"; // 引入事件总线

        const props = { message: "Hello, World!" }; // 组件的属性(可选)
        // 定义方法
        const openModal = (component, props) => {
            eventBus.emit("open-modal", { component, props });
        };

        // 使用
        openModal(
            defineAsyncComponent(() => import("@/components/demo.vue")), // 动态加载组件
            {
                props, //传入参数
            }
        );
        ```

    - **关闭弹窗**（在弹窗组件内）：
        ```vue
        <template>
            <div>
                关闭弹窗代码
                <div class="close" @click="$emit('close')">x</div>
                ...内容
            </div>
        </template>
        ```

## 4. `src/router/` - 路由文件夹

- **`index.js`**：路由配置的主文件，设置了路由实例并导出。
- **`modules/`**：路由模块化配置文件夹，将不同的路由配置分模块管理。

    你可以在 `modules/` 文件夹中添加新的路由配置，并在 `index.js` 中导入合并。

## 5. `src/store/` - 数据仓库

本项目使用 **Pinia** 作为状态管理工具，替代了 Vuex。具体使用方法可以参考 [Pinia 官方文档](https://pinia.vuejs.org/)。默认已提供了一个示例，便于快速上手。

## 6. `src/styles/` - 样式文件夹

该文件夹包含了项目的所有样式文件，包括但不限于：

1. **`_colors.scss`**：定义了项目中所有的颜色变量，方便统一管理。
2. **`_mixins.scss`**：定义了一些常用的 Sass mixins，减少重复样式代码。
3. **`_variables.scss`**：定义了常用的全局样式变量（如按钮文字大小、间距等）。
4. **`_transions.scss`**：定义了动画过渡样式。
5. **`element-variables.scss`**：自定义 Element UI 组件的全局样式变量。
6. **`fonts.scss`**：字体文件，已默认导入一些常用字体。
7. **`global.scss`**：全局样式，定义了基础的元素样式、滚动条样式、按钮、输入框等。

## 7. `src/utils/` - 工具文件夹

该文件夹包含了常用的工具类，便于在不同地方复用：

1. **`eventBus.js`**：事件总线，用于不同组件之间的通信，支持发送事件、接收事件、移除事件监听等功能。
2. **`formatDate.js`**：日期和时间工具，包括格式化时间、时间加减、时间向上或向下吸附到指定分钟数倍数等功能。

### 说明

- 这个 `README.md` 文件概述了整个项目的结构和各个模块的作用。
- 每个模块（如 `api`、`directives`、`layouts` 等）都给出了简要的说明，并提到如何修改或扩展功能。
- 提供了安装和运行项目的基本步骤，适合其他开发人员快速了解并使用该模板工程。

你可以根据具体项目需求进一步修改和补充此文档。