wuye / webui

  # 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)
  
  ---
  
  **配置完成后，你就可以开始愉快的开发之旅了！** 🎉
  
  如果遇到其他问题，请查看项目文档或联系团队成员。