# weather-screen

**Repository Path**: weena/weather-screen

## Basic Information

- **Project Name**: weather-screen
- **Description**: Smart City Weather Visual Large Screen
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2022-08-05
- **Last Updated**: 2024-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# System & Visual

## 项目简介

Pnpm Workspace MonoRepo

大屏可视化 + 系统管理平台

### 使用技术

vue3
socket.io
echarts

**样式部分**

sass
tailwindcss
unocss

**UI组件**

element-plus
ant-design-vue
headlessui

**构建相关**

vite4
unplugin-auto-import 自动引入
unplugin-vue-components 组件引入
@intlify/unplugin-vue-i18n/vite 国际化语言
vite-plugin-svg-icons SVG图标
vite-plugin-vue-inspector 根据元素跳转对应代码

**开发语言**

ts
tsx

### 目录结构

- packages
  - apis                => @lauset/apis 接口模块
  - server              => @lauset/server 服务端（暂时作为Socket服务,3003）
  - web                 => @lauset/web 网页模块
    - envs              => 环境配置
    - locales           => 国际化
    - src               => 项目源码
    - system            => 管理系统源码
    - visual            => 可视化大屏源码
    - types             => 类型声明
    - unocss.config.ts  => unocss 配置
    - vite.config.ts    => vite 配置
  - wui                 => @lauset/wui 自定义UI
- scripts
- .eslintrc.js
- tsconfig.json

packages 下所有模块 ts 配置分别继承根 tsconfig

### 自动引入

以下函数可全局使用

vue router i18n 导出的所有函数

vueuse 所有函数

axios 接口请求

dayjs 日期处理

getOptions 图标配置

MGJKAPI API请求

以下组件可全局使用

ElementPlus 所有组件

### 国际化配置

可在 web/locales 下 yml 文件中配置对应的语言文本

全局自动引入 vue-i18n 使用方式如下

```ts
const { t, locale } = useI18n()

const changeLang = (lang: string) => {
  locale.value = lang
}
```

## 项目操作

### 快速运行

安装依赖

```sh
# 进入 web 模块下
pnpm install

# 本地运行并监听其他模块
pnpm dev
```

### 具体脚本

**项目根目录执行**

```sh
# 清理依赖
pnpm clean

# 清理编译文件
pnpm clean:dist

# 编译UI wui
pnpm build:wui

# 编译接口 apis
pnpm build:apis

# 运行 web 模块
pnpm dev

# 打包 web 模块
pnpm build:web

# 递归编译
pnpm build
```

**apis 目录执行**

```sh
pnpm build

pnpm watch

pnpm clean
```

**server 目录执行**

node 执行

**web 目录下执行**

```sh
# 本地运行
pnpm dev

# 项目打包
pnpm build

# 本地预览
pnpm preview
```

**wui 目录执行**

暂时使用 es 模块引用结合 web 模块打包，不进行单独打包处理