lzxb (狼族小狈)

基于 Vue SSR 的微架构在 FOLLOWME5.0 实践

lzxb — Mon, 25 May 2020 09:54:09 +0800

2020 年 5 月 22 日FOLLOWME5.0的第一个版本终于上线了，这也是公司内部基于 Genesis 上线的第二个项目。首页是老项目经历了最原始的那种 Vue SSR，后来在年初的时候，迁移到了 Nuxt.js 下，再到现在迁移到了 Genesis，可谓是一波三折。

首次实践

在 2019 年的上半年，我们在和 APP 混合开发的项目中，首次实践了模块化，它拥有了独立的 API、路由、状态和页面，并且是按需进行初始化的，但是它并不是完美的，它是基于路由的微模块，并且状态也是按需注入到全局的状态中的管理

无路由微模块

2019 年的 8 月份，我开始介入到 web 端首页的开发，首先面对的就是基于 Vuex 的状态管理，所有的状态全部注入到全局的状态，交集到一起，随着业务的迭代，已经分不清楚哪些是需要的，哪些是可以被删除的，随着业务规模的膨胀，越来越难以维护。为了保证无入侵性，基于Tms.js抽象出来了一个支持微模块的状态库，这时候我们的微模块拥有了独立的 API、状态和页面。我们 5.0 左导航就被抽离成一个独立运行的微模块，一个微模块由多个组件组合而成，它有自己内部状态管理。

大跃进

在 2019 年年底的时候，得知我们要升级 5.0 的版本，网站也将会大幅度的重构，在基于已有的微模块开发理念下，我们希望能够更近一步，解决一些以往项目架构的弊端。

5.0 之前，我们有一个公共的导航栏，不管是 CSR、还是 SSR 的项目都需要它，每次导航栏发生变更之后，都需要重新打包十几个项目发布，这极大的消耗了我们的身心体力，我希望能做到一个页面可以由不同的 SSR 服务聚合而成，通过 API 的形式提供给另外一个服务使用。

这个大胆的想法诞生后，我们深入的研究了一下 Nuxt.js，期望它可以做到我们的需求，经过一番调研后，确认无法满足我的需求后，最终还是选择了造轮子。

Genesis

参考了一些社区 SSR 框架的实现，基本上都是封装好的框架，灵活性较低，而我们期望它是一个简单的 SSR 库，当成一个工具函数来使用，以便于能够支撑多实例运行。

在这里的理念下，它没有像 Nuxt.js nuxt.config.js 这样直接读取一个配置开始运行，给你集成了各种各样的功能，它仅仅一个基础到不能再基础的渲染工具函数

import { SSR } from '@fmfe/genesis-core';

const ssr = new SSR();

const renderer = ssr.createRenderer();

renderer.render({ url: '/' });

当然了，在实际的业务中，我们还需要创建一个 HTTP 服务将我们的内容返回给用户。

如果要做到微服务，并且能被不同的服务之间调用，首先就需要服务的自身具备将渲染结果输出 JSON 的能力，然后第三方服务读取渲染结果，输出到 HTML 中

renderer.render({ url: '/', mode: 'ssr-json' });

我们巧妙的使用了 Vue 的 Renderer 选项 template，传入一个函数，执行完成后返回了一个 JSON 的渲染结果

const template: any = async (
    strHtml: string,
    ctx: Genesis.RenderContext
): Promise<Genesis.RenderData> => {
    const html = strHtml.replace(
        /^(<[A-z]([A-z]|[0-9])+)/,
        `$1 ${this._createRootNodeAttr(ctx)}`
    );
    const vueCtx: any = ctx;
    const resource = vueCtx.getPreloadFiles().map(
        (item): Genesis.RenderContextResource => {
            return {
                file: `${this.ssr.publicPath}${item.file}`,
                extension: item.extension
            };
        }
    );
    const { data } = ctx;
    if (html === '<!---->') {
        data.html += `<div ${this._createRootNodeAttr(ctx)}></div>`;
    } else {
        data.html += html;
    }
    data.script += vueCtx.renderScripts();
    data.style += vueCtx.renderStyles();
    data.resource = [...data.resource, ...resource];
    (ctx as any)._subs.forEach((fn: Function) => fn(ctx));
    (ctx as any)._subs = [];
    return ctx.data;
};

远程组件

考虑到不是所有的项目，都需要远程调用，所以远程调用组件，我们是以独立的包提供的。在拿到 SSR JSON 的渲染结果后，远程组件将会帮我们负责嵌入到该服务的页面中去。

<template>
    <remote-view :fetch="fetch" />
</template>

fetch 是一个异步的回调函数，你可以通过使用 axios 库来发送请求将 SSR 渲染的结果返回给 remote-view 组件。

renderer.render({ url: '/', mode: 'ssr-json' }).then((r) => {
    // 编写一个接口， 将 r.data 提供给 remote-view 组件访问
});

5.0 的服务拆分

根据 UI 的呈现效果，我们将左导航和内容区拆分成不同的服务，其中内容区因为开发团队的不同、业务的不同，又拆分成不同的服务。第一个版本我们拆分了左导航的 node-ssr-general 服务，首页和通知的 node-ssr-home 服务，以及信号的 node-ssr-signal 服务，每一个服务都是独立部署、独立开发、由不同的人进行维护，只是最终由 node-ssr-general 服务进行聚合。

未来我们的产品还将会进一步迭代，越来越多的服务都将会被集成进去这个大应用中。

内网域名

最初的 SSR 服务，尝试过使用 RPC 和 HTTP 获取接口数据进行渲染，后面经过权衡后，在 5.0 我们统一采用了在服务器配置 HOST 的方式，配置一个内网的域名，提供给 SSR 服务通过 HTTP 请求来获取数据

服务的加载策略

为了首屏可以更快的呈现给用户，所以在服务端远程组件走的是 SSR 的渲染，在客户端路由切换的时候，走 CSR 渲染，所以在首页切换到信号栏目时，会有一些加载过程明显的白屏。

后续可以通过 Service Worker 对所有服务的静态资源和 CSR 渲染时的 HTML 进行预加载，减少加载该服务内容时，出现白屏的几率

