{"id":21022960,"url":"https://github.com/cklwblove/vue-cli3-template","last_synced_at":"2025-07-31T03:33:24.098Z","repository":{"id":34335835,"uuid":"157690152","full_name":"cklwblove/vue-cli3-template","owner":"cklwblove","description":":tada: 基于 vue-cli 搭建的前端模板","archived":false,"fork":false,"pushed_at":"2024-01-22T04:41:10.000Z","size":4868,"stargazers_count":125,"open_issues_count":11,"forks_count":46,"subscribers_count":3,"default_branch":"dev","last_synced_at":"2025-04-03T06:41:52.150Z","etag":null,"topics":["axios","vue","vue-cli3","vue-config","vue-router","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cklwblove.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-15T10:02:01.000Z","updated_at":"2025-02-20T08:52:46.000Z","dependencies_parsed_at":"2023-01-15T06:23:59.132Z","dependency_job_id":null,"html_url":"https://github.com/cklwblove/vue-cli3-template","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cklwblove%2Fvue-cli3-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cklwblove%2Fvue-cli3-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cklwblove%2Fvue-cli3-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cklwblove%2Fvue-cli3-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cklwblove","download_url":"https://codeload.github.com/cklwblove/vue-cli3-template/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254304645,"owners_count":22048446,"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":["axios","vue","vue-cli3","vue-config","vue-router","webpack4"],"created_at":"2024-11-19T11:15:34.149Z","updated_at":"2025-05-15T08:32:41.021Z","avatar_url":"https://github.com/cklwblove.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/cklwblove/vue-cli3-template)\n\n# [vue-cli3-template](https://github.com/cklwblove/vue-cli3-template)\n\n[![license](https://img.shields.io/badge/vue-2.5.17-brightgreen.svg)](https://github.com/vuejs/vue)\n[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/cklwblove/vue-cli3-template/blob/master/LICENSE)\n[![Build Status](https://travis-ci.org/cklwblove/vue-cli3-template.svg?branch=master)](https://travis-ci.org/cklwblove/vue-cli3-template)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcklwblove%2Fvue-cli3-template.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcklwblove%2Fvue-cli3-template?ref=badge_shield)\n![Alt](https://repobeats.axiom.co/api/embed/1558e9ced55af641ce5f50224e6b4486b8cf1c9d.svg \"Repobeats analytics image\")\n\n基于 vue-cli3 搭建的前端模板，fork 或 clone 本仓库(持续更新中...)\n\n**🛎️ 不建议用此作为项目的基础模板**\n\n**🚀 结合 vue-cli3 的 preset 搭建基于 git repo 的前端项目模板，可以移步 [vue-preset](https://github.com/cklwblove/vue-preset)**\n\n**🔥 或者直接使用 `npm init @winner-fed/project@2 my-project` 来初始化项目，文档详见 [create-project](https://cloud-templates.github.io/create-project)** \n\n## 特性\n\n- CSS 预编译语言：[less](http://lesscss.org/)\n\n- Ajax: [axios](https://github.com/axios/axios)，做了一定的封装，详见 `src/services/request.js`\n\n- SVG 雪碧图：[vue-svgicon](https://github.com/MMF-FE/vue-svgicon)\n\n- 移动 web 的适配方案：引入了 `postcss-pxtorem` 及 `lib-flexible`，可以自由地用 px 去开发\n\n- 常用的 js 工具类： [cloud-utils](https://cklwblove.github.io/cloud-utils/)\n\n- 引用 `style-resources-loader`：全局注入相关的`less`文件，如通用的 `variable`及 `mixins`等\n\n- 常用的 Less 的 mixins 集合：[magicless](https://github.com/cklwblove/magicless)\n\n- 支持根据 `npm scripts`，自动生成 `component` 和 `view` 功能\n\n- 支持采用`TinyPNG node.js API` 进行在线压缩`.jpg`或`.png`格式图片，并且转换`Webp`格式文件\n\n- 支持**断网处理**\n\n- 支持将 `webpack watch mode` 编译后文件自动上传至指定服务器，并在终端打印入口页面地址及生成二维码(**灵感来源：[@nutui/upload](https://www.npmjs.com/package/@nutui/upload)**)\n  - 运行 `vue-cli-service build`，以监听模式（watch mode）启动编译，并将编译后的文件**自动上传**到内网服务器 *(解决手动上传不便的问题)*\n  - 终端（命令行界面）打印出页面入口地址和二维码，手机扫码即可访问 *（解决手机录入地址不便的问题）*\n  - 监听文件，一旦保存修改，增量编译 *（解决全量编译速度慢的问题）*\n  - 将编译后且有变化的文件增量上传到内网服务器 *（解决全量上传速度慢的问题）*\n  - 在手机上刷新页面或重新扫码即可看到变化\n\n- 支持 `skeleton`，**骨架屏注入**\n\n- 支持**开发模式**下，终端打印入口页面地址及生成二维码，**依赖Wifi热点，手机设备和PC必须处在同一局域网**([vue-cli-plugin-qrcode](https://github.com/cklwblove/vue-cli-plugin-qrcode))\n\n- 引入 [plop](https://plopjs.com/),执行脚本 `npm run new` 自动生成 `view` 或者 `component` 模板文件(**灵感来源：[New](https://panjiachen.github.io/vue-element-admin-site/zh/feature/script/new.html)**)。\n\n- 支持根据 `views` 路径自动生成 `vue-router` 的路由（src/router/.invoke/router.js），且支持**热更新**。(**灵感来源**：[vue-router-invoke-webpack-plugin](https://github.com/cklwblove/vue-router-invoke-webpack-plugin))\n\n- 支持 `PWA`\n\n- ~~引用 [vue-cli-plugin-dll](https://www.npmjs.com/package/@liwb/vue-cli-plugin-dll)，支持 `webpack` 的 `Dll`、`DllReference`，加快**编译**速度。~~ 目前使用了 `CDN` 来加速\n\n- 生产环境移除 `console.log`(https://github.com/cklwblove/vue-cli3-template/issues/12)\n- `webp`图片优化技术项目中使用示例 (https://github.com/cklwblove/vue-cli3-template/issues/13)\n- 预渲染功能 (https://github.com/cklwblove/vue-cli3-template/tree/feature-prerender-spa)\n\n## 目录介绍\n\n```\n.\n├── build              # 生成压缩包\n├── public             # 静态资源，不需要 webpack 处理\n├── scripts            # npm scripts\n└── src\n    ├── assets\n    │   ├── fonts      # 字体文件\n    │   ├── img\n    │   ├── js         # 不经过 npm 或 yarn 下载的第三方依赖包\n    │   └── less       # reset 样式，及定义的常量文件等\n    ├── components\n    │   ├── SendCode   # tree shaking 组件\n    │   └── global     # 全局注册组件\n    ├── filters        # 全局过滤器\n    ├── icons          # svg 文件\n    │   └── svg\n    ├── router         # 路由及拦截器\n    ├── services       # 统一的服务接口请求处理\n    └── views\n        └── hello\n\n```\n\n\n## 开发及发布\n```\n# 克隆项目\ngit clone git@github.com:cklwblove/vue-cli3-template.git\n\n# 安装依赖\nyarn install\n\n# 可以通过如下操作解决 yarn 下载速度慢的问题\nyarn install --registry=https://registry.npm.taobao.org\n\n# 启动服务\nyarn run serve\n\n# 构建生产环境\nyarn run build\n\n# 压缩 dist 文件夹，生成 zip 包\nyarn run deploy\n\n# 自动生成 view or component\nyarn run new\n\n# 压缩图片\nyarn run compress\n\n# 生成 webp\nyarn run webp\n\n# css,less 文件代码检测\nyarn run lint:style\n\n# 骨架屏注入\nyarn run skeleton\n\n```\n\n浏览器访问 http://localhost:3000\n\n## 其他\n```\n\n# --report 生成静态报告文件\nyarn run report\n\n```\n\n## 相关链接\n\n- [vue-cli3官方文档](https://cli.vuejs.org/zh/)\n- [vue-cli 3.0 配置](https://blog.csdn.net/qq_35844177/article/details/81099492)\n- [chainWebpack](https://github.com/neutrinojs/webpack-chain#getting-started)\n- [[Vue CLI 3] 配置 webpack-bundle-analyzer 插件](https://segmentfault.com/a/1190000016247872)\n## License\n\n[MIT](https://github.com/cklwblove/vue-cli3-template/blob/master/LICENSE)\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcklwblove%2Fvue-cli3-template.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fcklwblove%2Fvue-cli3-template?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcklwblove%2Fvue-cli3-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcklwblove%2Fvue-cli3-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcklwblove%2Fvue-cli3-template/lists"}