# seaboot-web

**Repository Path**: seaboot/web

## Basic Information

- **Project Name**: seaboot-web
- **Description**: 基于 vue2 的前端 web 应用，目前以 vue3 的项目为主，代码迭代较慢
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-12-16
- **Last Updated**: 2025-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Element-UI

## README

# seaboot-web

基于 element-ui 的前端集成框架。

> 1、为什么开启这个项目？

在旧的项目中，我采用 layui.js + require.js 的模式，最近发现，贤心已经放弃 layui 了，

ES6 既然是大势所趋，没什么好坚持的了。

> 2、为什么不直接使用市面上成熟的集成框架？（类似于：vue-admin）

如人饮水，冷暖自知，需要什么只有自己知道，项目现在就是一个零，索性抱着学习的想法从头开始。

> 3、为啥 element-ui 版本这么低

大部分依赖，我们都升级到最新版本，但是 element-ui 仍然使用旧的，主要是因为这个版本好看源代码。

> 4、终版

暂停这个项目的维护，最近后台引入 problem+json 的设计，前端需要做较大调整，后续会逐渐向 Vue3 转换。

#### Dependencies

对于第三方库的代码，有严格限制，通常情况下，不会引用第三方库，除非自己写不了。
即便引用了，也会进行二次封装，通常只会有1个组件与开源库耦合，
如果遇到版本升级、或者弃用，找到相关组件调整即可，业务部分的代码不做调整。

```text
{
    "async-validator": "latest",                # 表单校验
    "axios": "^1.3.4",                          # Ajax
    "chromedriver": "^99.0.0",                  # 浏览器驱动，项目默认组件，不管它
    "default-passive-events": "^2.0.0",         # 兼容 Chrome 事件捕获机制：Passive Event Listeners
    "echarts": "^5.3.3",                        # 图表
    "element-ui": "^2.13.2",                    # element-ui
    "express": "^4.17.3",                       # 项目默认组件，不管它
    "font-awesome": "^4.7.0",                   # icon库
    "highlight.js": "^11.5.1",                  # 代码高亮，用于展示代码
    "moment": "^2.29.4",                        # 用于处理日期
    "ol": "^6.15.1",                            # open-layer 地图，因为兼容问题，无法使用最新版本
    "proj4": "^2.12.0",                         # open-layer 4490 坐标系插件
    "qrcodejs2": "0.0.2",                       # 生成二维码
    "vue": "^2.7.14",                           # vue
    "vue-fragment": "^1.6.0",                   # 一个空的标签，方便代码封装
    "vue-meditor": "^2.1.2",                    # markdown 编辑器
    "vue-quill-editor": "^3.0.6",               # 富文本框
    "vue-router": "^3.0.1"                      # 路由
}
``` 

#### 参考源码

参考了一些开源 UI 框架的 css样式：

AdminLTE-2.4.3 

代码集中在 product.css文件中。

#### 镜像设置

```text
# 查询当前使用的镜像源
npm get registry

# 设置为淘宝镜像源
npm config set registry https://registry.npmmirror.com/

# 还原为官方镜像源
npm config set registry https://registry.npmjs.org/
```

#### 目录结构

1. build	        项目构建(webpack)相关代码；
2. config      	    配置目录，包括端口号等，初学默认即可；
3. node_modules	    npm 加载的项目依赖模块；
4. src	            开发目录；
5. static	        静态资源目录，如图片、字体等；
6. .xxxx	        例如：.gitignore，主要是一些配置文件；
7. index.html	    首页入口；
8. package.json	    项目配置文件；
9. README.md	    项目的说明文档，markdown 格式。