@winjs-dev/create-win 1.0.0-alpha.2

package/templates/app/.cursor/rules/vue.mdc

@@ -0,0 +1,86 @@
+---
+description: Vue.js best practices and patterns for modern web applications
+globs: **/*.vue, **/*.ts, components/**/*
+---
+
+# Vue.js Best Practices
+
+## Component Structure
+- Use Composition API over Options API
+- Keep components small and focused
+- Use proper TypeScript integration
+- Implement proper props validation
+- Use proper emit declarations
+- Keep template logic minimal
+
+## Composition API
+- Use proper ref and reactive
+- Implement proper lifecycle hooks
+- Use composables for reusable logic
+- Keep setup function clean
+- Use proper computed properties
+- Implement proper watchers
+
+## State Management
+- Use Pinia for state management
+- Keep stores modular
+- Use proper state composition
+- Implement proper actions
+- Use proper getters
+- Handle async state properly
+
+## Performance
+- Use proper component lazy loading
+- Implement proper caching
+- Use proper computed properties
+- Avoid unnecessary watchers
+- Use proper v-show vs v-if
+- Implement proper key management
+
+## Routing
+- Use Vue Router properly
+- Implement proper navigation guards
+- Use proper route meta fields
+- Handle route params properly
+- Implement proper lazy loading
+- Use proper navigation methods
+
+## Forms
+- Use v-model properly
+- Implement proper validation
+- Handle form submission properly
+- Show proper loading states
+- Use proper error handling
+- Implement proper form reset
+
+## TypeScript Integration
+- Use proper component type definitions
+- Implement proper prop types
+- Use proper emit declarations
+- Handle proper type inference
+- Use proper composable types
+- Implement proper store types
+
+## Testing
+- Write proper unit tests
+- Implement proper component tests
+- Use Vue Test Utils properly
+- Test composables properly
+- Implement proper mocking
+- Test async operations
+
+## Best Practices
+- Follow Vue style guide
+- Use proper naming conventions
+- Keep components organized
+- Implement proper error handling
+- Use proper event handling
+- Document complex logic
+
+## Build and Tooling
+- Use Vite for development
+- Configure proper build setup
+- Use proper environment variables
+- Implement proper code splitting
+- Use proper asset handling
+- Configure proper optimization 

package/templates/app/.editorconfig.tpl

@@ -0,0 +1,23 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=true
+trim_trailing_whitespace=true
+indent_style=space
+indent_size=2
+
+[{.eslintrc,.babelrc,.stylelintrc,*.json}]
+indent_style=space
+indent_size=2
+
+[*.less]
+indent_style=space
+indent_size=2
+
+[*.{js,jsx,ts,tsx,vue}]
+indent_style=space
+indent_size=2
+

package/templates/app/.eslintignore

@@ -0,0 +1,13 @@
+node_modules/
+config/
+public/
+src/assets/
+/src/.win
+/src/.win-production
+/src/.win-test
+/.win
+/.win-production
+/.win-test
+/dist
+/dist-zip
+

package/templates/app/.eslintrc.js

@@ -0,0 +1,9 @@
+// http://eslint.org/docs/user-guide/configuring
+// http://eslint.cn/docs/user-guide/configuring 中文，注意版本是否和官网一致
+module.exports = {
+  extends: [
+    '@winner-fed/eslint-config-win',
+    '@winner-fed/eslint-config-win/vue3',
+    './.eslintrc-auto-import.json'
+  ]
+};

package/templates/app/.gitignore.tpl

@@ -0,0 +1,55 @@
+/node_modules
+/.env.local
+/.winrc.local.ts
+/config/config.local.ts
+/src/.win
+/src/.win-production
+/src/.win-test
+/src/.huipro
+/.win
+/.win-production
+/.win-test
+/.huipro
+/dist
+/dist-zip
+/.mfsu
+.swc
+components.d.ts
+auto-imports.d.ts
+f2elint-report.json
+
+.DS_Store
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+.eslintrc-auto-import.json
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+.project
+.happypack
+.history
+
+/package
+/docker/html
+

package/templates/app/.husky/commit-msg

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# 以下选择一个即可
+npx --no-install win verify-commit-hs $1
+#npx f2elint commit-msg-scan

package/templates/app/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install lint-staged --quiet
+npx f2elint commit-file-scan

package/templates/app/.lintstagedrc.tpl

@@ -0,0 +1,5 @@
+{
+  "*.{md,json}": ["prettier --cache --write"],
+  "*.{vue,js,jsx,css,less,scss}": ["win lint --fix", "prettier --cache --write"],
+  "*.ts?(x)": ["win lint --fix", "prettier --cache --parser=typescript --write"]
+}

package/templates/app/.npmrc.tpl