关于微前端

从理论上，Genesis 也可以同时做到 React 的支持，输出同样标准的 JSON 渲染结果、同样标准的应用创建和销毁逻辑。只是目前我们团队都是以 Vue 为主，所以这方面还需要团队有时间才能支持。

传送们

信号模块
FOLLOWME5.0 新版的策略体验
Genesis Github
Genesis 文档
vue demo 基于 Genesis + TS + Vuex 实现的 SSR demo
微架构 demo 基于 Vue SSR for Genesis 框架的微前端&微服务的例子
文章来源地址

Vue.js 项目重构，轻松实现上拉加载滚动位置还原

lzxb — Mon, 19 Jun 2017 08:16:32 +0800

前言

上一篇《Vue.js 轻松实现页面后退时，还原滚动位置》只是简单的实现了路由切换时进行的滚动位置还原，很多朋友就来问上拉加载怎么实现啊！于是我想起了以前做过一个叫vue-cnode的项目，于是花了两天时间进行了重构，完全的移除了 Vuex，使用了Vuet来做为状态的管理工具。如果关注Vuet的朋友就会发现，版本更新得好快，简直就是版本帝啊！！！其实Vuet的版本升级，都是向下兼容的，每次的版本发布都会经过完整的单元测试和 e2e 测试，极大的保证了发布版本的稳定性。

项目源码

Vuet状态管理工具
vue-cnode Github 和效果预览地址

需求分析

记录上拉请求时的页数
页面后退时，还原之前列表页面的状态
列表分类切换时，进行状态重置
从列表 A 点击详情 A，页面后退，重新打开详情 A，还原之前访问详情 A 状态
从列表 A 点击详情 A，页面后退，重新打开详情 B，清除详情 A 的状态，初始化详情 B 的状态

安装

npm install --save vuet

Vuet 实例

import Vue from 'vue'
import Vuet from 'vuet'
import utils from 'utils'
import http from 'http'

Vue.use(Vuet)

export default new Vuet({
  pathJoin: '-', // 定义模块的连接符
  modules: {
    topic: {
      create: {
        data () {
          return {
            title: '', // 标题
            tab: '', // 发表的板块
            content: '' // 发表的内容
          }
        },
        manuals: {
          async create ({ state }) {
            if (!state.title) {
              return utils.toast('标题不能为空')
            } else if (!state.tab) {
              return utils.toast('选项不能为空')
            } else if (!state.content) {
              return utils.toast('内容不能为空')
            }
            const res = await http.post(`/topics`, {
              ...state
            })
            if (res.success) {
              this.reset()
            } else {
              utils.toast(res.error_msg)
            }
            return res
          }
        }
      },
      /********* 实现列表上拉加载滚动位置还原的核心代码开始 *************/
      list: {
        data () {
          return {
            data: [], // 列表存储的数据
            loading: true, // 数据正在加载中
            done: false, // 数据是否已经全部加载完成
            page: 1 // 加载的页数
          }
        },
        async fetch ({ state, route, params, path }) {
          // 注，在vuet 0.1.2以上版本，会多带一个params.routeWatch参数，我们可以根据这个来判断页面是否发生了变化
          if (params.routeWatch === true) { // 路由发生了变化，重置模块状态
            this.reset(path)
          } else if (params.routeWatch === false) { // 路由没有变化触发的请求，可能是从详情返回到列表
            return {}
          }
          // params.routeWatch 没有参数，则是上拉加载触发的调用
          const { tab = '' } = route.query
          const query = {
            tab,
            mdrender: false,
            limit: 20,
            page: state.page
          }
          const res = await http.get('/topics', query)
          const data = params.routeWatch ? res.data : [...state.data, ...res.data]
          return {
            data, // 更新模块的列表数据
            page: ++state.page, // 每次请求成功后，页数+1
            loading: false, // 数据加载完成
            done: res.data.length < 20 // 判断列表的页数是否全部加载完成
          }
        }
      },
      /********* 实现列表上拉加载滚动位置还原的核心代码结束 *************/
      detail: {
        data () {
          return {
            data: {
              id: null,
              author_id: null,
              tab: null,
              content: null,
              title: null,
              last_reply_at: null,
              good: false,
              top: false,
              reply_count: 0,
              visit_count: 0,
              create_at: null,
              author: {
                loginname: null,
                avatar_url: null
              },
              replies: [],
              is_collect: false
            },
            existence: true,
            loading: true,
            commentId: null
          }
        },
        async fetch ({ route }) {
          const { data } = await http.get(`/topic/${route.params.id}`)
          if (data) {
            return {
              data,
              loading: false
            }
          }
          return {
            existence: false,
            loading: false
          }
        }
      }
    },
    user: { // 登录用户的模块
      self: {
        data () {
          return {
            data: JSON.parse(localStorage.getItem('vue_cnode_self')) || {
              avatar_url: null,
              id: null,
              loginname: null,
              success: false
            }
          }
        },
        manuals: {
          async login ({ state }, accesstoken) { // 用户登录方法
            const res = await http.post(`/accesstoken`, { accesstoken })
            if (typeof res === 'object' && res.success) {
              state.data = res
              localStorage.setItem('vue_cnode_self', JSON.stringify(res))
              localStorage.setItem('vue_cnode_accesstoken', accesstoken)
            }
            return res
          },
          signout () { // 用户退出方法
            localStorage.removeItem('vue_cnode_self')
            localStorage.removeItem('vue_cnode_accesstoken')
            this.reset()
          }
        }
      },
      detail: {
        data () {
          return {
            data: {
              loginname: null,
              avatar_url: null,
              githubUsername: null,
              create_at: null,
              score: 0,
              recent_topics: [],
              recent_replies: []
            },
            existence: true,
            loading: true,
            tabIndex: 0
          }
        },
        async fetch ({ route }) {
          const { data } = await http.get(`/user/${route.params.username}`)
          if (data) {
            return {
              data,
              loading: false
            }
          }
          return {
            existence: false,
            loading: false
          }
        }
      },
      messages: {
        data () {
          return {
            data: {
              has_read_messages: [],
              hasnot_read_messages: []
            },
            loading: true
          }
        },
        async fetch () {
            // 用户未登录，拦截请求
          if (!this.getState('user-self').data.id) return
          const { data } = await http.get(`/messages`, { mdrender: true })
          return {
            data
          }
        },
        count: {
          data () {
            return {
              data: 0
            }
          },
          async fetch () {
            // 用户未登录，拦截请求
            if (!this.getState('user-self').data.id) return
            const res = await http.get('/message/count')
            if (!res.data) return
            return {
              data: res.data
            }
          }
        }
      }
    }
  }
})

