{"id":19304109,"url":"https://github.com/foolishchow/vue-typescript","last_synced_at":"2026-04-08T16:31:24.410Z","repository":{"id":126856644,"uuid":"131832972","full_name":"foolishchow/vue-typescript","owner":"foolishchow","description":"write vue with typescript without .vue files","archived":false,"fork":false,"pushed_at":"2018-06-27T09:55:05.000Z","size":421,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-24T02:14:15.282Z","etag":null,"topics":["jsx","typescript","vue","webpack"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/foolishchow.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-05-02T10:06:37.000Z","updated_at":"2018-12-05T07:34:26.000Z","dependencies_parsed_at":"2023-06-18T08:00:28.711Z","dependency_job_id":null,"html_url":"https://github.com/foolishchow/vue-typescript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/foolishchow/vue-typescript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Fvue-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Fvue-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Fvue-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Fvue-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foolishchow","download_url":"https://codeload.github.com/foolishchow/vue-typescript/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Fvue-typescript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31564820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["jsx","typescript","vue","webpack"],"created_at":"2024-11-09T23:28:43.938Z","updated_at":"2026-04-08T16:31:24.391Z","avatar_url":"https://github.com/foolishchow.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-typescript\n\n-----\n\u003e 使用typescript搭建的vue全家桶项目\n\n- cache 缓存配置   \n  解决缓存key多而乱的问题，实现缓存存取的type check\n  ```typescript\n  // configs/cache.ts 配置\n  import { CacheItem } from 'internal/cache/cache';\n  export const UserTokenCache: CacheItem\u003c{ user: string; token: string }\u003e = 'user-token';\n\n  // 任意页面\n  import CacheManager from 'internal/cache'\n  CacheManager.get(UserTokenCache) // { user: string; token: string }|null\n  CacheManager.set(UserTokenCache,{user: string; token: string})\n\n  //vue component\n  import CacheManager from 'internal/cache'\n  let cache = this.$cache.get(UserTokenCache);\n  ```\n\n- ajax 接口配置    \n  实现请求与返回类型的绑定，实现数据请求的type check\n  ```typescript\n  // configs/interface.ts\n  import { AjaxGetUriItem, AjaxPostUriItem } from 'internal/ajax';\n  import { LoginResponse, LoginParam } from './responses/login';\n\n  export const BasicLogin: AjaxPostUriItem\u003cLoginResponse, LoginParam\u003e = \"/user-login\";\n\n  // vue component\n  this.$ajax.get(BasicLogin) // Argument of type 'AjaxPostUriItem\u003cLoginResponse, LoginParam, any\u003e' is not assignable to parameter of type 'AjaxGetUriItem\u003cLoginResponse, LoginParam, any\u003e'.\n  this.$ajax.post(BasicLogin)//ok\n  this.$ajax.post(BasicLogin,data).then(res=\u003e{}) // res is typed\n  ```\n\n- sass \u0026 BEM 实现   \n  首先这段代码抄来的。  \n  源代码在[element/packages/theme-chalk/src/mixins](https://github.com/ElemeFE/element/tree/dev/packages/theme-chalk/src/mixins)   \n  BEM配置在`internal/styles/mixin/config.scss`\n  ```\n  $namespace: 'app'; //namespace 前缀\n  $element-separator: '__'; // element 间隔\n  $modifier-separator: '--'; // modifier 间隔\n  $state-prefix: 'is-'; // state|when  前缀\n  ```\n  webpack中已经配置了alias\n  ```json\n  //package.json\n  \"alias\": {\n    \"sass\": \"internal/styles\",\n    \"scss\": \"internal/styles\"\n  }\n  ```\n  直接在scss中使用`@import '~s(c|a)ss/mixins';`就可以使用了\n\n- webpack 配置    \n  内置的http服务器是从网上copy的,但是现在也不记得在哪了.[找到补上]   \n  使用了`webpack-chain`来配置,配置文件是`.webpackrc.ts`    \n  至于如何加载和打包,代码实现在`.webpack`下   \n  很多的配置写在`package.json`了,具体实现在`.webpackrc.ts`中。\n\n- vuex 类型推导\n  使用了本人写的一个简单的module[`vue-typescript-util`](https://github.com/foolishchow/vue-typescript-util)     \n  具体实现可以看`store`目录下或者[移步](https://github.com/foolishchow/vue-typescript-util/demo)\n\n## 目录结构\n```\n.\n├── components   //组件目录\n├── configs\n│   ├── cache.ts  //存放cache key 配置文件\n│   ├── configAjax.ts  // ajax 拦截以及参数配置\n│   ├── index.html    // html-webpack-plugin 模板文件\n│   ├── inteface.ts   // ajax 请求配置文件  照着示例可以在pages/cache/index.tsx 看到效果\n│   ├── responses\n│   │   ├── common.ts // ajax 请求常用的数据类型定义\n│   │   └── login.ts  // ajax 请求常用的数据类型定义\n│   └── router.ts   // vue-router 定义页面\n├── images\n├── index.ts   // entry\n├── internal  //内置的一些\n│   ├── ajax  //ajax 简单的封装\n│   │   ├── ajax.ts\n│   │   ├── config.ts\n│   │   └── index.ts\n│   ├── cache  //cookie和localstorage的adapter\n│   │   ├── cache.ts\n│   │   └── index.ts //=\u003e expose cacheInstance\n│   ├── declare.ts // declares 文件集合\n│   ├── declares  // 存放一些没有\bdeclration的module 声明文件\n│   │   ├── countup.js.d.ts\n│   │   ├── index.d.ts\n│   │   ├── vue-lazyload.d.ts\n│   │   └── vue-swipe.d.ts\n│   ├── index.ts\n│   ├── styles //常用的样式 sass\n│   │   ├── base.scss           // 基础移动端rem实现\n│   │   ├── mixin               //sass mixins  copyed from element-ui\n│   │   │   ├── config.scss     // BEM config\n│   │   │   ├── function.scss   // BEM mixins  utils\n│   │   │   └── var.scss        // sass 全部变量\n│   │   ├── mixins.scss         // BEM mixins 实现\n│   │   ├── reset-plat.scss     // resetcss  pc\n│   │   └── reset.scss          // resetcss mobile\n│   └── utils       //工具类\n│       ├── common.ts\n│       ├── data.ts\n│       ├── date.js\n│       ├── date.ts\n│       ├── debounce.ts\n│       ├── dom.ts\n│       ├── enviroment.ts\n│       ├── filter.ts\n│       ├── index.ts\n│       ├── plugin-install.ts\n│       └── window.ts\n├── jsx.d.ts                    //typescript jsx 基础类型配置 [important]\n├── package.json\n├── pages                       //router页面\n│   ├── cache\n│   │   └── index.tsx           //ajax 和 cache 代码效果页面\n│   ├── vuex\n│   │   ├── index.scss\n│   │   └── index.tsx           //vuex 效果页面\n│   └── wraper\n│       ├── index.scss\n│       └── index.tsx\n├── store                       //vuex store config\n│   ├── index.ts\n│   └── modules\n│       ├── dom\n│       │   ├── actions.ts\n│       │   ├── getters.ts\n│       │   ├── index.ts\n│       │   ├── mutations.ts\n│       │   └── state.ts\n│       ├── event\n│       │   └── index.ts\n│       └── root.ts\n├── styles\n│   ├── animation.scss\n│   └── index.scss\n├── tsconfig.json\n└── yarn.lock\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoolishchow%2Fvue-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoolishchow%2Fvue-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoolishchow%2Fvue-typescript/lists"}