@@ -0,0 +1,2 @@
+registry={{{ registry }}}
+{{{ extraNpmrc }}}

package/templates/app/.prettierignore

@@ -0,0 +1,13 @@
+**/*.svg
+output.js
+src/assets/
+dist/**
+public/**
+src/services/RESTFULURL.js
+src/icons
+src/.win
+src/.win-production
+.npmrc
+.yarnrc
+node_modules
+

package/templates/app/.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@winner-fed/prettier-config-win'),
+  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-packagejson']
+}

package/templates/app/.stylelintignore

@@ -0,0 +1,6 @@
+node_modules/
+config/
+dist/
+src/assets/fonts/
+public/
+

package/templates/app/.stylelintrc.js

@@ -0,0 +1,16 @@
+// https://stylelint.io/
+// https://stylelint.docschina.org/ 中文网站，注意版本是否和官网一致
+module.exports = {
+  extends: ['@winner-fed/stylelint-config-win', 'stylelint-config-prettier'],
+  // Less 语法检测
+  customSyntax: 'postcss-less',
+  overrides: [
+    {
+      files: ['*.html', '**/*.html', '*.htm', '**/*.htm', '*.vue', '**/*.vue'],
+      customSyntax: 'postcss-html'
+    }
+  ],
+  rules: {
+    'font-family-no-missing-generic-family-keyword': 'off'
+  }
+};

package/templates/app/.winrc.ts.tpl

@@ -0,0 +1,95 @@
+// https://winjs-dev.github.io/winjs-docs/config/config.html
+import { defineConfig } from '@winner-fed/winjs';
+
+export default defineConfig({
+  npmClient: '{{{ npmClient }}}',
+  history: {
+    type: 'hash'
+  },
+  plugins: ['@winner-fed/plugin-request', '@winner-fed/plugin-wconsole'],
+  /**
+   * @name request 配置，可以配置错误处理
+   * @description 它基于 axios 和 VueHookPlus 的 useRequest 提供了一套统一的网络请求和错误处理方案。
+   * @doc https://winjs-dev.github.io/winjs-docs/plugins/request.html
+   */
+  request: {},
+  /**
+   * @name wconsole 配置
+   * @description 移动端调试工具
+   * @doc https://winjs-dev.github.io/winjs-docs/plugins/wconsole.html
+   */
+   wconsole: {
+    vconsole: {}
+   },
+  /**
+   * @name appConfig 配置
+   * @description 可以配置前端工程运行的配置文件 `config.local.js` 里内容。
+   * @doc https://winjs-dev.github.io/winjs-docs/config/config.html#appconfig
+   */
+  appConfig: {
+    // 本地调试环境
+    development: {
+      API_HOME: 'https://api.github.com/',
+      API_UPLOAD: 'https://api.github.com/upload',
+      // vconsole 开关
+      IS_OPEN_VCONSOLE: true
+    },
+    // 测试环境
+    test: {
+      API_HOME: 'https://test.github.com/',
+      API_UPLOAD: 'https://test.github.com/upload',
+      // vconsole 开关
+      IS_OPEN_VCONSOLE: true
+    },
+    // 生产环境
+    production: {
+      API_HOME: 'https://production.github.com/',
+      API_UPLOAD: 'https://production.github.com/upload',
+      // vconsole 开关
+      IS_OPEN_VCONSOLE: false
+    }
+  },
+  /**
+   * @name icons 配置
+   * @description svg icon 的相关配置
+   * @doc https://winjs-dev.github.io/winjs-docs/config/config.html#icons
+   */
+  icons: {},
+  /**
+   * @name 开启 REM 适配能力
+   * @description 一键开启 REM 适配能力，能够根据屏幕大小来动态调整字体大小，让网页在不同大小的屏幕上都能够自适应显示。
+   * @doc https://winjs-dev.github.io/winjs-docs/config/config.html#converttorem
+   */
+  convertToRem: {},
+  /**
+   * @name banner 配置
+   * @description 为构建的静态资源（JS、CSS 文件）的头部或尾部注入内容的能力。
+   * @doc https://winjs-dev.github.io/winjs-docs/config/config.html#banner
+   */
+  banner: true,
+  targets: { ios: 10, android: 6, chrome: 80 },
+  /**
+   * @name <less> less-loader 里的配置
+   * @description 全局注入变量及 mixins
+   */
+  lessLoader: {
+    modifyVars: {
+      // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+      'hack': `true; @import "@/assets/style/variable.less";@import "@winner-fed/magicless/magicless.less";`
+    }
+  },
+  title: '{{{ projectName }}}',
+  mountElementId: '{{{ appContainerName }}}',
+  mfsu: {
+    shared: {
+      vue: {
+        singleton: true,
+        eager: true
+      }
+    }
+  },
+  // 开发使用内联CSS，生产使用构建的CSS文件
+  styleLoader: process.env.NODE_ENV === 'production' ? false : {},
+  // 开发使用 cheap-source-map
+  devtool: process.env.NODE_ENV === 'development' ? 'cheap-source-map' : false
+});