在Vuet实例创建完成后，我们就可以在组件中连接我们的Vuet了。

首页列表

<template>
  <div>
    <nav class="nav">
      <ul flex="box:mean">

        <li v-for="item in tabs" :class="{ active: item.tab === ($route.query.tab || '') }">
          <router-link :to="{ name: 'index', query: { tab: item.tab } }">{{ item.title }}</router-link>
        </li>
      </ul>
    </nav>
    <!-- 
        注意了，由于我的页面布局是一个局部滚动条，所以需要指定一个name
        如果你的页面是全局滚动条，设置指令为
        v-vuet-scroll.window="{ path: 'topic-list' }"
    -->
    <v-content v-vuet-scroll="{ path: 'topic-list', name: 'content' }">
      <ul class="list">
        <li v-for="item in list.data" key="item.id">
          <router-link :to="{ name: 'topic-detail', params: { id: item.id } }">
            <div class="top" flex="box:first">
              <div class="headimg" :style="{ backgroundImage: 'url(' + item.author.avatar_url + ')' }"></div>
              <div class="box" flex="dir:top">
                <strong>{{ item.author.loginname }}</strong>
                <div flex>
                  <time>{{ item.create_at | formatDate }}</time>
                  <span class="tag">#分享#</span>
                </div>
              </div>
            </div>
            <div class="common-typeicon" flex v-if="item.top || item.good">
              <div class="icon" v-if="item.good">
                <i class="iconfont icon-topic-good"></i>
              </div>
              <div class="icon" v-if="item.top">
                <i class="iconfont icon-topic-top"></i>
              </div>
            </div>
            <div class="tit">{{ item.title }}</div>
            <div class="expand" flex="box:mean">
              <div class="item click" flex="main:center cross:center">
                <i class="iconfont icon-click"></i>
                <div class="num">{{ item.visit_count > 0 ? item.visit_count : '暂无阅读' }}</div>
              </div>
              <div class="item reply" flex="main:center cross:center">
                <i class="iconfont icon-comment"></i>
                <div class="num">{{ item.reply_count > 0 ? item.reply_count : '暂无评论' }}</div>
              </div>
              <div class="item last-reply" flex="main:center cross:center">
                <time class="time">{{ item.last_reply_at | formatDate }}</time>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
      <v-loading :done="list.done" :loading="list.loading" @user1="$vuet.fetch('topic-list')"></v-loading>
    </v-content>
    <v-footer></v-footer>
  </div>
</template>
<script>
  import { mapModules, mapRules } from 'vuet'

  export default {
    mixins: [
      mapModules({ list: 'topic-list' }), // 连接我们定义的Vuet.js的状态
      mapRules({ route: 'topic-list' }) // 使用Vuet.js内置的route规则来对页面数据和滚动位置进行管理
    ],
    data () {
      return {
        tabs: [
          {
            title: '全部',
            tab: ''
          },
          {
            title: '精华',
            tab: 'good'
          },
          {
            title: '分享',
            tab: 'share'
          },
          {
            title: '问答',
            tab: 'ask'
          },
          {
            title: '招聘',
            tab: 'job'
          }
        ]
      }
    }
  }
</script>

页面详情

<template>
  <div>
    <v-header title="主题">
      <div slot="left" class="item" flex="main:center cross:center" v-on:click="$router.go(-1)">
        <i class="iconfont icon-back"></i>
      </div>
    </v-header>
    <!--
        设置详情的局部滚动条
    -->
    <v-content style="bottom: 0;" v-vuet-scroll="{ path: 'topic-detail', name: 'content' }">
      <v-loading v-if="detail.loading"></v-loading>
      <v-data-null v-if="!detail.existence" msg="话题不存在"></v-data-null>
      <template v-if="!detail.loading && detail.existence">
        <div class="common-typeicon" flex v-if="data.top || data.good">
          <div class="icon" v-if="data.good">
            <i class="iconfont icon-topic-good"></i>
          </div>
          <div class="icon" v-if="data.top">
            <i class="iconfont icon-topic-top"></i>
          </div>
        </div>

        <ul class="re-list">
          <!-- 楼主信息 start -->
          <li flex="box:first">
            <div class="headimg">
              <router-link class="pic" :to="{ name: 'user-detail', params: { username: author.loginname } }" :style="{ backgroundImage: 'url(' + author.avatar_url + ')' }"></router-link>
            </div>
            <div class="bd">
              <div flex>
                <router-link flex-box="0" :to="{ name: 'user-detail', params: { username: author.loginname } }">{{ author.loginname }}</router-link>
                <time flex-box="1">{{ data.create_at | formatDate }}</time>
                <div flex-box="0" class="num">#楼主</div>
              </div>
            </div>
          </li>
          <!-- 楼主信息 end -->
          <!-- 主题信息 start -->
          <li>
            <div class="datas">
              <div class="tit">{{ data.title }}</div>
              <div class="bottom" flex="main:center">
                <div class="item click" flex="main:center cross:center">
                  <i class="iconfont icon-click"></i>
                  <div class="num">{{ data.visit_count }}</div>
                </div>
                <div class="item reply" flex="main:center cross:center">
                  <i class="iconfont icon-comment"></i>
                  <div class="num">{{ data.reply_count }}</div>
                </div>
              </div>
            </div>
            <div class="markdown-body" v-html="data.content"></div>
          </li>
          <!-- 主题信息 end -->
          <li class="replies-count" v-if="replies.length">
            共(<em>{{ replies.length }}</em>)条回复
          </li>
          <!-- 主题评论 start -->
          <li v-for="(item, $index) in replies">
            <div flex="box:first">
              <div class="headimg">
                <router-link class="pic" :to="{ name: 'user-detail', params: { username: item.author.loginname } }" :style="{ backgroundImage: 'url(' + item.author.avatar_url + ')' }"></router-link>
              </div>
              <div class="bd">
                <div flex>
                  <router-link flex-box="0" :to="{ name: 'user-detail', params: { username: item.author.loginname } }">{{ item.author.loginname }}</router-link>
                  <time flex-box="1">{{ item.create_at | formatDate }}</time>
                  <div flex-box="0" class="num">#{{ $index + 1 }}</div>
                </div>
                <div class="markdown-body" v-html="item.content"></div>
                <div class="bottom" flex="dir:right cross:center">
                  <div class="icon" @user2="commentShow(item, $index)">
                    <i class="iconfont icon-comment-topic"></i>
                  </div>
                  <div class="icon" :class="{ fabulous: testThing(item.ups) }" v-if="item.author.loginname !== user.data.loginname" @user3="fabulousItem(item)">
                    <i class="iconfont icon-comment-fabulous"></i>
                    <em v-if="item.ups.length">{{ item.ups.length }}</em>
                  </div>
                </div>
              </div>
            </div>
            <reply-box v-if="detail.commentId === item.id" :loginname="item.author.loginname" :replyId="item.id"></reply-box>
          </li>
          <!-- 主题评论 end -->
        </ul>
        <div class="reply" v-if="user.data.id">
          <reply-box @user4="$vuet.fetch('topic-detail')"></reply-box>
        </div>
        <div class="tip-login" v-if="!user.data.id">
          你还未登录，请先
          <router-link to="/login">登录</router-link>
        </div>
      </template>
    </v-content>
  </div>
