MicroCommunityWeb/docs/开发环境配置指南.md

# HC物业管理系统 - 开发环境配置指南

## 🚀 环境搭建

### 1. 基础环境要求

#### Node.js 环境
```bash
# 推荐版本
Node.js >= 12.0.0
npm >= 6.0.0

# 检查版本
node --version
npm --version
```

#### 包管理器
```bash
# 使用 npm (推荐)
npm install

# 或使用 yarn
yarn install

# 或使用 pnpm
pnpm install
```

#### 开发工具
- **VS Code** (推荐)
- **WebStorm**
- **Chrome DevTools**
- **Vue DevTools**

### 2. 项目初始化

```bash
# 克隆项目
git clone [项目地址]
cd MicroCommunityWeb

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

## ⚙️ 配置文件详解

### 1. package.json

```json
{
  "name": "property_web",
  "version": "1.0.0",
  "scripts": {
    "dev": "vue-cli-service serve",        // 开发环境
    "build": "vue-cli-service build",      // 生产构建
    "lint": "vue-cli-service lint"         // 代码检查
  },
  "dependencies": {
    "vue": "^2.6.14",                      // Vue 2 核心
    "element-ui": "^2.15.6",               // UI 组件库
    "vue-router": "^3.5.1",                // 路由管理
    "axios": "^0.21.1",                    // HTTP 客户端
    "vue-i18n": "^8.26.7",                 // 国际化
    "echarts": "^5.6.0"                    // 图表库
  }
}
```

### 2. vue.config.js

```javascript
module.exports = {
  devServer: {
    port: 3000,                           // 开发服务器端口
    open: true,                           // 自动打开浏览器
    proxy: {                              // 代理配置
      '/app': {
        target: 'http://demo.homecommunity.cn/app',
        changeOrigin: true,
        pathRewrite: { '^/app': '' }
      }
    }
  }
}
```

### 3. .eslintrc.js

```javascript
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}
```

## 🔧 开发环境配置

### 1. VS Code 配置

#### 推荐扩展
```json
{
  "recommendations": [
    "Vue.volar",                    // Vue 2 支持
    "Vue.vscode-typescript-vue-plugin",
    "bradlc.vscode-tailwindcss",    // Tailwind CSS
    "esbenp.prettier-vscode",       // 代码格式化
    "ms-vscode.vscode-typescript-next",
    "formulahendry.auto-rename-tag", // 自动重命名标签
    "christian-kohler.path-intellisense", // 路径智能提示
    "ms-vscode.vscode-json"        // JSON 支持
  ]
}
```

#### 工作区设置
```json
{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.autoSave": "afterDelay",
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  }
}
```

### 2. 浏览器配置

#### Chrome DevTools
- 安装 Vue DevTools 扩展
- 启用网络面板监控
- 配置断点调试

#### 开发模式
```javascript
// 在 main.js 中
Vue.config.devtools = true
Vue.config.productionTip = false
```

### 3. 环境变量配置

#### .env 文件
```bash
# .env.development
NODE_ENV=development
VUE_APP_BASE_API=http://localhost:8008
VUE_APP_TITLE=物业管理系统(开发环境)

# .env.production
NODE_ENV=production
VUE_APP_BASE_API=https://api.example.com
VUE_APP_TITLE=物业管理系统
```

#### 使用环境变量
```javascript
// 在组件中使用
console.log(process.env.VUE_APP_BASE_API)
console.log(process.env.VUE_APP_TITLE)
```

## 🚨 常见问题解决

### 1. 依赖安装问题

#### 问题：npm install 失败
```bash
# 清除 npm 缓存
npm cache clean --force

# 删除 node_modules 和 package-lock.json
rm -rf node_modules package-lock.json

# 重新安装
npm install

# 或使用淘宝镜像
npm install --registry=https://registry.npmmirror.com
```

#### 问题：版本冲突
```bash
# 检查依赖版本
npm ls

# 强制安装
npm install --force

# 或使用 npm-check-updates 更新
npx npm-check-updates -u
npm install
```

### 2. 开发服务器问题

#### 问题：端口被占用
```bash
# 查看端口占用
netstat -ano | findstr :3000

# 杀死进程
taskkill /PID [进程ID] /F

# 或修改端口
# vue.config.js
devServer: {
  port: 3001
}
```

#### 问题：代理不工作
```javascript
// 检查代理配置
devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8008',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
      logLevel: 'debug'  // 添加调试日志
    }
  }
}
```

### 3. 构建问题

#### 问题：构建失败
```bash
# 清理构建缓存
npm run build -- --clean

