{"id":18137924,"url":"https://github.com/shaobeichen/blog","last_synced_at":"2025-08-21T02:31:08.059Z","repository":{"id":41414868,"uuid":"118883522","full_name":"shaobeichen/blog","owner":"shaobeichen","description":"📜 Vue3.2+Vite+TypeScript+Pinia+Setup写法，包括 命令式组件写法，Eslint Prettier规范，TypeScript入门写法","archived":false,"fork":false,"pushed_at":"2023-01-08T23:18:16.000Z","size":34908,"stargazers_count":150,"open_issues_count":24,"forks_count":19,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-29T22:39:06.326Z","etag":null,"topics":["github-api","github-pages","pinia","setup","typescript","vite","vue","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://shaobeichen.github.io/blog/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shaobeichen.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":"2018-01-25T08:15:00.000Z","updated_at":"2024-09-18T07:25:23.000Z","dependencies_parsed_at":"2023-02-08T08:00:46.594Z","dependency_job_id":null,"html_url":"https://github.com/shaobeichen/blog","commit_stats":null,"previous_names":["leachzhou/blog"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaobeichen%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaobeichen%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaobeichen%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaobeichen%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shaobeichen","download_url":"https://codeload.github.com/shaobeichen/blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226867969,"owners_count":17694817,"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":["github-api","github-pages","pinia","setup","typescript","vite","vue","vue3","vuejs"],"created_at":"2024-11-01T15:07:41.624Z","updated_at":"2024-12-19T18:14:40.251Z","avatar_url":"https://github.com/shaobeichen.png","language":"Vue","readme":"# BLOG\n\n[![vue](https://img.shields.io/badge/MADE%20WITH-VUE3.2-42a97a?style=for-the-badge\u0026labelColor=35495d)](https://vuejs.org)\n\u0026nbsp;\n[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/shaobeichen/blog/deploy?label=deploy\u0026style=for-the-badge)](https://github.com/shaobeichen/blog/actions/workflows/action.yml)\n\u0026nbsp;\n[![coverage](https://img.shields.io/codecov/c/github/shaobeichen/blog/master.svg?label=coverage\u0026style=for-the-badge)](https://codecov.io/gh/shaobeichen/blog)\n\u0026nbsp;\n[![GitHub stars](https://img.shields.io/github/stars/shaobeichen/blog.svg?style=for-the-badge)](https://github.com/shaobeichen/blog/stargazers)\n\u0026nbsp;\n\n## 介绍\n\n个人主页，Vue3.2 + Vite + TypeScript + Pinia + Setup 写法\n\n## 特性\n\n- 有专门用来练习 Vue3.2 的 TodoList 案例\n- 可以快速入门 Vue3.2 + Vite2 + TypeScript\n- 有 Vue3 + Setup 组件写法\n- 有 Vue3.2 命令式组件写法，组件同时支持 Vue2.x Options API 调用\n- 有 jest + TypeScript 入门写法，写出第一个 Vue 组件测试用例，查看覆盖率\n- 支持 eslint、prettier、stylelint、commitlint、husky 等规范\n- 支持 GitHub Actions 自动部署项目\n\n## 用法\n\n1.安装 yarn\n\n```\nnpm i -g yarn\n```\n\n2.安装依赖\n\n```\nyarn\n```\n\n3.运行项目\n\n```\nyarn dev\n```\n\n## 产出文章\n\n\u003e 做项目后产出了几篇文章，用于记录，帮助大家踩坑。\n\n- [Vue3+Vite+Scss 项目踩坑记录(一)](https://juejin.cn/post/7115375597370474533)\n- [Vue3+Vite+Scss 项目踩坑记录(二)](https://juejin.cn/post/7116310360986304525)\n- [Vue3+Vite+Scss 项目踩坑记录(三)](https://juejin.cn/post/7117296242660474893)\n- [Vue3+Vite+Scss 项目踩坑记录(四)](https://juejin.cn/post/7118400090296827911)\n\n## 参考链接\n\nVue3\n\n- [vue-vben-admin](https://github.com/vbenjs/vue-vben-admin)\n- [element-plus](https://github.com/element-plus/element-plus/tree/dev/packages/components)\n- [vant](https://github.com/youzan/vant)\n- [vue3-music](https://github.com/SmallRuralDog/vue3-music/blob/master/src/views/playlist/PlayList.vue)\n- [vue3.2-vite-template](https://github.com/BoyYangzai/vue3.2-vite-template/blob/main/src/components/Message/Message.ts)\n- [Vue3 组件如何支持 Options API](https://github.com/vueComponent/ant-design-vue/issues/2810)\n- [从零搭建后台系统（Vue3.0+ElementPlus+TS+Vite）(一）](https://juejin.cn/post/7038485798143918116)\n\njest\n\n- [jest 中文网](https://jestjs.io/zh-Hans/docs/getting-started)\n- [Vue Test Utils 2](https://test-utils.vuejs.org/guide/): 用于 Vue3 组件单元测试\n- [如何运行 Jest 单元测试](https://developer.aliyun.com/article/975177)\n- [vant toast test](https://github.com/youzan/vant/blob/dev/packages/vant/src/toast/test/index.spec.ts)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaobeichen%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshaobeichen%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaobeichen%2Fblog/lists"}