</template>
<script>
  import http from 'http'
  import replyBox from './reply-box'
  import { mapModules, mapRules } from 'vuet'

  export default {
    mixins: [
      // 连接详情和登录用户模块
      mapModules({ detail: 'topic-detail', user: 'user-self' }),
      // 一样是使用route规则对页面的数据进行管理
      mapRules({ route: 'topic-detail' })
    ],
    components: { replyBox },
    computed: {
      data () {
        return this.detail.data
      },
      author () {
        return this.detail.data.author
      },
      replies () {
        return this.detail.data.replies
      }
    },
    methods: {
      testThing (ups) { // 验证是否点赞
        return ups.indexOf(this.user.data.id || '') > -1
      },
      fabulousItem ({ ups, id }) { // 点赞
        if (!this.user.data.id) return this.$router.push('/login')
        var index = ups.indexOf(this.user.data.id)
        if (index > -1) {
          ups.splice(index, 1)
        } else {
          ups.push(this.user.data.id)
        }
        http.post(`/reply/${id}/ups`)
      },
      commentShow (item) { // 显示隐藏回复框
        if (!this.user.data.id) return this.$router.push('/login')
        this.detail.commentId = this.detail.commentId === item.id ? null : item.id
      }
    }
  }

</script>

总结

因为篇幅有限，所以只列出了列表和详情的代码，大家有兴趣深入的话，可以看下vue-cnode的代码。这是基于Vuet进行状态管理的完整项目，包含了用户的登录退出，路由页面，滚动位置还原，帖子编辑状态保存等等，麻雀虽小，却是五脏俱全。

Vue.js 轻松实现页面后退时，还原滚动位置

lzxb — Mon, 12 Jun 2017 07:16:29 +0800

前言

从Vue.js 2.x发布之后，陆陆续续做了七八个项目，摸索出来了一套自己的状态管理模式，我将之称为Vuet。它以规则来驱动状态更新，它带来的是开发效率上的飙升，它就像草原，而你是野马，任你随意驰骋，总之它是为敏捷开发而诞生。

缘由

在大型的 Vue 应用程序开发中，多组件通信、多页面通信，往往是跨不过的坎，一个页面组件中往往参杂着页面获取数据的代码和响应用户操作的代码，稍有不慎，就使得代码混乱不堪。A、B、C 三个页面中，都需要同样的数据，然后每一个页面都写一次、发送一次请求，不久之后，代码就十分臃肿了。因此我们就需要vuex这样的第三方库来管理状态了

Vuet 诞生初衷

从列表点击进去到详情，从详情返回后，我们期望能显示回原来的位置，而不是整个页面重新初始化，重新请求数据，这样带来的是用户体验的极度糟糕的，我们期望能有一种规则来定义状态应该如何更新，这便是Vuet.js诞生的初衷。它以规则来定义状态的更新，它也是一种 Vue.js 全新的状态管理模式。天生的规则驱动，使得本次教程的主题，也将变得异常简单，因为我们只需要定义好页面更新的规则即可实现。

有了 Vuex 还需要 Vuet 做什么？

Vuex 和 Vuet 的出发点不一样，Vuex 不建议直接更新状态，而是通过提交mutation来更新状态，而 Vuet 则是允许的。因此 Vuex 和 Vuet 是可以配合使用的，并且有着不同的应用场景，该用Vuex 的地方就用 Vuex，可用Vuet 的地方，就可以使用 Vuet

开始

上面废话了那么久，也是因为Vuet.js才刚刚诞生，急需大家的支持。嗯，接下来我们开始本次的主题！

目录结构

|-- pages                 // 页面组件
|   |-- topic             // 主题模块
|       |-- Detail.vue    // 主题详情
|       |-- List.vue      // 主题列表
|-- router                // router相关
|   |-- index.js          // 入口文件
|   |-- router.js         // 实例化VueRouter
|-- vuet                  // vuet相关
|   |-- index.js          // 入口文件
|   |-- topic-detail.js   // 主题详情的状态
|   |-- topic-list.js     // 主题列表的状态
|   |-- vuet.js           // 实例化Vuet
|- index.html             // 程序页面入口文件
|- main.js                // Vue实例化入口文件

上面是我们本次项目的基本目录结构

安装模块

npm install vue vue-router vuet --save

这些都是基本的模块，想必不用多说，大家都知道的。

route 规则

先给出官方文档地址本章的主题，核心就是在route规则身上，它能帮你获取、更新、重置页面的状态，配合v-route-scroll指令就能帮你处理页面的全局滚动条和 div 元素自身的滚动条

