component-source-develop-temeplate

Vue2 + Webpack 项目模板

基于 webpack 构建的 Vue2 现代化前端工程模板，集成了完整的开发和构建配置。

✨ 特性

• ⚡ 快速构建: 基于 webpack，支持完整的开发和生产构建
• 🎯 Vue2 支持: 完整的 Vue2 生态系统支持
• 📦 组件化: 支持组件库形式的开发和发布
• 🎨 样式方案: 内置 Sass/SCSS 支持，支持样式模块化
• 🔧 开发体验: 热更新、代码分割、懒加载等
• 📱 多端适配: 支持响应式设计，适配不同设备
• 🛠 工程化: ESLint、Prettier、Git Hooks 等工程化工具
• 🧪 测试支持: Jest 单元测试框架
• 📈 性能优化: Tree-shaking、代码压缩、资源优化

🏗 技术栈

• 框架: Vue 2.7.x
• 构建工具: webpack + webpack-dev-server
• 语言: JavaScript/TypeScript
• 样式: Sass/SCSS + PostCSS
• 包管理: npm/yarn/pnpm
• 代码质量: ESLint + Prettier
• 测试框架: Jest

📁 项目结构

project/
├── public/                # 静态资源
├── src/                   # 源代码
│   ├── assets/           # 资源文件
│   ├── components/       # 业务组件
│   ├── views/           # 页面组件
│   ├── router/          # 路由配置
│   ├── utils/           # 工具函数
│   └── main.js          # 入口文件
├── scripts/              # 构建脚本
├── webpack.config.js     # webpack 配置
├── babel.config.js       # Babel 配置
├── package.json          # 项目配置
└── README.md            # 项目说明

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0 或 yarn >= 1.22.0

安装依赖

# 使用 npm
npm install --legacy-peer-deps

开发启动

# 启动开发服务器
npm run dev

# 启动开发服务器（超静默模式，过滤警告）
npm run dev:ultra-quiet

构建部署

# 生产构建
npm run build

# 预览构建结果
npm run preview

⚙️ 配置说明

webpack 配置

webpack.config.js 包含了完整的构建配置：

• 开发服务器: 热更新、代理配置
• 样式处理: Sass/SCSS 编译、PostCSS 处理
• 资源处理: 图片、字体等静态资源
• 代码分割: 动态导入、懒加载
• 优化配置: 代码压缩、Tree-shaking

环境变量

支持 .env 文件配置：

# .env.development
VUE_APP_API_URL=http://localhost:3000/api

# .env.production
VUE_APP_API_URL=https://api.example.com
VUE_ROUTER_BASE=/app/

路径别名

内置常用路径别名：

'@': 'src/',
'@components': 'src/components',
'@views': 'src/views',
'@utils': 'src/utils',
'@assets': 'src/assets'

🛠 技术栈详情

• webpack 全家桶
• Vue 2.7 + Vue Router
• Element UI (可选)
• Axios (HTTP 客户端)
• Sass/SCSS (样式预处理)
• ESLint + Prettier (代码规范)
• Jest (单元测试)

🐛 常见问题

开发服务器启动失败

检查端口是否被占用，或修改 webpack.config.js 中的端口配置。

样式文件导入失败

确保 Sass 文件正确导入，检查 webpack 配置中的 sass 设置。

组件库引用问题

确保组件库正确安装，检查 babel.config.js 中的组件库配置。

�� 许可证

MIT License