| 静态网站开发框架 | 健壮静态网站搭建 | WEB环境小结 | PowerShell 环境支持 | 浏览器发展 | 浏览器 | AutoCAD下python部署 | pyautocad部署 | Win11系统配置 | Python安装及环境配置 | 常用软件参考链接 | kimi官网 | DeepSeek |

ERBCC 项目开发环境总结与使用指南

一、环境概述

技术栈

系统环境

二、项目结构

X:\erbcc
├── node_modules/      # 项目依赖
├── public/            # 静态资源目录
├── src/               # 源代码目录
│   ├── assets/        # 图片、字体等资源
│   ├── components/    # Vue 组件
│   ├── pages/         # 页面组件
│   ├── styles/        # 样式文件
│   │   └── main.css   # 主样式文件
│   ├── App.vue        # Vue 根组件
│   ├── main.js        # 应用入口文件
│   └── index.html     # 主页面
├── .gitignore         # Git 忽略配置
├── package.json       # 项目配置和依赖
├── vite.config.js     # Vite 配置文件
└── postcss.config.js  # PostCSS 配置文件

三、开发环境使用指南

1. 启动开发服务器

npm run dev  

2. 常用开发命令

3. 添加新依赖

# 添加生产依赖

npm install <package-name> --save
# 添加开发依赖
npm install <package-name> --save-dev

4. 创建新组件

  

    
vue
  

  
复制代码
<template>

<div class="my-component">

<!-- 组件内容 -->

</div>

</template>
<script>
export default {
  name: 'MyComponent',
  // 组件逻辑
}
</script>
<style scoped>
/* 组件样式 */
</style>

5. 创建新页面

6. 添加样式

• • 四、配置说明

    vite.config.js 核心配置

    
              
    
                
    javascript
                
              
    
                
    复制代码
                
    import { defineConfig } from 'vite'
    
                import vue from '@vitejs/plugin-vue'
    export default defineConfig({
      root: 'src',          // 项目根目录
      publicDir: 'public',  // 静态资源目录
      plugins: [vue()],     // Vue 插件
      
      build: {
        outDir: '../dist',  // 构建输出目录
        emptyOutDir: true,  // 构建前清空目录
        assetsInlineLimit: 0 // 资源内联限制
      },
      
      server: {
        port: 3000,         // 开发服务器端口
        open: true,         // 启动时自动打开浏览器
        cors: true          // 启用 CORS
      },
      
      css: {
        postcss: './postcss.config.js' // PostCSS 配置
      }
    })
            

    postcss.config.js 配置

    
              
    
                
    javascript
                
              
    
                
    复制代码
                
    module.exports = {
      plugins: [
        require('autoprefixer'), // 自动添加浏览器前缀
        // 可添加更多 PostCSS 插件
      ]
    }
    
            

    五、最佳实践

    开发建议

    1. 组件设计:

       • 保持组件小型化、单一职责
       • 使用组合式API (Composition API)
       • 合理使用 props 和 emits

    2. 状态管理:

       • 小型项目使用 reactive/ref
       • 中大型项目使用 Pinia

    3. 性能优化:

       • 使用 v-if 和 v-show 合理切换
       • 大型列表使用虚拟滚动
       • 图片资源优化（压缩、懒加载）

    调试技巧

    1. 浏览器开发者工具:

       • Vue Devtools 插件必备
       • 网络面板查看请求
       • 控制台查看日志

    2. Vite 控制台命令:

       • h + Enter: 显示帮助
       • r + Enter: 重启服务器
       • u + Enter: 显示服务器URL
       • q + Enter: 退出服务器

    六、生产部署

    构建生产版本

    npm run build  
            

    • 输出目录: dist/
    • 包含:
      • 压缩优化的 HTML、CSS、JS
      • 静态资源
      • 自动生成的哈希文件名（缓存优化）

    部署方式

    1. 传统部署:

       • 将 dist/ 内容上传到 Web 服务器
       • 配置服务器重定向规则:

       • location / {    try_files $uri $uri/ /index.html;  }  
                         

    2. Docker 容器化部署:

       # Dockerfile
       
                   FROM node:20-alpine as builder
       
                   WORKDIR /app
       
                   COPY package*.json ./
       
                   RUN npm ci
       
                   COPY . .
       
                   RUN npm run build
       FROM nginx:alpine
       COPY --from=builder /app/dist /usr/share/nginx/html
       EXPOSE 80
       CMD ["nginx", "-g", "daemon off;"]
                   

    3. 云平台部署:

       • Vercel
       • Netlify
       • AWS Amplify

    七、常见问题解决

    1. 依赖安装问题

    # 清除缓存并重装
    npm cache clean --force
    rm -rf node_modules package-lock.json
    npm install --registry=https://registry.npmmirror.com
            

    2. 端口冲突

    修改 vite.config.js:

    
              
    
                
    javascript
                
              
    
                
    复制代码
                
    server: {
      port: 3001 // 更换端口
    }
            

    3. 组件热更新失效

    • 确保组件有正确的 name 属性
    • 检查文件名大小写（建议全小写）

    4. 生产环境路由问题

    • 确保服务器配置了 history 模式回退
    • 或改用 hash 模式路由

    八、扩展能力

    添加 TypeScript 支持

  • 安装依赖:

  npm install typescript @vitejs/plugin-vue-jsx --save-dev  
      

  2. 创建 tsconfig.json:

  
        
  
          
  json
        
      
  
        
  复制代码
      
  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "strict": true,
      "jsx": "preserve",
      "moduleResolution": "node",
      "esModuleInterop": true,
      "sourceMap": true,
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  }
      

  3. 重命名 .js 文件为 .ts，更新 vite.config.js 配置

  添加路由 (Vue Router)

  
        
  
          
  bash
        
      
  
        
  复制代码
      
  npm install vue-router@4  
      

  创建 src/router/index.js:

  
        
  
          
  javascript
        
      
  
        
  复制代码
      
  import { createRouter, createWebHistory } from 'vue-router'
  const routes = [
    { path: '/', component: () => import('@/pages/Home.vue') },
    { path: '/about', component: () => import('@/pages/About.vue') }
  ]
  export default createRouter({
    history: createWebHistory(),
    routes
  })
      

  九、维护与更新

  定期更新

  
        
  
          
  bash
        
      
  
        
  复制代码
      
  # 检查过时包  npm outdated    # 更新依赖  npm update    # 更新 npm 本身  npm install -g npm@latest  
      

  代码质量

  1. 提交前检查:

     
               
     
                 
     bash
               
               
     
                 
     复制代码
               
     npm run lint  npm run format  
             

  2. Git 钩子 (使用 husky):

     
               
     
                 
     bash
               
               
     
                 
     复制代码
               
     npx husky-init && npm install  
             

  3. 单元测试 (使用 Vitest):

     
               
     
                 
     bash
               
               
     
                 
     复制代码
               
     npm install vitest @vue/test-utils --save-dev  
             

  十、资源参考

  1. Vite 官方文档
  2. Vue 3 文档
  3. PostCSS 插件列表
  4. npm 中文镜像

  此开发环境为您提供了现代化的前端开发体验，结合了 Vite 的极速构建能力和 Vue 的响应式框架。祝您在 ERBCC 项目开发中取得成功！

| 主页 | 道路检索 | 资源目录 | 道路设计指引 | 服务支持