code 社区 api 为例子

main.js

import Vue from 'vue'
import router from './router/'
import vuet from './vuet/'

export default new Vue({
  el: '#app',
  vuet,
  router,
  render (h) {
    return h('router-view')
  }
})

vuet/index.js

import vuet from './vuet'

export default vuet

vuet/vuet.js

import Vue from 'vue'
import Vuet from 'vuet'
import topicList from './topic-list'
import topicDetail from './topic-detail'

Vue.use(Vuet)

const vuet = new Vuet({
  data () {
    return {
      loading: true, // 请求中
      loaderr: false // 请求失败
    }
  },
  pathJoin: '-', // 父子模块的连接路径
  modules: {
    topic: {
      list: topicList,
      detail: topicDetail
    }
  }
})

vuet.beforeEach(({ path, params, state }) => {
  state.loading = true
  state.loaderr = false
})

vuet.afterEach((err, { path, params, state }) => {
  state.loading = false
  state.loaderr = !!err
})

export default vuet

vuet/topic-list.js

export default {
  routeWatch: 'query', // 定义页面的更新规则
  data () {
    return {
      data: [],
      tabs: [
        {
          label: '全部',
          value: 'all'
        },
        {
          label: '精华',
          value: 'good'
        },
        {
          label: '分享',
          value: 'share'
        },
        {
          label: '问答',
          value: 'ask'
        },
        {
          label: '招聘',
          value: 'job'
        }
      ]
    }
  },
  async fetch ({ route }) {
    const { tab = '' } = route.query
    const { data } = await window.fetch(`https://cnodejs.org/api/v1/topics?mdrender=false&tab=${tab}`).then(response => response.json())
    return {
      data
    }
  }
}

vuet/topic-detail.js

export default {
  routeWatch: 'params.id', // 定义页面的更新规则
  data () {
    return {
      data: {
        id: null,
        author_id: null,
        tab: null,
        content: null,
        title: null,
        last_reply_at: null,
        good: false,
        top: false,
        reply_count: 0,
        visit_count: 0,
        create_at: null,
        author: {
          loginname: null,
          avatar_url: null
        },
        replies: [],
        is_collect: false
      }
    }
  },
  async fetch ({ route }) {
    const { data } = await window.fetch(`https://cnodejs.org/api/v1/topic/${route.params.id}`).then(response => response.json())
    return {
      data
    }
  }
}

router/index.js

import router from './router'

export default router

router/router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import TopicList from '../pages/topic/List'
import TopicDetail from '../pages/topic/Detail'

Vue.use(VueRouter)

const RouterView = {
  render (h) {
    return h('router-view')
  }
}

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: RouterView,
      children: [
        {
          path: '',
          name: 'topic-list',
          component: TopicList
        },
        {
          path: '/:id',
          name: 'topic-detail',
          component: TopicDetail
        }
      ]
    }
  ]
})

export default router

pages/topic/List.vue

<template>
  <!-- 
      设置指令监听全局滚动条，
      注意了，光是设置指令可不行，还需要在组件中使用route规则，
      来处理页面滚动的操作，
      局部滚动条直接去掉.window即可
      如果需要同时记录全局滚动条和div滚动条直接设置.window.self即可
      它能做到N多个滚动位置记录，具体看官方文档喔！
      注：记录div滚动的话，需要设置一个name来识别
      v-route-scroll="{ path: 'topic-detail', name: 'xxx' }"
  -->
  <div v-route-scroll.window="{ path: 'topic-list' }">
    <header>
      <ul>
        <li v-for="item in list.tabs">
          <router-link :to="{ name: 'topic-list', query: { tab: item.value } }">{{ item.label }}</router-link>
        </li>
      </ul>
    </header>
    <ul class="list">
      <li v-for="item in list.data">
          <router-link :to="{ name: 'topic-detail', params: { id: item.id } }">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
  import { mapRules, mapModules } from 'vuet'

  export default {
    mixins: [
      // 设置模块的更新规则
      mapRules({
        route: 'topic-list'
      }),
      // 连接模块的状态
      mapModules({
        list: 'topic-list'
      })
    ]
  }
</script>
<style scoped>

</style>

pages/topic/Detail.vue

<template>
  <div v-route-scroll.window="{ path: 'topic-detail' }">
    <h3>{{ detail.data.title }}</h3>
    <div v-html="detail.data.content"></div>
  </div>  
</template>
<script>
  import { mapRules, mapModules } from 'vuet'

  export default {
    mixins: [
      // 设置模块的更新规则
      mapRules({
        route: 'topic-detail'
      }),
      // 连接模块的状态
      mapModules({
        detail: 'topic-detail'
      })
    ]
  }
</script>
<style scoped>

</style>

总结

咋的一看，Vuet 看起来也不是很复杂，只需要定义好模块状态，然后在组件中设置对应的规则来更新模块的状态即可。其实 vuet 自带的 route 规则能够支持同时记录全局滚动条、div 自身的滚动条，这样就能大大的提升了我们的用户体验

Vue 大型 SPA 项目的最佳实践

lzxb — Tue, 14 Mar 2017 00:34:21 +0800

前言

从去年 10 月份之后 Vue 2.0 发布了正式版，便将 React 全线转到了 Vue 上开发，陆陆续续开发了四五个项目，多多少少积累了一些心得，现在拿出来和大家分享一下和探讨一下。本人英语水平太 low，如有错误，还望指正。

现代前端的标配

这两年前端发展迅速，日新月异，各种框架层出不穷，这是一个坏时代，也是一个最好的时代，有幸的是能够身处在这个时代去亲眼见证它、实践它。

前端框架：Vue、React、Angular
打包工具：Webpack、Gulp、Rollup
语法效验：Eslint
css 预处理器：Less、Sass、PostCSS
语法编译器：Babel、TypeScript ...... 一个 web 技术新时代的来临，如滚滚洪流般推动着历史的发展。

多项目统一的打包配置

