{"id":29228873,"url":"https://github.com/KyLeoHC/vue-startup","last_synced_at":"2025-07-03T11:02:14.513Z","repository":{"id":39558972,"uuid":"170958052","full_name":"KyLeoHC/vue-startup","owner":"KyLeoHC","description":"基于vue+webpack(+typescript)的示例项目","archived":false,"fork":false,"pushed_at":"2023-01-03T16:30:25.000Z","size":4577,"stargazers_count":20,"open_issues_count":26,"forks_count":4,"subscribers_count":1,"default_branch":"typescript","last_synced_at":"2025-04-14T12:52:55.469Z","etag":null,"topics":["babel-typescript","javascript","multi-page-application","single-page-applications","stylelint","typescript","typescript-eslint","vue-demo"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/KyLeoHC.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-02-16T03:25:51.000Z","updated_at":"2021-02-04T03:03:04.000Z","dependencies_parsed_at":"2023-02-01T07:46:07.502Z","dependency_job_id":null,"html_url":"https://github.com/KyLeoHC/vue-startup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KyLeoHC/vue-startup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyLeoHC%2Fvue-startup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyLeoHC%2Fvue-startup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyLeoHC%2Fvue-startup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyLeoHC%2Fvue-startup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KyLeoHC","download_url":"https://codeload.github.com/KyLeoHC/vue-startup/tar.gz/refs/heads/typescript","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyLeoHC%2Fvue-startup/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263314092,"owners_count":23447289,"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":["babel-typescript","javascript","multi-page-application","single-page-applications","stylelint","typescript","typescript-eslint","vue-demo"],"created_at":"2025-07-03T11:02:04.973Z","updated_at":"2025-07-03T11:02:14.417Z","avatar_url":"https://github.com/KyLeoHC.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vue-startup\n\n一个基于vue的示例项目，既是一个单页应用，也是一个多页应用。与此同时，也包含了一些项目的约束和规范。\n\n## 开发\n\n```bash\n# 克隆项目\ngit clone https://github.com/KyLeoHC/vue-startup.git\n\n# 安装依赖(如果不是为了更新依赖包，建议运行npm ci命令，确保依赖包的版本一致，尤其是测试和正式环境的打包)\nnpm i 或者 npm ci\n\n# 使用淘宝镜像\nnpm install --registry=https://registry.npm.taobao.org\n\n# 启动服务\nnpm run dev\n```\n\n浏览器访问[http://localhost:8089/dev/demo/list](http://localhost:8089/dev/demo/list)\n\n## 发布\n\n```bash\n# 构建打包开发环境\nnpm run build:dev\n\n# 构建打包测试环境\nnpm run build:test\n\n# 构建打包预生产环境\nnpm run build:pre\n\n# 构建打包生产环境\nnpm run build:prod\n```\n\n## 其它有用的命令或者选项\n\n```bash\n# 构建打包完成后展示模块分析结果\nnpm run build:prod --report\n\n# 运行ts的类型检查\nnpm run type-check\n\n# 运行ts的类型检查并且监控文件变化\nnpm run type-check:watch\n\n# 检查JS或者html模板代码格式\nnpm run lint\n\n# 自动纠正JS或者html模板代码格式\nnpm run lint -- --fix\n\n# 检查css/scss样式代码格式\nnpm run stylelint\n\n# 自动纠正css/scss样式代码格式\nnpm run stylelint -- --fix\n```\n\n## 目录结构说明\n\n```\n.\n├── build: 构建配置文件目录\n│   ├── loaders: 自定义loader放置的目录\n│   ├── plugins: 自定义插件目录(如果不想发布到npm的话)，就放置在这里面\n│   │   ├── flexible: 移动端的自适应方案插件\n│   │   └── omit-css-webpack-plugin: 抽离css插件\n│   │   ......\n├── config: 项目构建环境配置目录\n│   ├── config.dev.js: 开发环境的配置文件\n│   ├── config.pre.js: 预生产环境的配置文件\n│   ├── config.production.js: 生产环境的配置文件\n│   ├── config.test.js: 测试环境的配置文件\n│   └── index.js: 基础配置文件\n├── docs: 项目其它说明文档目录\n├── src: 项目源码目录\n│   ├── common: 项目全局通用代码目录(此目录下的通用代码是和本项目的业务息息相关的)\n│   │   ├── env.ts: 项目通用环境变量，比如请求的域名、静态资源访问路径等等\n│   │   ├── api.ts: 第三方页面url以及后端接口url统一存放处\n│   │   ├── http.ts: 项目通用请求函数，封装一些通用请求参数或者头部处理等等\n│   │   └── router.ts: 项目通用页面跳转函数，可实现跨子项目跳转(注意，此router非vue-router)\n│   ├── components: 项目全局通用组件目录\n│   ├── directives: 项目全局通用指令目录\n│   ├── lang: 项目全局通用国际化语言包目录\n│   ├── mock: 项目全局通用mock数据目录(如果采用mock系统，则此目录可忽略不要，比如easy-mock)\n│   ├── project: 项目主功能业务模块目录(可放置多个子项目，实现多页应用)\n│   │   ├── demo: 子项目目录\n│   │   │   ├── app.vue: 入口组件\n│   │   │   ├── app.ts: 入口组件的script部分ts代码\n│   │   │   ├── index.html: 入口html模板\n│   │   │   ├── index.ts: 入口启动文件\n│   │   │   ├── components: 当前子项目内公用的组件，如果其它子项目也可用，请把目标组件转移到全局组件目录\n│   │   │   ├── store: vuex的数据管理目录(内部代码结构参考vuex官方推荐的目录结构即可)\n│   │   │   ├── views: 子项目的vue视图代码目录\n│   │   │   ├── router: 路由配置目录(子项目也可以不用路由，那么这个目录可忽略)\n│   │   │   └── services: 子项目的服务代码目录(如果代码其它子项目可用，请将其挪到全局服务目录处)\n│   │   └── demo2: 子项目目录2\n│   │   ......\n│   ├── services: 项目全局通用服务代码目录\n│   ├── styles: 项目全局样式目录\n│   │   ├── common.scss\n│   │   ├── normalize.css\n│   │   └── theme.scss\n│   └── utils: 项目全局通用工具函数目录(此目录的通用代码是全部与业务逻辑解耦的，跨项目可通用)\n└── static: 项目静态资源放置目录\n    └── images: 项目图片资源放置目录\n```\n\n## 一些额外说明\n\n1. `services`目录的是各种服务代码，一个服务包括了数据获取、数据缓存、数据转换、相关业务处理等逻辑；\n\n2. `common`和`utils`两个目录有其相似的地方，都是一些全局通用函数或者工具函数，不同之处在于`common`目录的代码是带有当前项目业务性质的，跨项目不一定通用；\n\n3. 关于API数据模型的定义，如果我们期望统一处理后端的异常空数据(比如某个字段应该在没有数据的情况下返回空数组`[]`，但是实际却返回了`null`)，这种\n情况下我们会考虑使用`class`去定义数据模型，在`constructor`里取值判断再赋值或者使用`get`方法返回数据时处理，这里需要明确一点，在ts中，`class`会\n输出实际的代码，与此同时，由于我们也对后端返回的JSON数据又重新包装处理了一次，对内存占用和性能也带来了些影响(尤其数据量大的情况下)。所以，这里并不倡导统一使\n用`class`定义类型，对于一些不是很有必要统一处理空数据异常的，我们使用`interface`定义就好(`interface`不会输出任何代码，仅仅在开发时存在)，并且对一些可能\n空值的字段表明`null`或者`undefined`类型，让ts编译器提醒数据使用方此字段可能是空，让使用方加入空数据处理逻辑就好；\n\n4. 由于本项目的构建是基于babel7对ts的支持去实现，需要单独运行tsc命令去执行ts类型检查，但是由于目前ts的编译器本身是无法识别vue单文件组件里面的script代码，\n所以本项目所有vue组件的ts代码全部需要抽离出单独ts代码文件，再通过src属性引入。另外，babel7对于ts的支持并不是完美的，但是总体用起来问题不大，参阅\n[链接](https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/)。\n\n## 关于本项目\n\n本项目可以作为一个参考项目提供基于typescript+vue+webpack的前端环境搭建思路，但是建议充分了解本项目的构建配置方式，\n为的是后期可以根据公司业务的复杂度去进行高度定制化，或者根据所在团队成员的习惯进行改动。\n\n## 其它规范文档\n\n- [Git分支管理](https://github.com/KyLeoHC/vue-startup/blob/master/docs/git%E5%88%86%E6%94%AF%E7%AE%A1%E7%90%86.md)\n- [Git提交规范](https://github.com/KyLeoHC/vue-startup/blob/master/docs/git%E6%8F%90%E4%BA%A4%E8%A7%84%E8%8C%83.md)\n\n## License\n\n[MIT License](https://github.com/KyLeoHC/vue-startup/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKyLeoHC%2Fvue-startup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKyLeoHC%2Fvue-startup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKyLeoHC%2Fvue-startup/lists"}