# pine 

**Repository Path**: seaboot/pine

## Basic Information

- **Project Name**: pine 
- **Description**: 基于 vue3 的前端 web 应用，重点开发项目
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-05-04
- **Last Updated**: 2025-09-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# seaboot-pine

基于 vue3 的前端集成框架。

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

在做 vue2 升级的时候，我们是在追赶新技术，这次我们要主动拥抱最新的技术。

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

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

> 3、代码封装原则

这一套代码追求另一个极端：对于项目依赖，尽可能使用最新版本；当然，前提是组件之间无任何兼容问题。

> 4、typescript 支持

逐步支持 ts 语法，但是保留低版本代码兼容

#### 代码升级风险项

目前市场上，项目仍然以 vue2 居多，想全面的升级，条件暂不允许，很多东西只能凭经验设计。

想要用 vue3，需要升级 nodejs，一些项目依赖，升级的成本比较高；

比如：GIS 项目用到的 open-layer，对 nodejs 版本有较高要求，升级 nodejs 会产生兼容相关的报错；

#### 参考源码

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

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

#### 目录结构

* node_modules: npm 加载的项目依赖模块；

* public：静态资源目录，如图片、字体等；
* src：开发目录，源码主要存放路径；

* .xxxx 例如：.gitignore，主要是一些 IDE 的配置文件；
* Dockerfile：docker 打镜像的时候用到，未实际使用；
* index.html: 首页入口；
* LICENSE：当前工程授权文件；
* package.json 项目依赖文件；
* README.md 项目的说明文档，markdown 格式。
* tsconfig.json；ts 文件转普通 js 时用到的配置文件，目前主要使用 AI；
* vite.config.js vite构建工具的配置

#### src 核心目录

* src/assets：各类静态资源
* src/components：项目上的一些通用组件
* src/lang：基础工具，工具函数封装，几乎会被所有源码依赖
* src/router：路由
* src/starter：启动类，需要在启动时加载的代码一般放这儿
* src/view：界面，前端能看到的页面都放这儿
* src/widget：通用组件（element-ui拓展组件）

#### 镜像设置

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

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

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

#### 环境依赖

nodejs：nodejs-v22.12.0

#### Dependencies

对于第三方库的代码，有严格限制，通常情况下，不会引用第三方库，除非自己写不了。

即便引用了，也会进行二次封装，通常只会有 1 个组件与开源库耦合，

如果想进行升级、弃用，找到相关组件调整即可，业务部分的代码不做调整。

```text
{
    "@fortawesome/fontawesome-svg-core": "^6.7.1",          # font-awesome
    "@fortawesome/free-solid-svg-icons": "^6.7.1",          # font-awesome
    "@fortawesome/vue-fontawesome": "^3.0.8",               # font-awesome
    "quill": "^2.0.3",                                      # 富文本框          
    "axios": "^1.7.9"                                       # ajax
    "echarts": "^5.5.1",                                    # 图表
    "element-plus": "^2.7.6",                               # element-ui，基础组件库
    "highlight.js": "^11.11.0",                             # 代码高亮
    "moment": "^2.30.1",                                    # 日期工具
    "qrcode": "^1.5.4",                                     # 二维码
    "vue": "^3.4.29",                                       # vue
    "vue-router": "^4.0.13"                                 # 路由
}
``` 

#### 项目依赖

从零开始的构建过程，包含代码升级过程中用到的所有依赖。

```shell
# nodejs-v22.12.0 目前最新版本

# 构建基础项目
npm create vue@latest

# element-ui
npm install element-plus --save

# scss 支持
npm install -D sass-embedded
#npm install -g sass

# ts 支持
npm install -g typescript
# less 支持，用到的较少，可以尝试删除
npm install -D less

# fort-awesome 最新版本，语法发生变化，需要重新学习
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome

# fort-awesome 4.7.0 传奇版本，npm 安装无效，需要通过 <link/> 进行全局引入
npm install fortawesome@4.7.0

# ajax
npm install axios

# router
npm install vue-router@next

# 富文本框
npm install quill

# echarts 图表
npm install echarts --save

# 安装日期处理插件
npm install moment --save

# 二维码
npm install qrcode

# markdown 编辑器
npm install vditor --save

# gis
npm install ol
npm install proj4

# 比原生更加强大的视频播放器
npm install video.js

# IDE: 代码编辑器，包略大
npm install vue-codemirror
npm install @codemirror/lang-sql
npm install @codemirror/lang-java
npm install @codemirror/lang-javascript
npm install @codemirror/autocomplete
npm install @codemirror/theme-one-dark 
# IDE: 代码高亮
npm install --save highlight.js
```