Vue 官方虽然提供了 vue-cli 的脚手架，供我们得以快速开发，但是如果有多个项目，每个项目都生成一套打包配置，很容易造成各个项目都进行一些定制，进而造成项目之间的一些偏离，然而这些都不是我们想要的，所以有必要单独提取出来一套内部的打包配置，创建一个单独的 git 包，然后让其他项目依赖这个 git 包即可。

Vuex 应该如何使用？

很抱歉，在我的项目中，Vuex 仅仅是用来存储用户信息等一些全局通用的数据，我不建议将每一个页面的数据存储到 Store 中，那样会导致程序极其的复杂，让我每新增一个页面，都感觉到倍增压力。

统一 Mixin 处理页面数据请求

在 SPA 应用中，最离不开的就是如何方便快捷的获取页面的数据，统一处理路由的变化去更新数据，为页面进行数据缓存，实现列表、详情、编辑、新增共用一个 model，而且有的时候列表的字段不如详情的字段多，所以还要增加一个字段补全的机制。

// 一个简单的例子
export default function MixinPagesGet () {
  const opt = {
    list: []
    // 各种配置的参数等等
  }
  Object.assign(opt, arguments[0])
  return {
    list: {
      // 列表的mixin各种逻辑
    },
    detail: {
      // 详情、修改、新增的mixin各种逻辑
    }
  }
}

统一的处理 Methods 的错误

为了避免回调地狱，Promise 简直就是一个神器，一旦遇上，便恨初见晚，不管是 Fetch 还是第三方的请求模块，都普遍支持了 Promise，我们可以使用 vue-methods-promise 模块对各种错误进行统一处理

更好的 Vue 组件开发规范

在 JS 中，object 对象的 key 值是没有顺序之分的，但是人的阅读顺序是有顺序的，按照钩子的执行顺序来书写可以让别人更好的读懂你的代码，如果不是钩子则放到最后。如：

export default {
  mixins: [],
  data () {
    return {}
  },
  mounted () {
  },
  destroyed () {
  },
  watch: {
  },
  methods: {
  }
}

如何打一个标准包

在日常开发中，我们有开发环境、测试环境、正式环境等等，我们需要打出一个标准包，让运维进行配置不同环境的。我们可以在入口的 html 文件中设置

 <% if (process.env.NODE_ENV == 'production') { %>
<script src="<%=webpack.publicPath %>configs.js?v=<%=new Date().getTime()%>"></script>
 <% } %>

在 config 的 JS 中设置

let configs = {}
if (process.env.NODE_ENV === 'production') {
  configs = window.__configs // 在config.js中设置的
}
export default configs

基于 vue2 + vue-router + vuex + ES6 + less + flex.css 重写 vue 版 cnode 社区，使用 webpack 打包

lzxb — Fri, 16 Dec 2016 09:42:20 +0800

前言

项目灵感的最初来源是@shinygang https://github.com/shinygang/Vue-cnodejsVue-cnodejs,来自的感谢cnodejs社区提供的 API。 github：https://github.com/lzxb/vue-cnode

感悟

在vue-cnode升级vue2的时候，在公司内部已经有两个正式项目使用vue2，
遇到的一个最难的问题，就是如何能在页面后退时还原数据和滚动条位置，
虽然vue2内置了keep-alive组件，vue-router也提供了scrollBehavior方法进行设置，
但是仍然无法满足需求，后来阅读vue-router的源码发现，
每个页面都会自动在history.state对象中存储一个对应的key值，
便利用这个特性实现了页面后退时，数据和滚动条还原，
不过目前只是实现了页面的顶级组件还原，
如果需要对顶级组件下的子组件实现数据还原，
可以利用$options._scopeId来实现。
哈哈，具体如何实现就要靠大家自己发挥想象力了

技术栈

基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区，使用webpack打包

使用项目

1.克隆项目：      git clone https://github.com/lzxb/vue-cnode.git
2.安装nodejs
3.安装依赖：      npm install
4.启动服务：      npm run dev
5.发布代码：      npm run dist

功能

[x] 首页列表，上拉加载
[x] 主题详情，回复，点赞
[x] 消息列表
[x] 消息提醒
[x] 个人主页
[x] 用户信息
[x] 登录
[x] 退出
[x] 关于
[x] 页面后退，数据还原
[x] 页面后台，滚动位置还原
[x] ajax 请求拦截器
[x] 页面跳转，不再执行此页面的 ajax 请求回调方法
[x] 启动图

项目目录说明

.
|-- config                           // 项目开发环境配置
|   |-- index.js                     // 项目打包部署配置
|-- src                              // 源码目录
|   |-- components                   // 公共组件
|       |-- content.vue              // 页面内容公共组件
|       |-- data-null.vue            // 数据为空时公共组件
|       |-- footer.vue               // 底部导航栏公共组件
|       |-- header.vue               // 页面头部公共组件
|       |-- index.js                 // 加载各种公共组件
|       |-- loading.vue              // 页面数据加载公共组件
|   |-- config                       // 路由配置和程序的基本信息配置
|       |-- config.js                // 配置项目的基本信息
|       |-- routes.js                // 配置页面路由
|   |-- css                          // 各种css文件
|       |-- common.css               // 全局通用css文件
|   |-- iconfont                     // 各种字体图标
|   |-- images                       // 公共图片
|   |-- less                         // 各种less文件
|       |-- common.less              // 全局通用less文件
|       |-- config.less              // 全局通用less配置文件
|   |-- lib                          // 各种插件
|       |-- route-data               // 实现页面后退数据还原，滚动位置还原
|   |-- mixins                       // 各种全局mixins
|       |-- pull-list.js             // 上拉加载
|   |-- pages                        // 各种页面组件
|       |-- about                    // 关于
|       |-- index                    // 首页
|       |-- login                    // 登录
|       |-- my                       // 我的主页，和消息列表
|       |-- signout                  // 退出
|       |-- topic                    // 主题详情，主题新建
|       |-- user                     // 查看用户资料
|   |-- store                        // vuex的状态管理
|       |-- index.js                 // 加载各种store模块
|       |-- user.js                  // 用户store
|   |-- template                     // 各种html文件
|       |-- index.html               // 程序入口html文件
|   |-- util                         // 公共的js方法
|   |-- app.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- .babelrc                         // ES6语法编译配置
|-- webpack.config.js                // 程序打包配置
|-- server.js                        // 开发时使用的服务器
|-- README.md                        // 项目说明
|-- package.json                     // 配置项目相关信息，通过执行 npm init 命令创建
.

