npmrun
4 years ago
26 changed files with 500 additions and 121 deletions
@ -0,0 +1,2 @@ |
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{17:function(n,t,e){"use strict";e.r(t);var s=e(4),u=Object(s.a)({},(function(){var n=this.$createElement;return(this._self._c||n)("div",[this._v("\n about\n")])}),[],!1,null,null,null);t.default=u.exports}}]); |
|||
//# sourceMappingURL=2.a0b09c382597960bc0ac.js.map
|
|||
@ -0,0 +1 @@ |
|||
{"version":3,"file":"2.a0b09c382597960bc0ac.js","sources":["webpack:///2.a0b09c382597960bc0ac.js"],"mappings":"AAAA","sourceRoot":""} |
|||
@ -0,0 +1,2 @@ |
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{16:function(t,e,s){"use strict";s.r(e);var i={asyncData:function(t){var e=t.store,s=t.route;return e.dispatch("fetchItem",s.params.id)},computed:{item:function(){return this.$store.state.items[this.$route.params.id]}}},n=s(4),a=Object(n.a)(i,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",[this._v("asad\n "),e("p",[this._v(this._s(this.item))])])}),[],!1,null,null,null);e.default=a.exports}}]); |
|||
//# sourceMappingURL=3.c1ce12f0c4971c482f67.js.map
|
|||
@ -0,0 +1 @@ |
|||
{"version":3,"file":"3.c1ce12f0c4971c482f67.js","sources":["webpack:///3.c1ce12f0c4971c482f67.js"],"mappings":"AAAA","sourceRoot":""} |
|||
@ -1,2 +0,0 @@ |
|||
!function(e){function t(t){for(var r,a,c=t[0],l=t[1],i=t[2],s=0,f=[];s<c.length;s++)a=c[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&f.push(o[a][0]),o[a]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(p&&p(t);f.length;)f.shift()();return u.push.apply(u,i||[]),n()}function n(){for(var e,t=0;t<u.length;t++){for(var n=u[t],r=!0,c=1;c<n.length;c++){var l=n[c];0!==o[l]&&(r=!1)}r&&(u.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={0:0},u=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/dist/";var c=window.webpackJsonp=window.webpackJsonp||[],l=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var p=l;u.push([11,1]),n()}([,function(e,t,n){var r=n(7);r.__esModule&&(r=r.default),"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);(0,n(12).default)("895d7142",r,!0,{})},,,,,function(e,t,n){"use strict";n(1)},function(e,t,n){"use strict";n.r(t);var r=n(2),o=n.n(r),u=n(3),a=n.n(u)()(o.a);a.push([e.i,"*[data-v-d2943b3a] {\n color: rebeccapurple;\n}\n","",{version:3,sources:["webpack://./src/App.vue"],names:[],mappings:"AAAA;EACE,oBAAoB;AACtB",sourcesContent:["*[data-v-d2943b3a] {\n color: rebeccapurple;\n}\n"],sourceRoot:""}]),t.default=a},,,,function(e,t,n){"use strict";n.r(t);var r=n(5),o={data:function(){return{}},mounted:function(){console.log("asd")}},u=(n(6),n(4)),a=Object(u.a)(o,(function(){var e=this.$createElement;return(this._self._c||e)("div",{attrs:{id:"app"}},[this._v("\n hello world!!!\n")])}),[],!1,null,"d2943b3a",null).exports;({app:new r.a({render:function(e){return e(a)}})}).app.$mount("#app")}]); |
|||
//# sourceMappingURL=app.861ecf6e9a9de782243f.js.map
|
|||
@ -1 +0,0 @@ |
|||
{"version":3,"file":"app.861ecf6e9a9de782243f.js","sources":["webpack:///app.861ecf6e9a9de782243f.js"],"mappings":"AAAA","sourceRoot":""} |
|||
@ -0,0 +1,2 @@ |
|||
!function(t){function e(e){for(var r,i,u=e[0],c=e[1],s=e[2],f=0,p=[];f<u.length;f++)i=u[f],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(t[r]=c[r]);for(l&&l(e);p.length;)p.shift()();return a.push.apply(a,s||[]),n()}function n(){for(var t,e=0;e<a.length;e++){for(var n=a[e],r=!0,u=1;u<n.length;u++){var c=n[u];0!==o[c]&&(r=!1)}r&&(a.splice(e--,1),t=i(i.s=n[0]))}return t}var r={},o={0:0},a=[];function i(e){if(r[e])return r[e].exports;var n=r[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.e=function(t){var e=[],n=o[t];if(0!==n)if(n)e.push(n[2]);else{var r=new Promise((function(e,r){n=o[t]=[e,r]}));e.push(n[2]=r);var a,u=document.createElement("script");u.charset="utf-8",u.timeout=120,i.nc&&u.setAttribute("nonce",i.nc),u.src=function(t){return i.p+""+({}[t]||t)+"."+{2:"a0b09c382597960bc0ac",3:"c1ce12f0c4971c482f67"}[t]+".js"}(t);var c=new Error;a=function(e){u.onerror=u.onload=null,clearTimeout(s);var n=o[t];if(0!==n){if(n){var r=e&&("load"===e.type?"missing":e.type),a=e&&e.target&&e.target.src;c.message="Loading chunk "+t+" failed.\n("+r+": "+a+")",c.name="ChunkLoadError",c.type=r,c.request=a,n[1](c)}o[t]=void 0}};var s=setTimeout((function(){a({type:"timeout",target:u})}),12e4);u.onerror=u.onload=a,document.head.appendChild(u)}return Promise.all(e)},i.m=t,i.c=r,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="/dist/",i.oe=function(t){throw console.error(t),t};var u=window.webpackJsonp=window.webpackJsonp||[],c=u.push.bind(u);u.push=e,u=u.slice();for(var s=0;s<u.length;s++)e(u[s]);var l=c;a.push([14,1]),n()}({10:function(t,e,n){"use strict";n.r(e);var r=n(6),o=n.n(r),a=n(7),i=n.n(a)()(o.a);i.push([t.i,"*[data-v-0bb2a73c] {\n color: red;\n}\n","",{version:3,sources:["webpack://./src/App.vue"],names:[],mappings:"AAAA;EACE,UAAU;AACZ",sourcesContent:["*[data-v-0bb2a73c] {\n color: red;\n}\n"],sourceRoot:""}]),e.default=i},14:function(t,e,n){"use strict";n.r(e);var r=n(0),o={data:function(){return{}},mounted:function(){console.log("asd")}},a=(n(9),n(4)),i=Object(a.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"app"}},[this._v("\n hello world!!!\n "),e("div",{staticStyle:{display:"flex","justify-content":"space-around"}},[e("router-link",{staticStyle:{width:"100%","text-align":"center","line-height":"50px"},attrs:{tag:"div",to:"/home"}},[this._v("home")]),e("router-link",{staticStyle:{width:"100%","text-align":"center","line-height":"50px"},attrs:{tag:"div",to:"/about"}},[this._v("about")])],1),e("router-view")],1)}),[],!1,null,"0bb2a73c",null).exports,u=n(2);r.a.use(u.a);var c=n(3);r.a.use(c.a);var s=n(8);Vue.mixin({beforeRouteUpdate:function(t,e,n){var r=this.$options.asyncData;r?r({store:this.$store,route:t}).then(n).catch(n):n()}});var l,f,p=(l=new u.a({mode:"history",routes:[{path:"/",redirect:"/home"},{path:"/home",component:function(){return n.e(3).then(n.bind(null,16))}},{path:"/about",component:function(){return n.e(2).then(n.bind(null,17))}}]}),f=new c.a.Store({state:{items:{}},actions:{fetchItem:function(t,e){var n=t.commit;return new Promise((function(t,e){n("setItem",{id:1,item:"111"}),t()}))}},mutations:{setItem:function(t,e){var n=e.id,o=e.item;r.a.set(t.items,n,o)}}}),Object(s.sync)(f,l),{app:new r.a({router:l,store:f,render:function(t){return t(i)}}),router:l,store:f}),d=p.app,h=p.router,v=p.store;window.__INITIAL_STATE__&&v.replaceState(window.__INITIAL_STATE__),h.onReady((function(){h.beforeResolve((function(t,e,n){var r=h.getMatchedComponents(t),o=h.getMatchedComponents(e),a=!1,i=r.filter((function(t,e){return a||(a=o[e]!==t)}));if(!i.length)return n();Promise.all(i.map((function(e){if(e.asyncData)return e.asyncData({store:v,route:t})}))).then((function(){n()})).catch(n)})),d.$mount("#app")}))},5:function(t,e,n){var r=n(10);r.__esModule&&(r=r.default),"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);(0,n(15).default)("20f5089d",r,!0,{})},9:function(t,e,n){"use strict";n(5)}}); |
|||
//# sourceMappingURL=app.aa5c7c7447f99154a897.js.map
|
|||
@ -0,0 +1 @@ |
|||
{"version":3,"file":"app.aa5c7c7447f99154a897.js","sources":["webpack:///app.aa5c7c7447f99154a897.js"],"mappings":"AAAA","sourceRoot":""} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
{"version":3,"file":"manifest.9af4bfe8b557eda40f7c.js","sources":["webpack:///manifest.9af4bfe8b557eda40f7c.js"],"mappings":"AAAA;;;;;;AAYA;;;;;AAyvPA;;;;;;AA08FA","sourceRoot":""} |
|||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@ |
|||
{"version":3,"file":"manifest.d2d3e546256e88a4c784.js","sources":["webpack:///manifest.d2d3e546256e88a4c784.js"],"mappings":"AAAA;;;;;;AA+PA","sourceRoot":""} |
|||
@ -1,68 +1,95 @@ |
|||
{ |
|||
"publicPath": "/dist/", |
|||
"all": [ |
|||
"app.861ecf6e9a9de782243f.js", |
|||
"app.861ecf6e9a9de782243f.js.map", |
|||
"manifest.d2d3e546256e88a4c784.js", |
|||
"manifest.d2d3e546256e88a4c784.js.map" |
|||
"2.a0b09c382597960bc0ac.js", |
|||
"2.a0b09c382597960bc0ac.js.map", |
|||
"3.c1ce12f0c4971c482f67.js", |
|||
"3.c1ce12f0c4971c482f67.js.map", |
|||
"app.aa5c7c7447f99154a897.js", |
|||
"app.aa5c7c7447f99154a897.js.map", |
|||
"manifest.9af4bfe8b557eda40f7c.js", |
|||
"manifest.9af4bfe8b557eda40f7c.js.map" |
|||
], |
|||
"initial": [ |
|||
"manifest.d2d3e546256e88a4c784.js", |
|||
"app.861ecf6e9a9de782243f.js" |
|||
"manifest.9af4bfe8b557eda40f7c.js", |
|||
"app.aa5c7c7447f99154a897.js" |
|||
], |
|||
"async": [ |
|||
"2.a0b09c382597960bc0ac.js", |
|||
"3.c1ce12f0c4971c482f67.js" |
|||
], |
|||
"async": [], |
|||
"modules": { |
|||
"9dec38a2": [ |
|||
6, |
|||
7 |
|||
], |
|||
"336a7835": [ |
|||
2, |
|||
3 |
|||
6, |
|||
7 |
|||
], |
|||
"165589ea": [ |
|||
0, |
|||
1 |
|||
"92db5ef6": [ |
|||
6, |
|||
7 |
|||
], |
|||
"e0eacffe": [ |
|||
6, |
|||
7 |
|||
], |
|||
"b1fe4c2a": [ |
|||
6, |
|||
7 |
|||
], |
|||
"f1ad206e": [ |
|||
4, |
|||
5 |
|||
], |
|||
"98dff2f8": [ |
|||
2, |
|||
3 |
|||
6, |
|||
7 |
|||
], |
|||
"08194f7f": [ |
|||
2, |
|||
3 |
|||
], |
|||
"b1fe4c2a": [ |
|||
2, |
|||
3 |
|||
6, |
|||
7 |
|||
], |
|||
"9dec38a2": [ |
|||
2, |
|||
3 |
|||
"6f54afb6": [ |
|||
6, |
|||
7 |
|||
], |
|||
"1ab9b00f": [ |
|||
0, |
|||
1 |
|||
"a5e43666": [ |
|||
4, |
|||
5 |
|||
], |
|||
"388fc7b2": [ |
|||
0, |
|||
1 |
|||
"6a380720": [ |
|||
4, |
|||
5 |
|||
], |
|||
"4dc8caee": [ |
|||
2, |
|||
3 |
|||
6, |
|||
7 |
|||
], |
|||
"4544517c": [ |
|||
2, |
|||
3 |
|||
6, |
|||
7 |
|||
], |
|||
"fe4c40fa": [ |
|||
2, |
|||
3 |
|||
6, |
|||
7 |
|||
], |
|||
"5163fcfe": [ |
|||
0, |
|||
1 |
|||
4, |
|||
5 |
|||
], |
|||
"3ae59d9f": [ |
|||
6, |
|||
7 |
|||
], |
|||
"d1915502": [ |
|||
2, |
|||
3 |
|||
], |
|||
"f78e79c6": [ |
|||
0, |
|||
1 |
|||
] |
|||
} |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -1,12 +1,25 @@ |
|||
import Vue from 'vue' |
|||
import App from './App.vue' |
|||
|
|||
import { createRouter } from './router' |
|||
import { createStore } from './store' |
|||
import { sync } from 'vuex-router-sync' |
|||
// 导出一个工厂函数，用于创建新的
|
|||
// 应用程序、router 和 store 实例
|
|||
export function createApp () { |
|||
// 创建 router 实例
|
|||
const router = createRouter() |
|||
const store = createStore() |
|||
|
|||
// 同步路由状态(route state)到 store
|
|||
sync(store, router) |
|||
|
|||
const app = new Vue({ |
|||
// 注入 router 到根 Vue 实例
|
|||
router, |
|||
store, |
|||
// 根实例简单的渲染应用程序组件。
|
|||
render: h => h(App) |
|||
}) |
|||
return { app } |
|||
// 返回 app 和 router
|
|||
return { app, router, store } |
|||
} |
|||
@ -1,8 +1,52 @@ |
|||
import { createApp } from './app' |
|||
import { createApp } from "./app"; |
|||
import Vue from "vue"; |
|||
|
|||
// 客户端特定引导逻辑……
|
|||
Vue.mixin({ |
|||
beforeRouteUpdate(to, from, next) { |
|||
const { asyncData } = this.$options; |
|||
if (asyncData) { |
|||
asyncData({ |
|||
store: this.$store, |
|||
route: to, |
|||
}) |
|||
.then(next) |
|||
.catch(next); |
|||
} else { |
|||
next(); |
|||
} |
|||
}, |
|||
}); |
|||
|
|||
const { app } = createApp() |
|||
const { app, router, store } = createApp(); |
|||
|
|||
if (window.__INITIAL_STATE__) { |
|||
store.replaceState(window.__INITIAL_STATE__); |
|||
} |
|||
|
|||
// 这里假定 App.vue 模板中根元素具有 `id="app"`
|
|||
app.$mount('#app') |
|||
router.onReady(() => { |
|||
router.beforeResolve((to, from, next) => { |
|||
const matched = router.getMatchedComponents(to); |
|||
const prevMatched = router.getMatchedComponents(from); |
|||
|
|||
// 我们只关心非预渲染的组件
|
|||
// 所以我们对比它们，找出两个匹配列表的差异组件
|
|||
let diffed = false; |
|||
const activated = matched.filter((c, i) => { |
|||
return diffed || (diffed = prevMatched[i] !== c); |
|||
}); |
|||
const asyncDataHooks = activated.map((c) => c.asyncData).filter((_) => _); |
|||
if (!asyncDataHooks.length) { |
|||
return next(); |
|||
} |
|||
|
|||
// 这里如果有加载指示器 (loading indicator)，就触发
|
|||
|
|||
Promise.all(asyncDataHooks.map((hook) => hook({ store, route: to }))) |
|||
.then(() => { |
|||
next(); |
|||
}) |
|||
.catch(next); |
|||
}); |
|||
app.$mount("#app"); |
|||
}); |
|||
|
|||
@ -1,6 +1,41 @@ |
|||
import { createApp } from './app' |
|||
import { createApp } from "./app"; |
|||
|
|||
export default context => { |
|||
const { app } = createApp() |
|||
return app |
|||
} |
|||
export default (context) => { |
|||
return new Promise((resolve, reject) => { |
|||
const { app, router, store } = createApp(); |
|||
|
|||
// 设置服务器端 router 的位置
|
|||
router.push(context.url); |
|||
|
|||
// 等到 router 将可能的异步组件和钩子函数解析完
|
|||
router.onReady(() => { |
|||
const matchedComponents = router.getMatchedComponents(); |
|||
// 匹配不到的路由，执行 reject 函数，并返回 404
|
|||
if (!matchedComponents.length) { |
|||
return reject({ code: 404 }); |
|||
} |
|||
// 对所有匹配的路由组件调用 `asyncData()`
|
|||
Promise.all( |
|||
matchedComponents.map((Component) => { |
|||
if (Component.asyncData) { |
|||
return Component.asyncData({ |
|||
store, |
|||
route: router.currentRoute, |
|||
}); |
|||
} |
|||
}) |
|||
) |
|||
.then(() => { |
|||
// 在所有预取钩子(preFetch hook) resolve 后，
|
|||
// 我们的 store 现在已经填充入渲染应用程序所需的状态。
|
|||
// 当我们将状态附加到上下文，
|
|||
// 并且 `template` 选项用于 renderer 时，
|
|||
// 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
|
|||
context.state = store.state; |
|||
|
|||
resolve(app); |
|||
}) |
|||
.catch(reject); |
|||
}, reject); |
|||
}); |
|||
}; |
|||
|
|||
@ -0,0 +1,24 @@ |
|||
import Vue from 'vue' |
|||
import Router from 'vue-router' |
|||
|
|||
Vue.use(Router) |
|||
|
|||
export function createRouter () { |
|||
return new Router({ |
|||
mode: 'history', |
|||
routes: [ |
|||
{ |
|||
path: '/', |
|||
redirect: '/home' |
|||
}, |
|||
{ |
|||
path: '/home', |
|||
component: ()=>import("@/views/home.vue") |
|||
}, |
|||
{ |
|||
path: '/about', |
|||
component: ()=>import("@/views/about.vue") |
|||
} |
|||
] |
|||
}) |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
// store.js
|
|||
import Vue from 'vue' |
|||
import Vuex from 'vuex' |
|||
|
|||
Vue.use(Vuex) |
|||
|
|||
// 假定我们有一个可以返回 Promise 的
|
|||
// 通用 API（请忽略此 API 具体实现细节）
|
|||
|
|||
export function createStore () { |
|||
return new Vuex.Store({ |
|||
state: { |
|||
items: {} |
|||
}, |
|||
actions: { |
|||
fetchItem ({ commit }, id) { |
|||
// `store.dispatch()` 会返回 Promise，
|
|||
console.log('111111'); |
|||
// 以便我们能够知道数据在何时更新
|
|||
return new Promise((resolve,reject)=>{ |
|||
commit('setItem', { id:1, item:"111" }) |
|||
resolve() |
|||
}) |
|||
} |
|||
}, |
|||
mutations: { |
|||
setItem (state, { id, item }) { |
|||
Vue.set(state.items, id, item) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
<template> |
|||
<div> |
|||
about |
|||
</div> |
|||
</template> |
|||
@ -0,0 +1,23 @@ |
|||
<template> |
|||
<div> |
|||
<div>asad</div> |
|||
<p>{{item}}哈哈哈哈</p> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
asyncData({ store, route }) { |
|||
console.log('asyncData'); |
|||
console.log('222asdasd'); |
|||
// console.log(store); |
|||
// 触发 action 后，会返回 Promise |
|||
return store.dispatch("fetchItem", "1"); |
|||
}, |
|||
computed: { |
|||
// 从 store 的 state 对象中的获取 item。 |
|||
item() { |
|||
return this.$store.state.items["1"]; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue