主要变更包括: 1. 更新Babel配置,使用@babel/preset-env和@babel/plugin-transform-object-rest-spread。 2. 升级Webpack及相关插件,使用MiniCssExtractPlugin替代ExtractTextPlugin。 3. 更新package-lock.json和package.json,调整依赖版本。 4. 修改README.md,更新项目简介和环境要求。 5. 代码格式优化和错误处理增强,提升构建和开发体验。
147 lines
4.1 KiB
Markdown
147 lines
4.1 KiB
Markdown
# JT360 前端项目
|
||
|
||
## 项目简介
|
||
|
||
JT360是一个基于Vue.js 2.x的前端项目,使用Webpack 5.x作为构建工具。项目集成了Mint-UI组件库,支持移动端开发。
|
||
|
||
## 技术栈
|
||
|
||
- **Vue.js 2.5.2** - 前端框架
|
||
- **Vue Router 3.0.1** - 路由管理
|
||
- **Vuex 3.0.1** - 状态管理
|
||
- **Mint-UI 2.2.13** - 移动端UI组件库
|
||
- **Webpack 5.88.2** - 构建工具
|
||
- **Axios 0.17.1** - HTTP客户端
|
||
- **Sass** - CSS预处理器
|
||
- **buffer@6.0.3**、**process@0.11.10** - Node.js核心模块polyfill
|
||
|
||
## 环境要求
|
||
|
||
### Node.js版本要求
|
||
support Node.js 18.x 版本
|
||
|
||
> 注意:使用Node.js 18.x版本时,可能会遇到node-sass弃用警告和pkcs7包兼容性警告,但不影响项目运行。
|
||
|
||
```bash
|
||
# 检查Node.js版本
|
||
node -v
|
||
# 推荐显示: v18.12.1 或更高版本
|
||
```
|
||
|
||
### 其他要求
|
||
- npm >= 3.0.0
|
||
- 支持ES6+的现代浏览器
|
||
|
||
## 安装和运行
|
||
|
||
### 1. 克隆项目
|
||
```bash
|
||
git clone [项目地址]
|
||
cd jt360front
|
||
```
|
||
|
||
### 2. 安装依赖
|
||
```bash
|
||
npm install --legacy-peer-deps
|
||
# 或者使用yarn
|
||
# yarn install
|
||
```
|
||
|
||
### 3. 开发环境运行
|
||
```bash
|
||
npm run dev
|
||
# 或者使用yarn
|
||
# yarn dev
|
||
```
|
||
|
||
### 4. 生产环境构建
|
||
```bash
|
||
npm run build
|
||
# 或者使用yarn
|
||
# yarn build
|
||
```
|
||
|
||
## Webpack 5 升级说明
|
||
|
||
项目已从Webpack 3.x升级到Webpack 5.x,主要解决了以下问题:
|
||
1. 添加了Node.js核心模块(如Buffer、process)的polyfill
|
||
2. 配置了fallback解析路径
|
||
3. 使用ProvidePlugin全局提供对象
|
||
|
||
升级后可能存在的警告:
|
||
- node-sass弃用警告(建议未来迁移到sass/sass-embedded)
|
||
- pkcs7包引擎版本不兼容警告(建议未来更新此包)
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
jt360front/
|
||
├── config/ # 配置文件
|
||
├── src/ # 源代码
|
||
│ ├── components/ # 组件
|
||
│ │ ├── common/ # 公共组件
|
||
│ │ ├── login/ # 登录相关组件
|
||
│ │ ├── signin/ # 签到相关组件
|
||
│ │ ├── study/ # 学习相关组件
|
||
│ │ └── user/ # 用户相关组件
|
||
│ ├── assets/ # 静态资源
|
||
│ ├── router/ # 路由配置
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── vuex/ # 状态管理
|
||
│ └── weixin/ # 微信相关配置
|
||
├── static/ # 静态文件
|
||
└── index.html # 入口HTML文件
|
||
```
|
||
|
||
## 主要功能模块
|
||
|
||
- **用户认证** - 登录、注册、微信登录
|
||
- **学习系统** - 课程管理、考试系统、每日练习
|
||
- **用户中心** - 个人信息、证书管理、密码修改
|
||
- **签到系统** - 二维码签到、签到记录
|
||
- **留言系统** - 留言发布、查看、管理
|
||
|
||
## 开发注意事项
|
||
|
||
1. **Node.js版本**:支持Node.js 18.x版本
|
||
2. **浏览器兼容性**:支持现代浏览器,不支持IE8及以下版本
|
||
3. **移动端适配**:项目主要针对移动端开发,使用了Mint-UI组件库
|
||
4. **依赖安装**:建议使用`npm install --legacy-peer-deps`安装依赖以避免兼容性问题
|
||
2. **浏览器兼容性**:支持现代浏览器,不支持IE8及以下版本
|
||
3. **移动端适配**:项目主要针对移动端开发,使用了Mint-UI组件库
|
||
|
||
## 构建和部署
|
||
|
||
### 开发环境
|
||
- 访问地址:`http://localhost:8080`
|
||
- 支持热重载
|
||
- 自动打开浏览器
|
||
|
||
### 生产环境
|
||
- 执行 `yarn build` 生成dist目录
|
||
- 将dist目录内容部署到Web服务器
|
||
|
||
## 常见问题
|
||
|
||
### Q: 为什么使用Node.js 18.x版本会出现警告?
|
||
A: 主要是node-sass和pkcs7包的兼容性问题,这些警告不影响项目运行。未来计划迁移到sass/sass-embedded并更新pkcs7包。
|
||
|
||
### Q: 如何解决依赖安装冲突?
|
||
A: 建议使用`npm install --legacy-peer-deps`命令安装依赖。
|
||
|
||
### Q: 如何切换Node.js版本?
|
||
A: 推荐使用nvm(Node Version Manager)来管理Node.js版本:
|
||
```bash
|
||
# 安装指定版本
|
||
nvm install 18.12.1
|
||
nvm use 18.12.1
|
||
```
|
||
|
||
## 联系方式
|
||
|
||
- 作者:王觉贤
|
||
- 邮箱:615297896@qq.com
|
||
|
||
## 许可证
|
||
|
||
私有项目,未经授权不得使用。 |