@winjs-dev/create-win

# WinJS PC Web 模板一个基于 WinJS 框架的现代化 PC 端 Web 应用模板，提供完整的开发工具链和最佳实践配置。 ## 📋 项目简介本模板专为 PC 端 Web 应用开发而设计，集成了现代前端开发的最佳实践，包括代码规范、构建优化、开发体验等方面的完整解决方案。 ## 🚀 技术栈 ### 核心框架 - **Vue 3.2.x** - 渐进式 JavaScript 框架 - **Vue Router 4.x** - 官方路由管理器 - **WinJS** - 企业级前端开发框架 ### 开发工具 - **TypeScript 5.x** - 类型安全的 JavaScript 超集 - **Vite** - 下一代前端构建工具 - **Less** - CSS 预处理器 ### 代码质量 - **Biome** - 快速、零配置的代码格式化和 Linter 工具（替代 ESLint + Prettier） - **Stylelint** - CSS/Less 样式检查 - **F2ELint** - 前端代码规范工具 - **Husky** - Git hooks 管理 - **Lint-staged** - 暂存文件检查 ### 工程化 - **Cross-env** - 跨平台环境变量设置 - **Commitlint** - Git 提交信息规范检查 ## ✨ 功能特性 - 🎯 **开箱即用** - 预配置完整的开发环境 - 🔧 **工程化完备** - 集成代码规范、构建优化、部署流程 - 📱 **响应式设计** - 适配不同屏幕尺寸 - 🌐 **网络请求** - 基于 axios 的统一请求封装 - 🎨 **样式方案** - Less + CSS Modules 支持 - 📦 **模块联邦** - 支持微前端架构 - 🔍 **开发调试** - 完善的 Source Map 和热更新 - 🚀 **构建优化** - 代码分割、压缩、缓存策略 ## 🛠️ 快速开始 ### 环境要求 - Node.js >= 16.0.0 - npm >= 8.0.0 或 yarn >= 1.22.0 ### 安装依赖 ```bash # 使用 npm npm install # 使用 yarn yarn install ``` ### 开发调试 ```bash # 启动开发服务器 npm run dev # 或者 npm start ``` 访问 http://localhost:8000 查看应用 ### 构建部署 ```bash # 构建生产版本 npm run build # 预览构建结果 npm run preview ``` ## 📁 项目结构 ``` ├── src/ # 源代码目录 │ ├── assets/ # 静态资源 │ ├── icons/ # SVG 图标 │ ├── layouts/ # 布局组件 │ ├── pages/ # 页面组件 │ │ ├── hello/ # 示例页面 │ │ ├── index.vue # 首页 │ │ └── docs.vue # 文档页面 │ ├── services/ # 服务层 │ ├── app.js # 应用配置 │ ├── constant.js # 常量定义 │ └── global.less # 全局样式 ├── .winrc.ts # WinJS 配置文件 ├── package.json # 项目依赖配置 ├── tsconfig.json # TypeScript 配置 ├── biome.json # Biome 配置（代码格式化和 Linter） ├── .stylelintrc.js # Stylelint 配置 └── README.md # 项目说明文档 ``` ## 🔧 开发指南 ### 代码规范项目集成了完整的代码规范工具链： - **Biome**：用于 JavaScript/TypeScript 代码检查和格式化（替代 ESLint + Prettier） - **Stylelint**：用于 CSS/Less 代码检查 - **F2ELint**：用于前端代码规范检查 ```bash # 代码检查（Biome） npm run lint # 代码检查并自动修复（Biome） npm run lint:fix # 代码格式化（Biome） npm run format # F2ELint 扫描 npm run f2elint-scan # F2ELint 修复 npm run f2elint-fix ``` ### 环境配置在 `.winrc.ts` 中配置不同环境的 API 地址： ```typescript appConfig: { development: { API_HOME: 'https://api.github.com/', API_UPLOAD: 'https://api.github.com/upload' }, test: { API_HOME: 'https://test.github.com/', API_UPLOAD: 'https://test.github.com/upload' }, production: { API_HOME: 'https://production.github.com/', API_UPLOAD: 'https://production.github.com/upload' } } ``` ### 网络请求使用统一的请求封装，支持拦截器配置： ```javascript // 在 app.js 中配置请求拦截器 export const request = { timeout: TIMEOUT, requestInterceptors: [ [ (config) => { // 请求前处理 return httpRequest.success(config); }, (error) => { // 请求错误处理 return httpRequest.error(error); } ] ], responseInterceptors: [ [ (response) => { // 响应成功处理 return httpResponse.success(response); }, (error) => { // 响应错误处理 return httpResponse.error(error); } ] ] }; ``` ### 样式开发 - 支持 Less 预处理器 - 集成 MagicLess 工具库 - 支持全局变量和 mixins ```less // 在 .winrc.ts 中配置 Less lessLoader: { modifyVars: { 'hack': `true; @import "@/assets/style/variable.less";@import "@winner-fed/magicless/magicless.less";` } } ``` ## 📦 构建配置 ### 浏览器兼容性 ```javascript targets: { chrome: 51, firefox: 54, safari: 10, edge: 15 } ``` ### 构建优化 - **代码压缩**: 使用 Terser 压缩 JavaScript，cssnano 压缩 CSS - **模块联邦**: 支持微前端架构 - **Source Map**: 开发环境使用 cheap-source-map - **样式处理**: 开发环境内联 CSS，生产环境提取 CSS 文件 ## 🔍 调试与测试 ### 开发调试 - 热更新支持 - Source Map 调试 - 详细的错误信息 ### 代码质量检查项目配置了多层代码质量保障： 1. **提交前检查**: 通过 Husky 和 lint-staged 在提交前自动检查代码 2. **实时检查**: 编辑器集成 Biome、Stylelint 3. **CI/CD 集成**: 支持持续集成环境的代码检查 ## 📚 相关文档 - [WinJS 官方文档](https://winjs-dev.github.io/winjs-docs/) - [Vue 3 官方文档](https://vuejs.org/) - [Vue Router 4 文档](https://router.vuejs.org/) - [TypeScript 文档](https://www.typescriptlang.org/) ## 🆘 问题反馈如果您在使用过程中遇到问题，请通过以下方式反馈： 1. 提交 Issue 2. 查阅官方文档 --- **Happy Coding! 🎉**