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

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

🚀 环境搭建

1. 基础环境要求

Node.js 环境

# 推荐版本
Node.js >= 12.0.0
npm >= 6.0.0

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

包管理器

# 使用 npm (推荐)
npm install

# 或使用 yarn
yarn install

# 或使用 pnpm
pnpm install

开发工具

• VS Code (推荐)
• WebStorm
• Chrome DevTools
• Vue DevTools

2. 项目初始化

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

# 安装依赖
npm install

# 启动开发服务器
npm run dev

⚙️ 配置文件详解

1. package.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

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

3. .eslintrc.js

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 配置

推荐扩展

{
  "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 支持
  ]
}

工作区设置

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.autoSave": "afterDelay",
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  }
}

2. 浏览器配置

Chrome DevTools

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

开发模式

// 在 main.js 中
Vue.config.devtools = true
Vue.config.productionTip = false

3. 环境变量配置

.env 文件

# .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=物业管理系统

使用环境变量

// 在组件中使用
console.log(process.env.VUE_APP_BASE_API)
console.log(process.env.VUE_APP_TITLE)

🚨 常见问题解决

1. 依赖安装问题

问题：npm install 失败

# 清除 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

问题：版本冲突

# 检查依赖版本
npm ls

# 强制安装
npm install --force

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

2. 开发服务器问题

问题：端口被占用

# 查看端口占用
netstat -ano | findstr :3000

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

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

问题：代理不工作

// 检查代理配置
devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8008',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
      logLevel: 'debug'  // 添加调试日志
    }
  }
}

3. 构建问题

问题：构建失败

# 清理构建缓存
npm run build -- --clean

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

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

问题：文件过大

// vue.config.js 配置代码分割
configureWebpack: {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial'
        }
      }
    }
  }
}

4. 代码质量问题

问题：ESLint 错误

# 自动修复
npm run lint -- --fix

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

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

问题：Prettier 格式化

# 安装 Prettier
npm install --save-dev prettier

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

🔍 调试技巧

1. 控制台调试

Vue 组件调试

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

网络请求调试

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

2. 断点调试

浏览器断点

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

条件断点

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

3. 性能调试

性能监控

// 监控方法执行时间
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. 响应式设计

媒体查询

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

Element UI 响应式

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

2. 触摸优化

触摸事件

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

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

🚀 性能优化

1. 代码分割

路由懒加载

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

组件懒加载

// 组件注册
components: {
  RoomTree: () => import('@/components/room/roomTree.vue')
}

2. 缓存策略

数据缓存

// 使用 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))
  }
}

组件缓存

<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>

📚 学习资源

1. 官方文档

• Vue 2 官方文档
• Element UI 文档
• Vue Router 文档

2. 社区资源

• Vue.js 社区
• Element UI 社区
• 掘金 Vue 专栏

3. 工具推荐

• Vue DevTools
• Vetur
• Vue Snippets

---

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

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