# 检查构建日志
npm run build --verbose

# 或使用生产模式构建
NODE_ENV=production npm run build
```

#### 问题：文件过大
```javascript
// vue.config.js 配置代码分割
configureWebpack: {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial'
        }
      }
    }
  }
}
```

### 4. 代码质量问题

#### 问题：ESLint 错误
```bash
# 自动修复
npm run lint -- --fix

# 检查特定文件
npm run lint src/views/room/roomList.vue

# 忽略特定规则
// eslint-disable-next-line no-console
console.log('debug info')
```

#### 问题：Prettier 格式化
```bash
# 安装 Prettier
npm install --save-dev prettier

# 格式化代码
npx prettier --write "src/**/*.{js,vue,css,scss}"
```

## 🔍 调试技巧

### 1. 控制台调试

#### Vue 组件调试
```javascript
// 在组件中添加
mounted() {
  console.log('组件挂载完成:', this.$data)
  console.log('组件属性:', this.$props)
  console.log('组件方法:', this.$options.methods)
}
```

#### 网络请求调试
```javascript
// 在 request.js 中添加
service.interceptors.request.use(
  config => {
    console.log('请求配置:', config)
    return config
  },
  error => {
    console.error('请求错误:', error)
    return Promise.reject(error)
  }
)
```

### 2. 断点调试

#### 浏览器断点
```javascript
// 在代码中添加 debugger
methods: {
  handleSubmit() {
    debugger; // 浏览器会在这里暂停
    // 业务逻辑
  }
}
```

#### 条件断点
```javascript
// 只在特定条件下暂停
if (this.formData.id) {
  debugger; // 只在编辑模式下暂停
}
```

### 3. 性能调试

#### 性能监控
```javascript
// 监控方法执行时间
methods: {
  async fetchData() {
    const startTime = performance.now()
    
    try {
      const data = await this.api.getData()
      console.log('数据获取成功:', data)
    } catch (error) {
      console.error('数据获取失败:', error)
    } finally {
      const endTime = performance.now()
      console.log(`方法执行时间: ${endTime - startTime}ms`)
    }
  }
}
```

## 📱 移动端开发

### 1. 响应式设计

#### 媒体查询
```scss
// 移动端样式
@media (max-width: 768px) {
  .table-container {
    overflow-x: auto;
  }
  
  .form-item {
    margin-bottom: 15px;
  }
}
```

#### Element UI 响应式
```vue
<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <!-- 响应式列 -->
    </el-col>
  </el-row>
</template>
```

### 2. 触摸优化

#### 触摸事件
```javascript
// 添加触摸支持
mounted() {
  if ('ontouchstart' in window) {
    this.isMobile = true
    this.initTouchEvents()
  }
},

methods: {
  initTouchEvents() {
    // 触摸事件处理
  }
}
```

## 🚀 性能优化

### 1. 代码分割

#### 路由懒加载
```javascript
// 路由配置
{
  path: '/room/list',
  component: () => import('@/views/room/roomList.vue')
}
```

#### 组件懒加载
```javascript
// 组件注册
components: {
  RoomTree: () => import('@/components/room/roomTree.vue')
}
```

### 2. 缓存策略

#### 数据缓存
```javascript
// 使用 localStorage 缓存
methods: {
  getCachedData(key) {
    const cached = localStorage.getItem(key)
    if (cached) {
      return JSON.parse(cached)
    }
    return null
  },
  
  setCachedData(key, data) {
    localStorage.setItem(key, JSON.stringify(data))
  }
}
```

#### 组件缓存
```vue
<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>
```

## 📚 学习资源

### 1. 官方文档
- [Vue 2 官方文档](https://v2.vuejs.org/)
- [Element UI 文档](https://element.eleme.cn/)
- [Vue Router 文档](https://router.vuejs.org/)

### 2. 社区资源
- [Vue.js 社区](https://vuejs.org/community/)
- [Element UI 社区](https://github.com/ElemeFE/element)
- [掘金 Vue 专栏](https://juejin.cn/tag/Vue.js)

### 3. 工具推荐
- [Vue DevTools](https://github.com/vuejs/devtools)
- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
- [Vue Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)

---

**配置完成后，你就可以开始愉快的开发之旅了！** 🎉

如果遇到其他问题，请查看项目文档或联系团队成员。