{"id":28951277,"url":"https://github.com/zsts119/vue-cli-template","last_synced_at":"2025-06-23T14:18:12.395Z","repository":{"id":226155443,"uuid":"767907541","full_name":"ZsTs119/vue-cli-template","owner":"ZsTs119","description":"vue-cli-template (vue2+ multi-platform + auto-import)","archived":false,"fork":false,"pushed_at":"2025-06-19T07:45:49.000Z","size":164,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-19T08:40:05.135Z","etag":null,"topics":["auto-import","babel-plugin","cli","template","vue","vue2","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZsTs119.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-03-06T05:38:01.000Z","updated_at":"2025-06-19T07:45:52.000Z","dependencies_parsed_at":"2024-03-06T06:50:02.427Z","dependency_job_id":"5e6d54ed-9b46-416f-95ac-18b8e66bf95c","html_url":"https://github.com/ZsTs119/vue-cli-template","commit_stats":null,"previous_names":["zsts119/quick-setup-vue-cli-h5-pc","zsts119/vue-cli-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ZsTs119/vue-cli-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZsTs119%2Fvue-cli-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZsTs119%2Fvue-cli-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZsTs119%2Fvue-cli-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZsTs119%2Fvue-cli-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZsTs119","download_url":"https://codeload.github.com/ZsTs119/vue-cli-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZsTs119%2Fvue-cli-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261492000,"owners_count":23166684,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auto-import","babel-plugin","cli","template","vue","vue2","webpack"],"created_at":"2025-06-23T14:18:11.623Z","updated_at":"2025-06-23T14:18:12.385Z","avatar_url":"https://github.com/ZsTs119.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Vue CLI Template\n\n## 📋 项目概述\n\n这是一个专门针对打包配置进行优化的 Vue 脚手架模板，支持 PC 端和移动端 H5 应用开发。该模板具有以下特点：\n\n- ✅ 对打包配置进行了全面优化，提升应用性能\n- 📱 针对 H5 和 PC 场景分别提供了不同的启动命令\n- 🔄 封装了针对 Element UI 和 Vant 组件库的 Axios 请求\n- 🎨 集成了 SVG 图标组件系统\n- ⚡ 支持多环境配置和构建\n\n## 🛠️ 技术栈\n\n- 核心框架：Vue 2.x\n- UI 组件库：Element UI (PC 端)、Vant (移动端)\n- 状态管理：Vuex\n- 路由管理：Vue Router\n- HTTP 请求：Axios\n- 打包工具：Webpack (Vue CLI)\n\n## 🔧 项目配置\n\n### Webpack 配置亮点 (vue.config.js)\n\n```javascript\n// vue.config.js 主要优化配置\n\n// 1. 代码压缩和优化\n// - 生产环境使用CompressionPlugin进行Gzip压缩\n// - 使用TerserPlugin移除console.log和debugger\n// - 提取公共代码，减少重复\n\n// 2. 路径别名配置\nresolve: {\n  alias: {\n    '@': resolve('src'),\n    '@c': resolve('src/components'),\n    '@u': resolve('src/utils'),\n  }\n}\n\n// 3. 缓存优化\ncache: {\n  type: 'filesystem', // 使用文件系统级别的缓存\n  buildDependencies: {\n    config: [__filename]\n  }\n}\n\n// 4. 代码分割与优化\noptimization: {\n  usedExports: true, // 移除未使用代码\n  minimize: true,    // 代码压缩\n  splitChunks: {     // 分离公共模块\n    cacheGroups: {\n      vendors: {\n        test: /[\\\\/]node_modules[\\\\/]/,\n        name: 'vendors',\n        chunks: 'all',\n        minChunks: 2  // 至少被引用2次\n      }\n    }\n  },\n  concatenateModules: true // 作用域提升\n}\n\n// 5. SVG图标加载配置\n// 将SVG图标转换为Vue组件\n```\n\n### Babel 配置亮点 (babel.config.js)\n\n```javascript\n// 1. 按需加载polyfill，支持旧浏览器\n[\n  \"@babel/preset-env\",\n  {\n    useBuiltIns: \"usage\",\n    corejs: 3,\n  },\n][\n  // 2. 组件库按需加载\n  // Vant组件按需引入\n  (\"import\",\n  {\n    libraryName: \"vant\",\n    libraryDirectory: \"es\",\n    style: true,\n  })\n][\n  // Element UI组件按需引入\n  (\"component\",\n  {\n    libraryName: \"element-ui\",\n    styleLibraryName: \"theme-chalk\",\n  })\n];\n\n// 3. 开发环境优化\n// 动态导入节点加速热更新\n(\"dynamic-import-node\");\n// 可选链支持\n(\"@babel/plugin-proposal-optional-chaining\");\n```\n\n### PostCSS 配置 (postcss.config.js)\n\n针对 H5 环境，自动将 px 单位转换为 vw 单位，实现移动端适配：\n\n```javascript\n// H5环境下的视口配置\n'postcss-px-to-viewport': {\n  viewportWidth: 375, // 设计稿宽度\n  unitPrecision: 5,   // 转换精度\n  viewportUnit: 'vw', // 转换单位\n  minPixelValue: 1    // 最小转换像素\n}\n```\n\n## 📂 项目结构\n\n```\nvue-cli-template/\n├── public/               # 静态资源目录\n│   ├── index.html        # HTML模板\n│   └── ...\n├── src/                  # 源代码目录\n│   ├── assets/           # 资源文件\n│   │   └── icons/        # SVG图标\n│   ├── components/       # 公共组件\n│   │   ├── IconFont/     # 字体图标组件\n│   │   └── SvgIcon/      # SVG图标组件\n│   ├── router/           # 路由配置\n│   ├── store/            # Vuex状态管理\n│   ├── utils/            # 工具函数\n│   │   ├── auth.js       # 权限相关\n│   │   └── axios.js      # 请求封装\n│   ├── App.vue           # 根组件\n│   └── main.js           # 入口文件\n├── .env.*                # 环境变量配置文件\n├── babel.config.js       # Babel配置\n├── vue.config.js         # Vue CLI配置\n├── postcss.config.js     # PostCSS配置\n└── package.json          # 项目依赖\n```\n\n## 📦 主要功能\n\n### 1. 打包优化\n\n- ✂️ Tree Shaking：移除未使用代码\n- 🧵 多线程构建\n- 🗜️ 代码压缩和去除调试代码\n- 📊 Bundle 分析可视化\n- 💾 构建缓存加速\n\n### 2. 跨端适配\n\n- 📱 H5 环境自动启用 px 转 vw 适配\n- 💻 PC 环境保持原始尺寸\n- 🔄 根据环境自动切换 UI 组件库\n\n### 3. 组件库集成\n\n- 🖥️ PC 端集成 Element UI\n- 📱 移动端集成 Vant\n- 🔍 均支持按需加载\n\n### 4. SVG 图标系统\n\n使用方式：\n\n1. 将 SVG 文件放入`src/assets/icons/svg`目录\n2. 在组件中使用：`\u003csvg-icon class=\"icon-name\"\u003e\u003c/svg-icon\u003e`\n\n## 🚀 快速开始\n\n### 安装依赖\n\n```bash\nnpm install\n# 或\npnpm install\n```\n\n### 开发环境\n\n```bash\n# PC端开发\nnpm run dev\n\n# H5端开发\nnpm run dev:h5\n```\n\n### 构建生产版本\n\n```bash\n# PC端生产版本\nnpm run build:prod\n\n# H5端生产版本\nnpm run build:prod:h5\n```\n\n## 📝 项目配置环境说明\n\n- `dev`: 开发环境 (PC)\n- `devh5`: 开发环境 (H5)\n- `prod`: 生产环境 (PC)\n- `prodh5`: 生产环境 (H5)\n- `pre`: 预发布环境\n- `test`: 测试环境\n\n## 👨‍💻 关于作者\n\n```javascript\nconst author = {\n  nickName: \"ZsTs119\",\n  email: \"zsts@foxmail.com\",\n  site: \"https://github.com/ZsTs119\",\n};\n```\n\n## 🤝 贡献\n\n欢迎提交问题或改进建议！\n\n## 📄 许可\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzsts119%2Fvue-cli-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzsts119%2Fvue-cli-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzsts119%2Fvue-cli-template/lists"}