Vue.js2.0 官方 demo 源码解析

vue-hackernews-2.0源码

build

  1. webpack.base.config.js //基本配置

    • entry: './src/client-entry.js' ;
    • output: 'client-bundle.js' ;
  2. webpack.client.config.js // 客户端配置

    • filename: 'client-vendor-bundle.js' ;
    • 增加了对stylus处理 ;
    • 出现了 Object.assign({}, base, {}) 合并dep copy函数, 是对baseConfig的扩展 ;
  3. webpack.server.config.js // 服务器端配置

    • entry: './src/server-entry.js' ;
    • output: 'server-bundle.js' ;
    • 增加了 externals plugins 处理 ;
  4. setup-dev-server.js // dev服务器端设置 增加中间件支持

    • 引用 webpack.client.config.js , webpack.server.config.js , memory-fs ;
    • 设置了 给clientConfig.entry.app添加 hot load ;
    • exports 了 setupDevServer (app, onUpdate) 函数 ;
    • app.use()'webpack-dev-middleware' ;'webpack-hot-middleware'中间件 ;
    • serverCompiler.watch({ onUpdate(outputPath) }), outputPath 是 serverConfig 的参数 ;

entry

  1. client-entry.js // 客户端入口

    • store.replaceState(window.__INITIAL_STATE__) // store 状态初始化 ;
    • app.$mount('#app') // dom装载 ;
  2. server-entry.js // 服务器端入口,

    • export default context(), router.push(context.url) // 叫做bundleRenderer()的函数
    • preFetch // 预加载钩子函数

server

  1. server.js // 服务器端

    • 创建 createBundleRenderer ;
    • 分环境解析 index.html;
    • 分环境创建 renderer , dis模式引入./dist/server-bundle.js, dev模式引入./build/setup-dev-server, 并设置renderer.renderToStream(context) 模式渲染 ;
    • res.write(html.head) renderStream.on('data', {chunk}) res.write(chunk) res.end(html.tail) 渲染结束 ;
    • 可以看出 始终在操作 index.html ;

client

  1. app.js // 客户端

    • 引入'vuex-router-sync' sync(store, router) ;
    • 注册全局 filters ;
    • new Vue({router, store, ...App}) // 创建实例 ;
  2. App.vue // App

    • 增建了 transition router-link 标签 ;
    • 示例: <router-link to="/google">Google</router-link> ;
    • css 开始使用 stylus 预处理 ,去掉了<script> ;
  3. router/index.js // 路由

    • 设置路由规则, 使用mode: 'history' ;
    • 引入 createListView()函数 , ItemView UserView 组件 ;
  4. filters/index.js // 过滤器

    • host (url) timeAgo (time) 增加 time 和 url 的处理 ;
    • 使用 ~~ 取整 ( 不会改变整数位 ) ;
  5. store/api.js // Firebase api ;

    • 引入 firebase lru-cache 依赖, 并在服务器端缓存 15分钟 createCache () ;
    • 分环境创建api, 提供 fetch fetchItem … 函数 ;
    • 主要是对 Firebase api 的用法 ;
  6. store/index.js // vuex 此处需要补文档QAQ 嘤嘤嘤补完了~A~

    • state : activeType itemsPerPage items users lists ;
    • actions : FETCH_LIST_DATA -> ENSURE_ACTIVE_ITEMS -> FETCH_ITEMS FETCH_USER ;
    • mutations : SET_ACTIVE_TYPE SET_LIST SET_ITEMS SET_USER ;
    • getters : activeIds activeItems ;
    • vuex过程 : Component -> Action -> dispatch -> Mutation-> 修改 -> State -> 通知 -> Getter -> 刷新 // 提高可维护性 降低调试难度 ;
  7. views/TtemView.vue 详情页

    function fetchItem (store) { // this.$store
      return store.dispatch('FETCH_ITEMS', {
        ids: [store.state.route.params.id]
      })
    }
    export default {
      computed: { // Document中推荐的计算属性
        item () {
          return this.$store.state.items[this.$route.params.id]
        }
      },
      preFetch: fetchItem, // 在server-entry.js中有定义, 暂不清楚是什么机制
      beforeMount () { // 装载前获取数据
        fetchItem(this.$store)
      }
    }
    
    • 根据第6条的vuex过程, 可以看出 :
    • Action阶段 : beforeMount 中调用 this.$store.dispatch('FETCH_ITEMS', {}), 修改数据 ;
    • Mutation阶段 : 'FETCH_ITEMS' 中调用 commit('SET_ITEMS', { items }), 设置 {id: item} ;
    • State阶段 : Vue.set(state.items, item.id, item) ;
    • Getter阶段 : 刷新数据, computed中取值, 视图更新 ;
  8. view..., components... //
    没什么好说的啦 完结撒花, 关键之处在于 server 端渲染和 vuex , 不足之处 请多多指教 🌻O(∩_∩)O🌻


todo

用vue2.0 改写 博客, 会在一周内完成.
附送用vue2.0一个仿写的豆瓣首页 + 豆瓣读书首页 Github源码

Paste_Image.png

Paste_Image.png