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包兼容性警告,但不影响项目运行。
# 检查Node.js版本
node -v
# 推荐显示: v18.12.1 或更高版本
其他要求
- npm >= 3.0.0
- 支持ES6+的现代浏览器
安装和运行
1. 克隆项目
git clone [项目地址]
cd jt360front
2. 安装依赖
npm install --legacy-peer-deps
# 或者使用yarn
# yarn install
3. 开发环境运行
npm run dev
# 或者使用yarn
# yarn dev
4. 生产环境构建
npm run build
# 或者使用yarn
# yarn build
Webpack 5 升级说明
项目已从Webpack 3.x升级到Webpack 5.x,主要解决了以下问题:
- 添加了Node.js核心模块(如Buffer、process)的polyfill
- 配置了fallback解析路径
- 使用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文件
主要功能模块
- 用户认证 - 登录、注册、微信登录
- 学习系统 - 课程管理、考试系统、每日练习
- 用户中心 - 个人信息、证书管理、密码修改
- 签到系统 - 二维码签到、签到记录
- 留言系统 - 留言发布、查看、管理
开发注意事项
- Node.js版本:支持Node.js 18.x版本
- 浏览器兼容性:支持现代浏览器,不支持IE8及以下版本
- 移动端适配:项目主要针对移动端开发,使用了Mint-UI组件库
- 依赖安装:建议使用
npm install --legacy-peer-deps
安装依赖以避免兼容性问题 - 浏览器兼容性:支持现代浏览器,不支持IE8及以下版本
- 移动端适配:项目主要针对移动端开发,使用了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版本:
# 安装指定版本
nvm install 18.12.1
nvm use 18.12.1
联系方式
- 作者:王觉贤
- 邮箱:615297896@qq.com
许可证
私有项目,未经授权不得使用。
Description
Languages
JavaScript
70.3%
Vue
28.1%
SCSS
1.5%