{"id":27706028,"url":"https://github.com/lzxb/vue2-demo","last_synced_at":"2025-04-26T05:01:47.546Z","repository":{"id":50295684,"uuid":"72350685","full_name":"lzxb/vue-demo","owner":"lzxb","description":"Vue 基于 Genesis + TS + Vuex 实现的 SSR demo","archived":false,"fork":false,"pushed_at":"2024-12-14T09:29:16.000Z","size":254,"stargazers_count":2117,"open_issues_count":0,"forks_count":755,"subscribers_count":98,"default_branch":"master","last_synced_at":"2025-04-22T09:03:16.009Z","etag":null,"topics":["demo","ssr","vue","vue-cli","vue-demo","vue-router","vue2","vue2-dmeo","vuejs","vuejs2","vuex","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/lzxb.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,"zenodo":null}},"created_at":"2016-10-30T13:19:37.000Z","updated_at":"2025-03-28T06:02:02.000Z","dependencies_parsed_at":"2025-04-14T14:05:30.676Z","dependency_job_id":null,"html_url":"https://github.com/lzxb/vue-demo","commit_stats":null,"previous_names":["lzxb/vue2-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Fvue-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Fvue-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Fvue-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Fvue-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lzxb","download_url":"https://codeload.github.com/lzxb/vue-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250935454,"owners_count":21510552,"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":["demo","ssr","vue","vue-cli","vue-demo","vue-router","vue2","vue2-dmeo","vuejs","vuejs2","vuex","webpack"],"created_at":"2025-04-26T05:01:16.692Z","updated_at":"2025-04-26T05:01:47.497Z","avatar_url":"https://github.com/lzxb.png","language":"TypeScript","funding_links":[],"categories":["Demo示例","JavaScript"],"sub_categories":[],"readme":"## 前言\n这个项目最开始建立的是2016年的时候，如今已经过去了6年多，时光匆匆，如今 TS 已经流行起来，并且自己已经在 SSR 方面实践颇多，所以就花了半天的时间使用 [Genesis](https://github.com/fmfe/genesis) 写了一个完整的 Vue SSR 的demo。\n\n## 快速开发\n```bash\n# 开发环境启动\nnpm run dev\n# 打包生产环境代码\nnpm run build\n# 执行TS类型检查\nnpm run type-check\n# 生产环境运行\nnpm run start\n```\n\n## 更新日志\n- 2022-08\n  - 使用[vue-class-setup](https://github.com/fmfe/vue-class-setup)重写\n- 2022-02\n  - 升级[Genesis2.0](https://github.com/fmfe/genesis)版本\n  - 能支持全文件类型检查，并且生成类型文件\n  - 如果对 SSR 微服务架构感兴趣，[点击这里来看看](https://github.com/fmfe/genesis/blob/master/docs/zh-CN/why.md)\n  - 新增了Docker打包的脚本，并且可以在本地运行Docker镜像\n\n## Docker\n\n执行`./docker-build.sh`命令构建镜像，举一反三，具体编写逻辑请查看`./docker-build.sh`和`Dockerfile`文件\n\n## 技术栈\n- Vue \n- Genesis \n- vue-router\n- vuex\n- axios\n- vue-meta\n- TS\n\n## 功能点\n- 实现登录、退出、微博列表\n- 使用 vue-meta 管理页面 SEO 的信息\n- 使用 TS 封装了 axios 的请求类，涉及到服务端请求的 header 转发\n- 编写了 Vue 的基类，使得 Vue、Vuex 和 TS 的配合更好\n- 完整的展示了开发 Vue SSR 项目所需要注意的知识点\n- 基于 Genesis 开发的完整功能的 demo\n- 演示了如何在服务端预取数据，在客户端还原服务端状态\n- 演示了如何编译 SSR 和 TS 生产环境的代码\n\n## 目录说明\n```bash\n.\n├── dist                  yarn build 编译后的源码目录\n├── mock                  模拟接口\n│   └── mock.ts           实现登录、退出、微博列表的 mock api\n├── src                   源码目录\n│   ├── components        公共组件\n│   |   └── v-header.vue  封装一个头部的组件\n|   ├── request           请求处理目录\n|   |   └── index.ts      封装 axios 请求类的实现\n|   ├── router            路由管理目录\n|   |   └── index.ts      提供创建路由的方法\n|   ├── store             状态管理目录\n|   |   └── index.ts      程序全局状态的实现\n|   ├── utils             封装工具函数目录\n|   |   └── index.ts      工具函数的封装\n|   ├── views             页面目录\n|   |   ├── home.vue      网站首页\n|   |   └── signin.vue    登录页面\n|   ├── app.vue           应用的公共组件\n├── ├── index.html        SSR 渲染的基本 html 模板\n|   ├── base-vue.ts       对 Vue 封装一封，包装 vuex、request\n|   ├── entry-client.ts   客户端入口文件\n|   ├── entry-server.ts   服务端入口文件\n|   └── shims-vue.d.ts    Vue 文件的 TS 声明\n├── .editorconfig         编辑器配置\n├── .eslintignore         eslint 的忽略配置\n├── .eslintrc.js          eslint 的配置\n├── .gitignore            git 的忽略文件\n├── .stylelintignore      stylelint 的忽略文件\n├── build.sh              编译生产环境代码到 dist 目录，yarn start 执行\n├── genesis.build.ts      Genesis 构建生产环境代码\n├── genesis.dev.ts        dev 环境开发入口\n├── genesis.prod.ts       生产环境开发入口\n├── genesis.ts            dev 和 生产环境，通用逻辑封装\n├── package.json          包管理配置\n├── README.md             项目说明文档\n├── stylelint.config.js   stylelint 的配置文件\n├── tsconfig.json         TS 的配置文件\n├── tsconfig.node.json    Node 运行程序使用 TS 的配置文件\n└── yarn.lock             yarn 的依赖版本锁\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flzxb%2Fvue2-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flzxb%2Fvue2-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flzxb%2Fvue2-demo/lists"}