# zyuas

> 响应式企业官方网站模板，使用 vue 全家桶开发

## 技术要点

``` bash
# bootstarp——整体框架，主要用到了栅格系统和一些组件

# swiper——轮播插件

# wow.js+animate.css——网站的整体动画插件

# axios——ajax 请求

# vue-router——路由

# vuex——状态管理（项目没有用到）

# session storage——本地存储

# 对可复用的组件进行了封装，对 api 接口进行了封装
```

---

## 依赖升级记录 (2026-02-25)

### 安全漏洞修复

| 依赖 | 原版本 | 升级后 | 说明 |
|------|--------|--------|------|
| axios | 0.18.0 | 0.27.2 | **修复多个安全漏洞** |

### 主要依赖升级

| 依赖 | 原版本 | 升级后 | 说明 |
|------|--------|--------|------|
| vue | 2.5.2 | 2.7.16 | Vue 2 最终版本 |
| vue-router | 3.0.1 | 3.6.5 | 最新兼容版本 |
| vuex | 3.0.1 | 3.6.2 | 最新兼容版本 |
| vue-template-compiler | 2.5.2 | 2.7.16 | 匹配 Vue 版本 |
| webpack | 3.6.0 | 4.47.0 | 重大版本升级 |
| webpack-dev-server | 2.9.1 | 3.11.3 | 兼容 webpack 4 |
| vue-loader | 13.3.0 | 14.2.4 | 兼容版本 |
| html-webpack-plugin | 2.30.1 | 4.5.2 | 兼容 webpack 4 |
| copy-webpack-plugin | 4.0.1 | 5.1.2 | 兼容 webpack 4 |
| css-loader | 0.28.0 | 3.6.0 | 最新稳定版 |
| url-loader | 0.5.8 | 4.1.1 | 最新兼容版本 |
| autoprefixer | 7.1.2 | 9.8.8 | 兼容 PostCSS 7 |
| postcss-loader | 2.0.8 | 3.0.0 | 兼容版本 |

### Babel 升级 (6.x → 7.x)

| 依赖 | 版本 | 说明 |
|------|------|------|
| @babel/core | 7.29.0 | Babel 7 核心 |
| @babel/preset-env | 7.29.0 | 智能预设 |
| @babel/plugin-transform-runtime | 7.29.0 | 运行时转换 |
| @babel/plugin-proposal-decorators | 7.29.0 | 装饰器支持 |
| @babel/plugin-proposal-class-properties | 7.18.6 | 类属性支持 |
| @babel/plugin-syntax-dynamic-import | 7.8.3 | 动态导入 |
| babel-loader | 8.4.1 | Webpack Babel 加载器 |
| @babel/runtime | 7.28.6 | 运行时辅助函数 |

### 配置文件变更

#### .babelrc
```json
{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  "plugins": [
    "@babel/transform-runtime",
    "transform-vue-jsx",
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
    ["@babel/plugin-transform-private-methods", { "loose": true }]
  ]
}
```

#### .gitignore (新增规则)
```
# Node.js
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Build outputs
dist/
build-output/
*.log
logs/

# Environment
.env
.env.local
.env.*.local

# Package archives
*.tar.gz
*.zip
*.tgz
```

### 构建警告说明

当前构建存在以下警告（**不影响功能**）：

1. **文件大小警告** - 部分图片文件超过 244 KiB 建议值
   - `static/img/sur1.png` (2.23 MiB)
   - `static/img/dji-card.png` (1.74 MiB)
   - `static/img/buil1.png` (2.01 MiB)
   - 等...
   
   **优化建议：**
   - 使用图片压缩工具（如 TinyPNG）
   - 考虑使用 WebP 格式
   - 对大图片使用 CDN 加速

2. **入口文件大小** - 主入口文件总大小 567 KiB
   
   **优化建议：**
   - 启用代码分割（已配置 splitChunks）
   - 懒加载路由组件
   - 提取公共代码

### 已知问题

1. **shelljs 警告** - `Accessing non-existent property` 警告
   - 原因：shelljs 内部使用
   - 影响：无，可安全忽略

2. **Babel loose 模式** - 已通过配置统一 loose 模式解决

### 测试命令

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 生产构建
npm run build
```

### 注意事项

- Node.js 版本建议 >= 14.0.0
- 构建产物在 `dist/` 目录，需通过 HTTP 服务器访问
- 图片资源较大，建议根据实际需求优化