{"id":15110291,"url":"https://github.com/baixiaoji/vue-ts","last_synced_at":"2026-01-17T03:46:58.248Z","repository":{"id":76728353,"uuid":"148874999","full_name":"baixiaoji/vue-ts","owner":"baixiaoji","description":" 🌈vue with typescript","archived":false,"fork":false,"pushed_at":"2018-10-23T15:27:12.000Z","size":265,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-11T13:54:52.929Z","etag":null,"topics":["element-ui","typescript2","vue","webpack4"],"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/baixiaoji.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}},"created_at":"2018-09-15T06:06:55.000Z","updated_at":"2018-10-23T15:27:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"49c3d478-5178-4d39-ba2a-fe2d59b26a99","html_url":"https://github.com/baixiaoji/vue-ts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baixiaoji%2Fvue-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baixiaoji%2Fvue-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baixiaoji%2Fvue-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baixiaoji%2Fvue-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baixiaoji","download_url":"https://codeload.github.com/baixiaoji/vue-ts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369937,"owners_count":20927927,"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":["element-ui","typescript2","vue","webpack4"],"created_at":"2024-09-25T23:43:59.214Z","updated_at":"2026-01-17T03:46:58.206Z","avatar_url":"https://github.com/baixiaoji.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-ts\n\n\u003e using typesciprt in vue project by vue-cli@2.9.3.\n\n## If you want to play the same way, follow beflow steps:\n\n``` bash\n# create dir\nmkdir text-dir \u0026\u0026 cd text-dir\n# create file by vue-cli\nnpx vue-cli -- init vuejs-templates/webpack .\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n```\n\nyou can also see some error in [issue](https://github.com/baixiaoji/vue-ts/issues?q=is%3Aissue+is%3Aclosed), and you can see the solve in [commit](https://github.com/baixiaoji/vue-ts/commits/master).\n\n# 如何使用「老」脚手架搭建 TS 的 vue 项目\n\n## 为什么是「老」脚手架？\n\n因为一直没有关心过脚手架的版本问题(实际不知道脚手架已更换)，上次掘金看到别人用新的脚手架（@vue/cli）搭建TS的项目，看上去真的很简单，但是作者好像还在整理项目地址所以并没提供对应的地址。\n\n查看了对应的 npm 包，发现两个包最新的版本都是 3.0.5 (2018-10-23)，而因为笔者的从安装起就没有更新过脚手架，而笔者的版本停留在`2.9.6`。\n\n而使用新的脚手架的可以快速生成 TS 项目，因为使用 `vue create  \u003cproject_name\u003e`的时候，会有对应的选择项让用户去自定义项目要安装什么，是不是很方便。对应上文提到的掘金文章。[飞机票](https://juejin.im/post/5ba75b355188255c5e66e4d3)\n\n## 为什么要使用TS ?\n\n这里就不粘贴官方介绍了。\n\n我司代码是有一定的代码规范的，是使用 eslint 去规范大家的代码，但是其实个人项目中还是会出现一些规范反而约束了开发者。就比如：我司后台的代码规范和移动端的代码规范是不同的，所以在切换的时候，会造成一定的不适，而且 webstorm 居然一条一条的红线看着都心疼自己。\n\n我司是有后台数据返回格式是有对应规范的，但是后台部门中又会出现 2-3 套的返回数据规范，导致你原本和之前的业务线的后台人员磨合好了数据返回格式，但是来了一个新的后台人员，而不巧的是新的后台人员返回数据格式就是第二套规范，导致你有要心态自己一下，去修改所有的接口格式。\n\n还能在代码编译阶段，提醒自己，防止自己犯一些低级错误，比如请求的方法写错了，有一次看接口名字就应该是一个 get 请求的接口，然后自己在浏览器跑的时候发现一直报404的错误，然后找了好久才发现，这是一个 post 的请求。\n\n最重要的就是「重构」。大多数后台项目都是为了快速满足需求而搭建起来的，当然会留下一些隐患。但是需求不断的变更的时候，如果你一个人开发还好，可以慢慢的理清楚对应的逻辑；若多人以上开发这就是一个比较头疼的问题，要具体去看清楚别人的代码逻辑才可以。当然你可以说，那就一个人开发就好咯，但是业务中往往并没有那么多自由的时间让你去重构，并且当你看着一个函数都上百行的代码，如果还有点注释还行若什么都没用，真的是心疼自己在这个基础上还怎么加需求。\n\n## 授之以渔\n\n### webpack 一系列问题\n原本以为只是将 webpack 的入口改成了 ts ，在加上处理 ts 文件的loader就能运行项目了，但导致了 webpack 一堆的报错信息。\n\n主要错误信息是升级 webpack@4 ，一旦升级完成，就会导致 webpack 其余的 loader 就要同样升级，大概的记录，可以查看对应的 [commit](https://github.com/baixiaoji/vue-ts/commit/cc718be83cb79440aeaf64c5e6efa7b6eb75fe51)。\n\n之后大多数依旧是 webpack 问题，比如：\n\n```bash\nERROR in /Users/future/test-place/aaa/src/router/index.ts(11,27)\n      TS2304: Cannot find name 'require'.\n```\n\n改写路由的时候遇到此类的问题，结果是因为 TS 无法解读 webpack 的内置函数，所以只有需要安装 `@types/webpack-env` 包就可以解决此类的问题了。\n\n更多的问题，可以查看[close-issue-list](https://github.com/baixiaoji/vue-ts/issues?q=is%3Aissue+is%3Aclosed)\n\n而整体的组件写法以类为主，可以使用官方推荐的`vue-property-decorator`包去帮助开发者书写代码。\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaixiaoji%2Fvue-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaixiaoji%2Fvue-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaixiaoji%2Fvue-ts/lists"}