扫一扫二维码查看效果

从零构建 Vue 2 + vue-router + vuex 开发环境到入门，实现基本的登录退出功能 (二)

lzxb — Sat, 03 Dec 2016 14:32:26 +0800

前言

国庆在回家的路上，得知了vue2发布了正式版，
国庆回来后，在公司内两个项目便直接应用上了vue2，
一个是PC端的商户后台，一个是微信端商城，
都是基于Vue2、vue-router、vuex ......
在开发的过程中，遇到了一系列的问题，
比如页面后退数据还原，滚动条还原，
登录超时，获取列表数据，表单提交，
多台服务器自动化部署，最终后一个个解决了，
能够平稳的从react切换到vue2开发，vue的文档功不可没。

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

源码说明

项目目录说明

.
|-- config                           // 项目开发环境配置
|   |-- index.js                     // 项目打包部署配置
|-- src                              // 源码目录
|   |-- components                   // 公共组件
|       |-- header.vue               // 页面头部公共组件
|       |-- index.js                 // 加载各种公共组件
|   |-- config                       // 路由配置和程序的基本信息配置
|       |-- routes.js                // 配置页面路由
|   |-- css                          // 各种css文件
|       |-- common.css               // 全局通用css文件
|   |-- iconfont                     // 各种字体图标
|   |-- images                       // 公共图片
|   |-- less                         // 各种less文件
|       |-- common.less              // 全局通用less文件
|   |-- pages                        // 页面组件
|       |-- home                     // 个人中心
|       |-- index                    // 网站首页
|       |-- login                    // 登录
|       |-- signout                  // 退出
|   |-- store                        // vuex的状态管理
|       |-- index.js                 // 加载各种store模块
|       |-- user.js                  // 用户store
|   |-- template                     // 各种html文件
|       |-- index.html               // 程序入口html文件
|   |-- util                         // 公共的js方法，vue的mixin混合
|   |-- app.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- .babelrc                         // ES6语法编译配置
|-- gulpfile.js                      // 启动，打包，部署，自动化构建
|-- webpack.config.js                // 程序打包配置
|-- server.js                        // 代理服务器配置
|-- README.md                        // 项目说明
|-- package.json                     // 配置项目相关信息，通过执行 npm init 命令创建
.

1.html 入口文件，源文件路径：src/template/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>vue2-demo</title>
</head>

<body>
    <div id="app">
        <router-view></router-view>
    </div>
</body>

</html>

2.js 入口文件，源文件路径：src/main.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './config/routes'
import store from './store/'
import components from './components/' //加载公共组件

import './css/common.css'
import './less/common.less'

Object.keys(components).forEach((key) => {
    var name = key.replace(/(\w)/, (v) => v.toUpperCase()) //首字母大写
    Vue.component(`v${name}`, components[key])
})

Vue.use(VueRouter)

const router = new VueRouter({
    routes
})
router.beforeEach(({meta, path}, from, next) => {
    var { auth = true } = meta
    var isLogin = Boolean(store.state.user.id) //true用户已登录， false用户未登录

    if (auth && !isLogin && path !== '/login') {
        return next({ path: '/login' })
    }
    next()
})

new Vue({ store, router }).$mount('#app')

3.页面路由，权限配置，源文件路径：src/config/routes.js

import App from '../app'

export default [
    {
        path: '/',
        component: App,
        children: [
            {
                path: '/login', //登录
                meta: { auth: false },
                component: resolve => require(['../pages/login/'], resolve)
            },
            {
                path: '/signout', //退出
                component: resolve => require(['../pages/signout/'], resolve)
            },
            {
                path: '/home', //个人主页
                component: resolve => require(['../pages/home/'], resolve)
            },
            {
                path: '/', //首页
                meta: { auth: false },
                component: resolve => require(['../pages/index/'], resolve)
            },
            {
                path: '*', //其他页面，强制跳转到登录页面
                redirect: '/login'
            }
        ]
    }
]

4.页面入口组件，源文件路径：src/app.vue

<style lang="less" scoped>

</style>
<template>
    <router-view></router-view>
</template>
<script>
    export default {

    }
</script>

5.store 实例化，导入各种 modules，源文件路径：src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'

Vue.use(Vuex)

export default new Vuex.Store({
    strict: process.env.NODE_ENV !== 'production', //在非生产环境下，使用严格模式
    modules: {
        user
    }
})

6.定义 store user 模块，源文件路径：src/store/user.js

import Vue from 'vue'

export const USER_SIGNIN = 'USER_SIGNIN' //登录成功
export const USER_SIGNOUT = 'USER_SIGNOUT' //退出登录

export default {
    state: JSON.parse(sessionStorage.getItem('user')) || {},
    mutations: {
        [USER_SIGNIN](state, user) {
            sessionStorage.setItem('user', JSON.stringify(user))
            Object.assign(state, user)
        },
        [USER_SIGNOUT](state) {
            sessionStorage.removeItem('user')
            Object.keys(state).forEach(k => Vue.delete(state, k))
        }
    },
    actions: {
        [USER_SIGNIN]({commit}, user) {
            commit(USER_SIGNIN, user)
        },
        [USER_SIGNOUT]({commit}) {
            commit(USER_SIGNOUT)
        }
    }
}

7.加载各种公共组件，源文件路径：src/components/index.js

import header from './header'
export default { header }

<style lang="less" scoped>
    .header {
        position: relative;
        line-height: 38px;
        color: #fff;
        text-align: center;
        background: #222;
        .item {
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 1;
            a {
                color: #fff;
            }
        }
        .left {
            left: 10px;
        }
        .right {
            right: 10px;
        }
    }
</style>
<template>
    <header class="header">
        <div class="item left">
            <slot name="left"></slot>
        </div>
        <div class="title">{{title}}</div>
        <div class="item right">
            <slot name="right"></slot>
        </div>
    </header>