package/templates/app/README.md

@@ -0,0 +1,244 @@
+# WinJS App 模板
+
+> 基于 WinJS 框架的现代化 H5 应用开发模板，提供完整的开发工具链和最佳实践。
+
+## 📋 项目简介
+
+WinJS App 模板是一个开箱即用的 H5 应用开发脚手架，集成了现代前端开发的最佳实践和工具链。该模板专为移动端 H5 应用设计，提供了完整的开发、构建、部署解决方案。
+
+### ✨ 特性
+
+- 🚀 **现代化技术栈**：基于 Vue 3.2+ 和 Vue Router 4.x
+- 📱 **移动端优化**：内置 REM 适配和移动端调试工具
+- 🛠️ **完整工具链**：集成 ESLint、Prettier、StyleLint 等代码质量工具
+- 🔧 **插件化架构**：支持请求拦截、移动端调试等插件
+- 📦 **模块联邦**：支持微前端架构和模块共享
+- 🎨 **样式解决方案**：支持 Less 预处理器和全局样式注入
+- 🔄 **热更新**：开发环境支持快速热更新
+- 📊 **性能优化**：内置构建优化和缓存策略
+
+## 🛠️ 技术栈
+
+### 核心框架
+
+- **Vue 3.2+** - 渐进式 JavaScript 框架
+- **Vue Router 4.x** - Vue.js 官方路由管理器
+- **TypeScript 5.0+** - JavaScript 的超集，提供静态类型检查
+
+### 构建工具
+
+- **WinJS** - 基于 Webpack、Rsbuild、Vite 多构建工具的现代化开发元框架
+- **Webpack** - 模块打包器
+- **Babel** - JavaScript 编译器
+
+### 样式处理
+
+- **Less** - CSS 预处理器
+- **PostCSS** - CSS 后处理器
+- **MagicLess** - 样式工具库
+
+### 代码质量
+
+- **ESLint** - JavaScript 代码检查工具
+- **Prettier** - 代码格式化工具
+- **StyleLint** - CSS 代码检查工具
+- **F2ELint** - 前端代码规范工具
+
+### 开发工具
+
+- **Husky** - Git hooks 工具
+- **lint-staged** - 暂存文件检查工具
+- **commitlint** - Git 提交信息规范检查
+
+## 🚀 快速开始
+
+### 环境要求
+
+- 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 run build
+
+# 预览构建结果
+npm run preview
+
+# 代码检查
+npm run lint
+
+# 代码格式化
+npm run format
+
+# F2ELint 扫描
+npm run f2elint-scan
+
+# F2ELint 修复
+npm run f2elint-fix
+```
+
+## 📁 项目结构
+
+```
+├── src/                    # 源代码目录
+│   ├── assets/            # 静态资源
+│   │   ├── fonts/         # 字体文件
+│   │   ├── img/           # 图片资源
+│   │   └── style/         # 样式文件
+│   ├── components/        # 公共组件
+│   ├── icons/             # SVG 图标
+│   ├── layouts/           # 布局组件
+│   ├── pages/             # 页面组件
+│   ├── services/          # 网络请求服务
+│   ├── utils/             # 工具函数
+│   ├── app.js             # 应用配置文件
+│   ├── constant.js        # 常量定义
+│   └── global.less        # 全局样式
+├── public/                # 公共静态资源
+├── .winrc.ts              # WinJS 配置文件
+├── package.json           # 项目依赖配置
+├── tsconfig.json          # TypeScript 配置
+└── README.md              # 项目说明文档
+```
+
+## ⚙️ 配置说明
+
+### WinJS 配置 (.winrc.ts)
+
+项目使用 `.winrc.ts` 文件进行配置，主要配置项包括：
+
+- **路由配置**：支持 hash 和 history 模式
+- **插件配置**：请求插件、移动端调试插件等
+- **环境配置**：开发、测试、生产环境的 API 地址配置
+- **样式配置**：Less 变量注入、REM 适配等
+- **构建配置**：模块联邦、源码映射等
+
+### 环境配置
+
+项目支持多环境配置：
+
+- **development**：本地开发环境
+- **test**：测试环境
+- **production**：生产环境
+
+每个环境可以配置不同的 API 地址、调试工具开关等。
+
+## 🔌 插件系统
+
+### 内置插件
+
+1. **@winner-fed/plugin-request**
+
+   - 基于 axios 的网络请求解决方案
+   - 支持请求/响应拦截器
+   - 统一错误处理机制
+
+2. **@winner-fed/plugin-wconsole**
+
+   - 移动端调试工具
+   - 支持 vConsole 集成
+   - 可配置开启/关闭
+
+## 📱 移动端适配
+
+### REM 适配
+
+项目内置 REM 适配方案，自动根据屏幕尺寸调整字体大小，确保在不同设备上的显示效果一致。
+
+### 兼容性
+
+- iOS >= 10
+- Android >= 6
+- Chrome >= 80
+
+## 🎨 样式规范
+
+### Less 预处理器
+
+- 支持 Less 语法和功能
+- 全局变量和 mixins 注入
+- 集成 MagicLess 工具库
+
+### 样式组织
+
+- 全局样式：`src/global.less`
+- 组件样式：与组件文件同目录
+- 变量文件：`src/assets/style/variable.less`
+
+## 📝 开发规范
+
+### 代码规范
+
+- 遵循 ESLint 规则
+- 使用 Prettier 进行代码格式化
+- StyleLint 检查 CSS 代码质量
+
+### Git 提交规范
+
+项目使用 Conventional Commits 规范：
+
+```
+<type>(<scope>): <subject>
+
+[optional body]
+
+[optional footer]
+```
+
+类型包括：
+
+- `feat`: 新功能
+- `fix`: 修复 bug
+- `docs`: 文档更新
+- `style`: 代码格式调整
+- `refactor`: 代码重构
+- `test`: 测试相关
+- `chore`: 构建过程或辅助工具变动
+
+### 组件开发规范
+
+- 组件名使用大驼峰命名
+- 每个组件包含 `.vue`、`.less`、`index.ts` 文件
+- 组件应具有良好的可复用性和可维护性
+
+## 🔧 常见问题
+
+### 1. 如何添加新页面？
+
+在 `src/pages/` 目录下创建新的 `.vue` 文件，路由会自动生成。
+
+### 2. 如何配置 API 地址？
+
+在 `.winrc.ts` 文件的 `appConfig` 部分配置不同环境的 API 地址。
+
+### 3. 如何添加全局样式？
+
+在 `src/global.less` 文件中添加全局样式，或在 `src/assets/style/` 目录下创建样式文件。
+
+### 4. 如何使用 SVG 图标？
+
+将 SVG 文件放在 `src/icons/` 目录下，通过配置自动生成图标组件。
+
+## 📚 相关文档
+
+- [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/)
+
+**注意**：本模板持续更新中，建议定期查看最新版本以获取新特性和修复。

package/templates/app/commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@winner-fed/commitlint-config-win/hs']
+};

package/templates/app/f2elint.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  enableESLint: true,
+  enableStylelint: true,
+  enableMarkdownlint: false,
+  enablePrettier: true
+};

package/templates/app/package.json.tpl

@@ -0,0 +1,34 @@
+{
+  "name": "{{{ projectName }}}",
+  "version": "1.0.0",
+  "buildVersion": "V202101-00-000",
+  "private": true,
+  "author": "{{{ author }}}",
+  "scripts": {
+    "dev": "win dev",
+    "build": "cross-env WIN_APP_ENV=production win build",
+    "lint": "win lint",
+    "f2elint-scan": "f2elint scan --include src",
+    "f2elint-fix": "f2elint fix --include src",
+    "format": "prettier --write \"src/**/*.{js,jsx,json,ts,tsx,css,less,scss,vue,html,md}\" \"package.json\"",
+    "postinstall": "win setup",
+    "prepare": "husky install",
+    "setup": "win setup",
+    "start": "npm run dev",
+    "preview": "win preview"
+  },
+  "dependencies": {
+    "@winner-fed/cloud-utils": "^2.0.1",
+    "@winner-fed/magicless": "*",
+    "@winner-fed/winjs": "{{{ version }}}"
+  },
+  "devDependencies": {
+    "@winner-fed/plugin-request": "^1.0.1",
+    "@winner-fed/plugin-wconsole": "^1.0.0",
+    "@winner-fed/f2elint": "^3.0.0",
+    "cross-env": "^7.0.3",
+    "husky": "8.0.3",
+    "lint-staged": "13.2.3",
+    "typescript": "^5.0.3"
+  }
+}

package/templates/app/plugin.ts.tpl

@@ -0,0 +1,23 @@
+import type { IApi } from '@winner-fed/winjs';
+
+export default (api: IApi) => {
+  api.modifyHTML(($) => {
+    return $;
+  });
+
+  // meta 添加缓存参数
+  api.addHTMLMetas(() => [
+    {
+      'http-equiv': 'Cache-Control',
+      'content': 'no-store, no-cache, must-revalidate'
+    },
+    {
+      'http-equiv': 'Pragma',
+      'content': 'no-cache'
+    },
+    {
+      'http-equiv': 'Expires',
+      'content': '0'
+    }
+  ]);
+};