203 lines
3.9 KiB
Markdown
203 lines
3.9 KiB
Markdown
|
# 开发环境配置指南
|
|||
|
|
|
|||
|
|
## 🖥️ 系统要求
|
|||
|
|
|
|||
|
|
### 基础环境
|
|||
|
|
- **操作系统**：Windows 10+, macOS 10.15+, Ubuntu 18.04+
|
|||
|
|
- **Node.js**：>= 18.0.0
|
|||
|
|
- **npm**：>= 8.0.0
|
|||
|
|
- **Git**：>= 2.20.0
|
|||
|
|
|
|||
|
|
### 数据库环境
|
|||
|
|
- **MySQL**：>= 8.0
|
|||
|
|
- **Redis**：>= 7.0
|
|||
|
|
|
|||
|
|
### 开发工具
|
|||
|
|
- **IDE**：VS Code（推荐）/ WebStorm / HBuilderX
|
|||
|
|
- **浏览器**：Chrome 90+ （开发调试）
|
|||
|
|
- **微信开发者工具**：最新版本（小程序开发）
|
|||
|
|
|
|||
|
|
## 🔧 环境安装
|
|||
|
|
|
|||
|
|
### 1. Node.js 安装
|
|||
|
|
```bash
|
|||
|
|
# 使用 nvm 管理版本（推荐）
|
|||
|
|
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
|
|||
|
|
nvm install 18
|
|||
|
|
nvm use 18
|
|||
|
|
|
|||
|
|
# 或直接下载安装
|
|||
|
|
# https://nodejs.org/
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 数据库配置
|
|||
|
|
```bash
|
|||
|
|
# MySQL 8.0
|
|||
|
|
# 连接信息：
|
|||
|
|
HOST: 129.211.213.226
|
|||
|
|
PORT: 9527
|
|||
|
|
USERNAME: root
|
|||
|
|
PASSWORD: aiotAiot123!
|
|||
|
|
DATABASE: jiebandata
|
|||
|
|
|
|||
|
|
# Redis（本地开发）
|
|||
|
|
HOST: localhost
|
|||
|
|
PORT: 6379
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 开发工具安装
|
|||
|
|
```bash
|
|||
|
|
# VS Code 推荐插件
|
|||
|
|
ext install ms-vscode.vscode-typescript-next
|
|||
|
|
ext install Vue.volar
|
|||
|
|
ext install bradlc.vscode-tailwindcss
|
|||
|
|
ext install esbenp.prettier-vscode
|
|||
|
|
ext install ms-vscode.vscode-eslint
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🚀 项目启动
|
|||
|
|
|
|||
|
|
### 全局依赖安装
|
|||
|
|
```bash
|
|||
|
|
# 安装全局工具
|
|||
|
|
npm install -g @vue/cli
|
|||
|
|
npm install -g serve
|
|||
|
|
npm install -g pm2
|
|||
|
|
npm install -g sequelize-cli
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 项目克隆和初始化
|
|||
|
|
```bash
|
|||
|
|
# 克隆项目
|
|||
|
|
git clone <repository-url>
|
|||
|
|
cd niumall
|
|||
|
|
|
|||
|
|
# 安装各模块依赖
|
|||
|
|
cd admin-system && npm install
|
|||
|
|
cd ../backend && npm install
|
|||
|
|
cd ../mini_program && npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 启动服务
|
|||
|
|
|
|||
|
|
#### 1. 后端服务
|
|||
|
|
```bash
|
|||
|
|
cd backend
|
|||
|
|
cp .env.example .env.development
|
|||
|
|
# 编辑环境变量
|
|||
|
|
npm run dev
|
|||
|
|
# 服务运行在 http://localhost:3001
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2. 管理后台
|
|||
|
|
```bash
|
|||
|
|
cd admin-system
|
|||
|
|
npm run dev
|
|||
|
|
# 服务运行在 http://localhost:3000
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 3. 官网
|
|||
|
|
```bash
|
|||
|
|
cd website
|
|||
|
|
python -m http.server 8080
|
|||
|
|
# 或 npx serve . -p 8080
|
|||
|
|
# 访问 http://localhost:8080
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 4. 小程序
|
|||
|
|
```bash
|
|||
|
|
cd mini_program/client-mp
|
|||
|
|
npm run dev:mp-weixin
|
|||
|
|
# 使用微信开发者工具打开 dist/dev/mp-weixin
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🔗 开发服务地址
|
|||
|
|
|
|||
|
|
| 服务 | 地址 | 说明 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| 后端API | http://localhost:3001 | Express服务 |
|
|||
|
|
| 管理后台 | http://localhost:3000 | Vue3应用 |
|
|||
|
|
| 企业官网 | http://localhost:8080 | 静态网站 |
|
|||
|
|
| 小程序 | 微信开发者工具 | uni-app应用 |
|
|||
|
|
|
|||
|
|
## 🛠️ 开发工具配置
|
|||
|
|
|
|||
|
|
### VS Code 配置
|
|||
|
|
```json
|
|||
|
|
// .vscode/settings.json
|
|||
|
|
{
|
|||
|
|
"typescript.preferences.importModuleSpecifier": "relative",
|
|||
|
|
"editor.formatOnSave": true,
|
|||
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
|||
|
|
"eslint.format.enable": true,
|
|||
|
|
"vetur.validation.template": false
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Git 配置
|
|||
|
|
```bash
|
|||
|
|
# 配置用户信息
|
|||
|
|
git config --global user.name "Your Name"
|
|||
|
|
git config --global user.email "your.email@example.com"
|
|||
|
|
|
|||
|
|
# 配置提交模板
|
|||
|
|
git config --global commit.template .gitmessage
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🔧 常见问题解决
|
|||
|
|
|
|||
|
|
### Node.js 版本问题
|
|||
|
|
```bash
|
|||
|
|
# 切换Node版本
|
|||
|
|
nvm use 18
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 端口冲突
|
|||
|
|
```bash
|
|||
|
|
# 检查端口占用
|
|||
|
|
netstat -ano | findstr :3000
|
|||
|
|
# 杀死进程
|
|||
|
|
taskkill /PID <PID> /F
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 数据库连接失败
|
|||
|
|
1. 检查数据库服务是否启动
|
|||
|
|
2. 验证连接参数
|
|||
|
|
3. 检查防火墙设置
|
|||
|
|
4. 确认网络连通性
|
|||
|
|
|
|||
|
|
### 依赖安装失败
|
|||
|
|
```bash
|
|||
|
|
# 清除缓存重新安装
|
|||
|
|
npm cache clean --force
|
|||
|
|
rm -rf node_modules package-lock.json
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📝 开发规范
|
|||
|
|
|
|||
|
|
### 代码提交规范
|
|||
|
|
```bash
|
|||
|
|
# 提交格式
|
|||
|
|
feat: 新功能
|
|||
|
|
fix: 修复bug
|
|||
|
|
docs: 文档更新
|
|||
|
|
style: 代码格式调整
|
|||
|
|
refactor: 代码重构
|
|||
|
|
test: 测试相关
|
|||
|
|
chore: 其他修改
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 分支管理
|
|||
|
|
- `main`: 主分支，生产环境代码
|
|||
|
|
- `develop`: 开发分支，集成测试
|
|||
|
|
- `feature/*`: 功能分支
|
|||
|
|
- `hotfix/*`: 紧急修复分支
|
|||
|
|
|
|||
|
|
## 📧 技术支持
|
|||
|
|
|
|||
|
|
- **开发环境问题**：dev@niumall.com
|
|||
|
|
- **数据库相关**：db@niumall.com
|
|||
|
|
- **部署相关**：ops@niumall.com
|
|||
|
|
- **技术交流群**：微信群-前端技术交流
|