</template>
<script>
    export default {
        props: {
            title: {
                type: String,
                default: ''
            }
        }
    }
</script>

9.引入全局公共 css，源文件路径：src/css/common.css

input::-webkit-outer-spin-button,  
input::-webkit-inner-spin-button{  
    -webkit-appearance: none !important;  
    margin: 0;  
}

10.引入全局公共 less，源文件路径：src/less/common.less

* {
    padding: 0;
    margin: 0;
}

11.创建首页，，源文件路径：src/pages/index.vue

<style lang="less" scoped>
    .login-msg {
        padding: 50px;
        text-align: center;
    }
    .msg {
        padding: 50px;
        text-align: center;
        font-size: 20px;
        color: red;
    }
</style>
<template>
    <div>
        <v-header title="首页">
            <router-link slot="right" v-if="user.id" to="/home">{{user.name}}</router-link>
        </v-header>
        <div class="login-msg" v-if="!user.id">
            <router-link to="/login">你还未登录，请先登录</router-link>
        </div>
        <div class="msg" v-if="user.id">
            <img width="50" :src="logo" alt=""> <br>
            哈哈，恭喜你已经入坑Vue2
        </div>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    import logo from './logo.png'
    export default {
        data() {
            return {
                logo
            }
        },
        computed: mapState({ user: state => state.user }),
    }
</script>

<style lang="less" scoped>
    .login {
        padding: 50px;
        text-align: center;
        .line {
            padding: 5px;
            input {
                padding: 0 10px;
                line-height: 28px;
            }
        }
        button {
            padding: 0 20px;
            margin-top: 20px;
            line-height: 28px;
        }
    }
</style>
<template>
    <div>
        <v-header title="登录">
            <router-link slot="left" to="/">返回</router-link>
        </v-header>
        <form class="login" v-on:submit.prevent="submit">
            <div class="line">  
                <div v-show="btn && !form.id">id不能为空</div>
                <input type="number" placeholder="输入你的id" v-model="form.id">
            </div>
            <div class="line">
                <div v-show="btn && !form.name">用户名不能为空</div>
                <input type="text" placeholder="输入你的用户名" v-model="form.name">
            </div>
            <button>登录</button>
        </form>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    import { USER_SIGNIN } from 'store/user'

    export default {
        data() {
            return {
                btn: false, //true 已经提交过， false没有提交过
                form: {
                    id: '',
                    name: ''
                }
            }
        },
        methods: {
            ...mapActions([USER_SIGNIN]),
            submit() {
                this.btn = true
                if(!this.form.id || !this.form.name) return
                this.USER_SIGNIN(this.form)
                this.$router.replace({ path: '/home' })
            }
        }
    }
</script>

13.创建个人主页，，源文件路径：src/pages/home.vue

<style lang="less" scoped>

</style>
<template>
    <div>
        <v-header title="首页">
            <router-link slot="left" to="/">首页</router-link>
            <router-link slot="right" to="/signout">退出</router-link>
        </v-header>
        <div style="padding: 50px;">{{user.name}}欢迎回家</div>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    export default {
        computed: mapState({ user: state => state.user }),
    }
</script>

14.创建退出页，，源文件路径：src/pages/signout.vue

<style lang="less" scoped>
    .btn {
        padding: 50px;
        text-align: center;
        button {
            padding: 5px 10px;
        }
    }
</style>
<template>
    <div>
        <v-header title="退出">
            <router-link slot="left" to="/home">返回</router-link>
        </v-header>
        <div class="btn">
            <button v-on:click="submit">确认退出</button>
        </div>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    import { USER_SIGNOUT } from 'store/user'
    export default {
        methods: {
            ...mapActions([USER_SIGNOUT]),
            submit() {
                this.USER_SIGNOUT()
                this.$router.replace({ path: '/login' })
            }
        }
    }
</script>

进击 vue2

vue2重构cnode社区，将会近日完成，
一个从0构建的vue2的完整项目，
可以使用最简单的方式实现页面后台时状态还原，
局部滚动条还原等。

lzxb (狼族小狈)

基于 Vue SSR 的微架构在 FOLLOWME5.0 实践

首次实践

无路由微模块

大跃进

Genesis

远程组件

5.0 的服务拆分

内网域名

服务的加载策略

关于微前端

传送们

Vue.js 项目重构，轻松实现上拉加载滚动位置还原

前言

项目源码

需求分析

安装

Vuet 实例

总结

Vue.js 轻松实现页面后退时，还原滚动位置

前言

缘由

Vuet 诞生初衷

有了 Vuex 还需要 Vuet 做什么？

开始

目录结构

安装模块

route 规则

code 社区 api 为例子

总结

Vue 大型 SPA 项目的最佳实践

前言

现代前端的标配

多项目统一的打包配置

Vuex 应该如何使用？

统一 Mixin 处理页面数据请求

统一的处理 Methods 的错误

更好的 Vue 组件开发规范

如何打一个标准包

基于 vue2 + vue-router + vuex + ES6 + less + flex.css 重写 vue 版 cnode 社区，使用 webpack 打包

前言

感悟

技术栈

使用项目

功能

项目目录说明

扫一扫二维码查看效果

从零构建 Vue 2 + vue-router + vuex 开发环境到入门，实现基本的登录退出功能 (二)

前言

源码说明

项目目录说明

1.html 入口文件，源文件路径：src/template/index.html

2.js 入口文件，源文件路径：src/main.js

3.页面路由，权限配置，源文件路径：src/config/routes.js

4.页面入口组件，源文件路径：src/app.vue

5.store 实例化，导入各种 modules，源文件路径：src/store/index.js

6.定义 store user 模块，源文件路径：src/store/user.js

7.加载各种公共组件，源文件路径：src/components/index.js

8.封装页面公共头部组件，源文件路径：src/components/header.js

9.引入全局公共 css，源文件路径：src/css/common.css

10.引入全局公共 less，源文件路径：src/less/common.less

11.创建首页，，源文件路径：src/pages/index.vue

12.创建登录页，，源文件路径：src/pages/login.vue

13.创建个人主页，，源文件路径：src/pages/home.vue

14.创建退出页，，源文件路径：src/pages/signout.vue

进击 vue2