V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Sponsored by
LinkedIn
不坐班的神仙工作 · 去任何你想去的地方远程,赚一线城市的工资
2000 个不用出门 Social 的全球远程工作,帮助 V2EX 的小伙伴开启全新的工作方式。
Promoted by LinkedIn
1340641314
V2EX  ›  分享创造

2016 年的 vue demo 升级到 SSR 版本了

  •  
  •   1340641314 ·
    lzxb · 2020-05-18 09:43:09 +08:00 · 524 次点击
    这是一个创建于 861 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    这个项目最开始建立的是 2016 年的时候,如今已经过去了 4 年多,时光匆匆,如今 TS 已经流行起来,并且自己已经在 SSR 方面实践颇多,所以就花了半天的时间使用 Genesis 写了一个完整的 Vue SSR 的 demo 。

    快速开发

    # 开发环境启动
    npm run dev
    # 打包生产环境代码
    npm run build
    # 生产环境运行
    npm run start
    

    docker

    只需要执行 yarn build 命令后,将 distnode_modules、目录和 package.json 文件 复制到镜像内即可,然后执行 yarn start 命令启动程序即可

    技术栈

    • Vue
    • Genesis
    • vue-router
    • vuex
    • axios
    • vue-meta
    • TS

    功能点

    • 实现登录、退出、微博列表
    • 使用 vue-meta 管理页面 SEO 的信息
    • 使用 TS 封装了 axios 的请求类,涉及到服务端请求的 header 转发
    • 编写了 Vue 的基类,使得 Vue 、Vuex 和 TS 的配合更好
    • 完整的展示了开发 Vue SSR 项目所需要注意的知识点
    • 基于 Genesis 开发的完整功能的 demo
    • 演示了如何在服务端预取数据,在客户端还原服务端状态
    • 演示了如何编译 SSR 和 TS 生产环境的代码

    目录说明

    .
    ├── dist                  yarn build 编译后的源码目录
    ├── mock                  模拟接口
    │   └── mock.ts           实现登录、退出、微博列表的 mock api
    ├── src                   源码目录
    │   ├── components        公共组件
    │   |   └── v-header.vue  封装一个头部的组件
    |   ├── request           请求处理目录
    |   |   └── index.ts      封装 axios 请求类的实现
    |   ├── router            路由管理目录
    |   |   └── index.ts      提供创建路由的方法
    |   ├── store             状态管理目录
    |   |   └── index.ts      程序全局状态的实现
    |   ├── utils             封装工具函数目录
    |   |   └── index.ts      工具函数的封装
    |   ├── views             页面目录
    |   |   ├── home.vue      网站首页
    |   |   └── signin.vue    登录页面
    |   ├── app.vue           应用的公共组件
    |   ├── base-vue.ts       对 Vue 封装一封,包装 vuex 、request
    |   ├── entry-client.ts   客户端入口文件
    |   ├── entry-server.ts   服务端入口文件
    |   └── shims-vue.d.ts    Vue 文件的 TS 声明
    ├── .editorconfig         编辑器配置
    ├── .eslintignore         eslint 的忽略配置
    ├── .eslintrc.js          eslint 的配置
    ├── .gitignore            git 的忽略文件
    ├── .stylelintignore      stylelint 的忽略文件
    ├── build.sh              编译生产环境代码到 dist 目录,yarn start 执行
    ├── genesis.build.ts      Genesis 构建生产环境代码
    ├── genesis.dev.ts        dev 环境开发入口
    ├── genesis.prod.ts       生产环境开发入口
    ├── genesis.ts            dev 和 生产环境,通用逻辑封装
    ├── index.html            SSR 渲染的基本 html 模板
    ├── package.json          包管理配置
    ├── README.md             项目说明文档
    ├── stylelint.config.js   stylelint 的配置文件
    ├── tsconfig.json         TS 的配置文件
    └── yarn.lock             yarn 的依赖版本锁
    

    Genesis

    Genesis 是一个 Vue 的 SSR 库,它提供了 SSR 最基础的能力,在它的基础上,你可以实现微前端、微服务的架构,如果你想深入的了解它,请查看它的官方文档

    传送门

    https://github.com/lzxb/vue2-demo

    3 条回复    2020-05-25 09:39:49 +08:00
    ohoh
        1
    ohoh  
       2020-05-18 13:51:41 +08:00
    可以可以! 打破零回复!
    iamverylovely
        2
    iamverylovely  
       2020-05-19 16:12:13 +08:00
    lz 好帅
    1340641314
        3
    1340641314  
    OP
       2020-05-25 09:39:49 +08:00
    @iamverylovely 尴尬。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1311 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 45ms · UTC 18:31 · PVG 02:31 · LAX 11:31 · JFK 14:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.