# base-ui

**Repository Path**: attacker/base-ui

## Basic Information

- **Project Name**: base-ui
- **Description**: vue前端基础模版. (Gitea同步镜像库)
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: dev-layout-demo
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-31
- **Last Updated**: 2025-02-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: Logan.Li
 * @Gitee: https://gitee.com/attacker
 * @email: admin@attacker.club
 * @Date: 2024-07-29 01:34:26
 * @LastEditTime: 2024-07-30 00:00:07
 * @Description: 
-->
# Vue 3 + Vite


## 前端模块

| 技术                 | 说明                    | 官网                                                                             |
| -------------------- | ----------------------- | -------------------------------------------------------------------------------- |
| Vue3                 | 前端框架                | [https://cn.vuejs.org](https://cn.vuejs.org)                                   |
| Vue-router           | 路由框架                | [https://router.vuejs.org](https://router.vuejs.org)                           |
| Vuex                 | 全局状态管理框架        | [https://vuex.vuejs.org](https://vuex.vuejs.org)                               |
| Element-plus         | 前端 UI 框架            | [https://element-plus.org](https://element-plus.org)                   |
| Axios                | 前端 HTTP 框架          | [https://github.com/axios/axios](https://github.com/axios/axios)                 |                      |
| Echarts | Apache ECharts 开源可视化图表库 | [https://echarts.apache.org](https://echarts.apache.org)                             |
| Js-cookie            | cookie 管理工具         | [https://github.com/js-cookie/js-cookie](https://github.com/js-cookie/js-cookie) |
| nprogress            | 进度条控件              | [https://github.com/rstacruz/nprogress](https://github.com/rstacruz/nprogress)   |
| xterm                | 命令行终端              | [https://github.com/xtermjs/xterm.js](https://github.com/xtermjs/xterm.js)       |

### 项目结构

```text
project
├── .env.development          # 环境变量配置文件，用于在开发环境
├── .env.production           # 环境变量配置文件，用于在生产环境
├── Dockerfile                # 用于构建Docker镜像
├── nginx.conf                # Nginx配置文件，用于dockerfile时替换自定义配置
├── package.json              # 用于管理项目依赖和脚本的文件，包含了项目的基本信息和依赖项列表
├── README.md                 # 项目的说明文档
├── src
│   ├── main.js               # Vue.js应用程序的入口文件
│   ├── App.vue               # Vue.js应用程序的根组件，包含了应用程序的整体布局,全局样式和逻辑
│   ├── api                   # 定义使用axios库进行网络请求的文件
│   ├── assets                # 存放静态资源文件，如图片、字体等
│   ├── components            # 存放通用组件的封装，可以在各个页面中被引用
│   ├── icons                 # 存放SVG矢量图片文件
│   ├── router                # 存放Vue-Router路由配置文件
│   ├── store                 # 存放Vuex的状态管理文件，用于管理应用程序的状态
│   ├── styles                # 存放全局CSS样式文件
│   ├── utils                 # 存放工具类文件，可以在应用程序中使用
│   └── views                 # 存放前端页面文件
│       ├── login             # 存放登录页相关文件
│       ├── dashboard         # 存放首页相关文件
│       └── layout            # 存放通用页面加载框架，显示通用的页面布局
└── ...                       # 其他文件和目录

```

## 搭建步骤

```bash
# 安装vue3
npm install -g @vue/cli # 全局安装vue
vue create .   # 在当前目录建立项目; use PNPM Or NPM

# 将相关依赖安装在当前目录
npm install
# 运行本地开发环境 OR npm run dev
npm run serve
# 编译构建静态资源
npm run build
# 检查/修复文件
npm run lint

# 使用yarn管理依赖
npm install -g yarn
yarn
yarn add less-loader

# 使用pnpm方式
# 安装依赖
pnpm install
# 运行项目
pnpm dev
```



## git分支管理

```bash
# 查看tag
git tag

# 创建分支
git branch dev-layout-demo
git checkout dev-layout-demo

# 查看当前所在分支
git branch

# 删除分支
git branch -d vue-layout-dev

# 合并分支
git checkout main
git merge dev-layout-demo

# 推送分支或tag到远程仓库
git add .
git commit -m 'init'
git push origin dev-layout-demo
```

## Docker部署

```bash
docker build -f Dockerfile -t ui-base:test  .
docker run -p80:80 --rm ui-base:test
```