Authored by 陈峰

dynamic import

... ... @@ -5,6 +5,7 @@
"plugins": [
"transform-runtime",
"transform-vue-jsx",
"transform-object-rest-spread"
"transform-object-rest-spread",
"syntax-dynamic-import"
]
}
... ...
{
"parser": "babel-eslint",
"env": {
"es6": true
},
... ... @@ -13,5 +14,4 @@
"camelcase": "off",
"max-len": "off"
}
}
... ...
... ... @@ -102,7 +102,7 @@ lang=scss
```
#### 3.路由规范:
用webpack的code split方式加载页面模块,chunkname为[module].[page]
用webpack的code split lazy方式加载页面模块,chunkname为[module].[page]
路由meta元信息:
``` js
... ... @@ -111,12 +111,10 @@ lang=scss
}
```
``` js
const page = r => require.ensure([], () => r(require('./onsale')), 'product.onsale');
export default {
path: '/onsale.html',
name: 'onsale',
component: page,
component: () => import(/* webpackChunkName: "product.onsale" */'./onsale),
meta: {
pageName: '在售商品'
}
... ...
... ... @@ -2,79 +2,80 @@
import _ from 'lodash';
import MultiImage from './multi-image';
const component = (resolve) => {
require.ensure([], () => {
const VueHtml5Editor = require('vue-html5-editor');
const editorInstance = new VueHtml5Editor({
hiddenModules: ['info', 'image'],
visibleModules: [
'text',
'color',
'font',
'align',
'list',
'link',
'unlink',
'tabulation',
'multi-image',
'hr',
'eraser',
'undo',
'full-screen',
'info',
],
icons: {
text: 'iconfont icon-pencil',
color: 'iconfont icon-paintbrush',
font: 'iconfont icon-font',
align: 'iconfont icon-alignjustify',
list: 'iconfont icon-list',
link: 'iconfont icon-chain',
unlink: 'iconfont icon-chainbroken',
tabulation: 'iconfont icon-table',
image: 'iconfont icon-images',
'multi-image': 'iconfont icon-images',
hr: 'iconfont icon-minus',
eraser: 'iconfont icon-eraser',
undo: 'iconfont icon-undo',
'full-screen': 'iconfont icon-arrows-alt',
},
image: {
sizeLimit: 512 * 1024,
upload: {
url: '/Api/upload/image',
headers: {},
params: {
bucket: 'goodsimg'
},
fieldName: 'file'
},
compress: null,
uploadHandler(responseText) {
let json = JSON.parse(responseText);
if (json.code === 200) {
return _.get(json, 'data.imagesList[0]', '');
}
return json.data;
}
},
language: 'zh-cn',
modules: [{
name: 'multi-image',
icon: 'fa fa-file-image-o',
i18n: '多图片上传',
show: true,
dashboard: MultiImage
}]
});
resolve(editorInstance);
}, 'components.editor');
};
export default [
'editor',
component
() => ({
component: import(/* webpackChunkName: "components.editor" */'vue-html5-editor').then(VueHtml5Editor => {
const editorInstance = new VueHtml5Editor({
hiddenModules: ['info', 'image'],
visibleModules: [
'text',
'color',
'font',
'align',
'list',
'link',
'unlink',
'tabulation',
'multi-image',
'hr',
'eraser',
'undo',
'full-screen',
'info',
],
icons: {
text: 'iconfont icon-pencil',
color: 'iconfont icon-paintbrush',
font: 'iconfont icon-font',
align: 'iconfont icon-alignjustify',
list: 'iconfont icon-list',
link: 'iconfont icon-chain',
unlink: 'iconfont icon-chainbroken',
tabulation: 'iconfont icon-table',
image: 'iconfont icon-images',
'multi-image': 'iconfont icon-images',
hr: 'iconfont icon-minus',
eraser: 'iconfont icon-eraser',
undo: 'iconfont icon-undo',
'full-screen': 'iconfont icon-arrows-alt',
},
image: {
sizeLimit: 512 * 1024,
upload: {
url: '/Api/upload/image',
headers: {},
params: {
bucket: 'goodsimg'
},
fieldName: 'file'
},
compress: null,
uploadHandler(responseText) {
let json = JSON.parse(responseText);
if (json.code === 200) {
return _.get(json, 'data.imagesList[0]', '');
}
return json.data;
}
},
language: 'zh-cn',
modules: [{
name: 'multi-image',
icon: 'fa fa-file-image-o',
i18n: '多图片上传',
show: true,
dashboard: MultiImage
}]
});
return editorInstance;
}),
loading: {
},
error: {}
})
];
... ...
const home = r => require.ensure([], () => r(require('./login')), 'login');
const error = r => require.ensure([], () => r(require('./error')), 'error');
const router = [{
path: '/login.html',
name: 'login',
component: home,
component: () => import(/* webpackChunkName: "common" */'./login'),
meta: {
authPass: true
}
}, {
path: '/401.html',
name: 'error.401',
component: error,
component: () => import(/* webpackChunkName: "common" */'./error'),
meta: {
authPass: true
}
}, {
path: '*',
name: 'error.404',
component: error,
component: () => import(/* webpackChunkName: "common" */'./error'),
meta: {
authPass: true
}
}, {
path: '/500.html',
name: 'error.500',
component: error,
component: () => import(/* webpackChunkName: "common" */'./error'),
meta: {
authPass: true
}
... ...
const page = r => require.ensure([], () => r(require('./clearing')), 'finance.clearing');
export default {
path: '/clearing.html',
name: 'clearing',
component: page,
component: () => import(/* webpackChunkName: "finance.clearing" */'./clearing'),
meta: {
pageName: '对账单'
}
... ...
const page = r => require.ensure([], () => r(require('./clearing')), 'finance.clearing');
export default {
path: '/clearing.html',
name: 'clearing',
component: page,
component: () => import(/* webpackChunkName: "finance.clearing" */'./clearing'),
meta: {
pageName: '结算单'
}
... ...
const page = r => require.ensure([], () => r(require('./payment')), 'finance.payment');
export default {
path: '/payment.html',
name: 'payment',
component: page,
component: () => import(/* webpackChunkName: "finance.payment" */'./payment'),
meta: {
pageName: '结算单'
}
... ...
const page = r => require.ensure([], () => r(require('./payment')), 'finance.payment');
export default {
path: '/payment.html',
name: 'payment',
component: page,
component: () => import(/* webpackChunkName: "finance.payment" */'./payment'),
meta: {
pageName: '结算单'
}
... ...
const page = r => require.ensure([], () => r(require('./overview')), 'home.overview');
export default {
path: '/overview.html',
name: 'overview',
component: page
component: () => import(/* webpackChunkName: "home.overview" */'./overview'),
};
... ...
/**
* Created by TaoHuang on 2017/4/18.
*/
const step1 = r => require.ensure([], () => r(require('./step1')), 'product.create');
const step2 = r => require.ensure([], () => r(require('./step2')), 'product.create');
const step3 = r => require.ensure([], () => r(require('./step3')), 'product.create');
export default [{
path: 'step1.html',
name: 'step1',
component: step1,
component: () => import(/* webpackChunkName: "product.create" */'./step1'),
meta: {
pageName: '类目选择',
}
}, {
path: 'step2.html',
name: 'step2',
component: step2,
component: () => import(/* webpackChunkName: "product.create" */'./step2'),
meta: {
pageName: '基础信息',
}
}, {
path: 'step3.html',
name: 'step3',
component: step3,
component: () => import(/* webpackChunkName: "product.create" */'./step3'),
meta: {
pageName: '网销信息',
}
... ...
... ... @@ -2,14 +2,12 @@
* Created by TaoHuang on 2017/4/18.
*/
const createProduct = r => require.ensure([], () => r(require('./create')), 'product.create');
import childrenViews from './components';
export default {
path: '/create',
name: 'create',
component: createProduct,
component: () => import(/* webpackChunkName: "product.create" */'./create'),
children: childrenViews,
meta: {
pageName: '新增商品',
... ...
/**
* Created by TaoHuang on 2017/4/26.
*/
const editProduct = r => require.ensure([], () => r(require('./edit')), 'product.edit');
export default {
path: '/edit/:id.html',
name: 'edit',
component: editProduct
component: () => import(/* webpackChunkName: "product.edit" */'./edit'),
};
... ...
const page = r => require.ensure([], () => r(require('./offsale')), 'product.offsale');
export default {
path: '/offsale.html',
name: 'offsale',
component: page,
component: () => import(/* webpackChunkName: "product.offsale" */'./offsale'),
meta: {
pageName: '未上架商品'
}
... ...
const page = r => require.ensure([], () => r(require('./onsale')), 'product.onsale');
export default {
path: '/onsale.html',
name: 'onsale',
component: page,
component: () => import(/* webpackChunkName: "product.onsale" */'./onsale'),
meta: {
pageName: '在售商品'
}
... ...
const page = r => require.ensure([], () => r(require('./output')), 'product.output');
export default {
path: '/output.html',
name: 'output',
component: page,
component: () => import(/* webpackChunkName: "product.output" */'./output'),
meta: {
pageName: '批量功能'
}
... ...
const page = r => require.ensure([], () => r(require('./vips')), 'product.vips');
export default {
path: '/vips.html',
name: 'vips',
component: page,
component: () => import(/* webpackChunkName: "product.vips" */'./vips'),
meta: {
pageName: 'VIP价格管理'
}
... ...
... ... @@ -3,12 +3,10 @@
* Created by TaoHuang on 2017/5/4.
*/
const page = r => require.ensure([], () => r(require('./diff')), 'repository.diff');
export default {
path: '/diff.html',
name: 'diff',
component: page,
component: () => import(/* webpackChunkName: "repository.diff" */'./diff'),
meta: {
pageName: '差异库存'
}
... ...
... ... @@ -3,12 +3,10 @@
* Created by TaoHuang on 2017/5/4.
*/
const page = r => require.ensure([], () => r(require('./diff')), 'repository.diff');
export default {
path: '/diff.html',
name: 'diff',
component: page,
component: () => import(/* webpackChunkName: "repository.diff" */'./diff'),
meta: {
pageName: '差异库存'
}
... ...
... ... @@ -2,20 +2,17 @@
* Created by TaoHuang on 2017/5/26.
*/
const list = r => require.ensure([], () => r(require('./list')), 'repository.express');
const info = r => require.ensure([], () => r(require('./info')), 'repository.express');
export default [{
path: '/list.html',
name: 'list',
component: list,
component: () => import(/* webpackChunkName: "repository.express" */'./list'),
meta: {
pageName: '入库物流管理'
}
}, {
path: '/:id.html',
name: 'info',
component: info,
component: () => import(/* webpackChunkName: "repository.express" */'./info'),
meta: {
pageName: '入库物流详情'
}
... ...
/**
* Created by TaoHuang on 2017/5/25.
*/
const list = r => require.ensure([], () => r(require('./list')), 'repository.invoice');
const edit = r => require.ensure([], () => r(require('./edit')), 'repository.invoice');
const info = r => require.ensure([], () => r(require('./info')), 'repository.invoice');
const deliver = r => require.ensure([], () => r(require('./deliver')), 'repository.invoice');
export default [{
path: '/list.html',
name: 'list',
component: list,
component: () => import(/* webpackChunkName: "repository.invoice" */'./list'),
meta: {
pageName: '发货入库管理'
}
}, {
path: '/edit/:id.html',
name: 'edit',
component: edit,
component: () => import(/* webpackChunkName: "repository.invoice" */'./edit'),
meta: {
pageName: '发货入库编辑'
}
}, {
path: '/info/:id.html',
name: 'info',
component: info,
component: () => import(/* webpackChunkName: "repository.invoice" */'./info'),
meta: {
pageName: '发货入库详情'
}
}, {
path: '/deliver/:id.html',
name: 'deliver',
component: deliver,
component: () => import(/* webpackChunkName: "repository.invoice" */'./deliver'),
meta: {
pageName: '发货入库发货'
}
... ...
... ... @@ -2,12 +2,10 @@
* 可调拨库存
* Created by TaoHuang on 2017/5/4.
*/
const page = r => require.ensure([], () => r(require('./jit')), 'repository.jit');
export default {
path: '/jit.html',
name: 'jit',
component: page,
component: () => import(/* webpackChunkName: "repository.jit" */'./jit'),
meta: {
pageName: '可调拨库存'
}
... ...
const list = r => require.ensure([], () => r(require('./list')), 'repository.prodReturn');
const detail = r => require.ensure([], () => r(require('./detail')), 'repository.prodReturn');
export default [{
path: '/list.html',
name: 'list',
component: list,
component: () => import(/* webpackChunkName: "repository.prodReturn" */'./list'),
meta: {
pageName: '请退单列表'
}
}, {
path: '/detail/:id.html',
name: 'detail',
component: detail,
component: () => import(/* webpackChunkName: "repository.prodReturn" */'./detail'),
meta: {
pageName: '请退单详情'
}
... ...
const page = r => require.ensure([], () => r(require('./supplement')), 'repository.supplement');
export default {
path: '/supplement.html',
name: 'supplement',
component: page,
component: () => import(/* webpackChunkName: "repository.supplement" */'./supplement'),
meta: {
pageName: '补货入库'
}
... ...
/**
* Created by TaoHuang on 2017/5/8.
*/
const list = r => require.ensure([], () => r(require('./list')), 'shop.category');
const edit = r => require.ensure([], () => r(require('./edit')), 'shop.category');
export default [{
path: '/list.html',
name: 'list',
component: list,
component: () => import(/* webpackChunkName: "shop.category" */'./list'),
meta: {
pageName: '商品分类'
}
}, {
path: '/edit.html',
name: 'edit',
component: edit,
component: () => import(/* webpackChunkName: "shop.category" */'./edit'),
meta: {
pageName: '商品分类编辑'
}
... ...
const decoraPC = r => require.ensure([], () => r(require('./decora-pc')), 'shop.decoration');
const decoraApp = r => require.ensure([], () => r(require('./decora-app')), 'shop.decoration');
export default [{
path: '/decor-app.html',
name: 'decor.app',
component: decoraApp,
component: () => import(/* webpackChunkName: "shop.decoration" */'./decora-app'),
meta: {
pageName: '店铺装修App'
}
}, {
path: '/decor-pc.html',
name: 'decor.pc',
component: decoraPC,
component: () => import(/* webpackChunkName: "shop.decoration" */'./decora-pc'),
meta: {
pageName: '店铺装修PC'
}
... ...
const page = r => require.ensure([], () => r(require('./info')), 'shop.info');
export default {
path: '/info.html',
name: 'info',
component: page,
component: () => import(/* webpackChunkName: "shop.info" */'./info'),
meta: {
pageName: '店铺基本信息'
}
... ...
const page = r => require.ensure([], () => r(require('./outinstore')), 'statistics.outinstore');
export default {
path: '/outinstore.html',
name: 'outinstore',
component: page,
component: () => import(/* webpackChunkName: "statistics.outinstore" */'./outinstore'),
meta: {
pageName: '出入库统计'
}
... ...
const page = r => require.ensure([], () => r(require('./overview')), 'statistics.overview');
export default {
path: '/overview.html',
name: 'overview',
component: page,
component: () => import(/* webpackChunkName: "statistics.overview" */'./overview'),
meta: {
pageName: '经营总览'
}
... ...
const page = r => require.ensure([], () => r(require('./sale')), 'statistics.sale');
export default {
path: '/sale.html',
name: 'sale',
component: page,
component: () => import(/* webpackChunkName: "statistics.sale" */'./sale'),
meta: {
pageName: '销售统计'
}
... ...
const page = r => require.ensure([], () => r(require('./stock')), 'statistics.stock');
export default {
path: '/stock.html',
name: 'stock',
component: page,
component: () => import(/* webpackChunkName: "statistics.stock" */'./stock'),
meta: {
pageName: '库存统计'
}
... ...
const allotList = r => require.ensure([], () => r(require('./allot-list')), 'trade.allotList');
export default {
path: '/allotList.html',
name: 'allotlist',
component: allotList,
component: () => import(/* webpackChunkName: "trade.allotList" */'./allot-list'),
meta: {
pageName: '调拨单'
}
... ...
const allot = r => require.ensure([], () => r(require('./allot')), 'trade.allot');
const done = r => require.ensure([], () => r(require('./views/done')), 'trade.allot');
const undone = r => require.ensure([], () => r(require('./views/undone')), 'trade.allot');
const express = r => require.ensure([], () => r(require('./views/express')), 'trade.allot');
export default {
path: '/allot',
name: 'allot',
component: allot,
component: () => import(/* webpackChunkName: "trade.allot" */'./allot'),
children: [
{
path: 'done.html',
name: 'done',
component: done,
component: () => import(/* webpackChunkName: "trade.allot" */'./views/done'),
meta: {
pageName: '发货已完成'
}
... ... @@ -19,7 +14,7 @@ export default {
{
path: 'undone.html',
name: 'undone',
component: undone,
component: () => import(/* webpackChunkName: "trade.allot" */'./views/undone'),
meta: {
pageName: '发货未完成'
}
... ... @@ -27,7 +22,7 @@ export default {
{
path: 'express.html',
name: 'express',
component: express,
component: () => import(/* webpackChunkName: "trade.allot" */'./views/express'),
meta: {
pageName: '发货物流表'
}
... ...
const expDetail = r => require.ensure([], () => r(require('./express-detail')), 'trade.expdetail');
export default {
path: '/expdetail.html',
name: 'expdetail',
component: expDetail,
component: () => import(/* webpackChunkName: "trade.expdetail" */'./express-detail'),
meta: {
pageName: '调拨订单'
}
... ...
const printDetail = r => require.ensure([], () => r(require('./print-detail')), 'trade.printDetail');
export default {
path: '/printDetail.html',
name: 'printdetail',
component: printDetail
component: () => import(/* webpackChunkName: "trade.printDetail" */'./print-detail'),
};
... ...
... ... @@ -16,4 +16,4 @@ class DefaultCache {
}
}
module.exports = DefaultCache;
export default DefaultCache;
... ...
import DefaultCache from './default-cache';
let DbTypes = {
DEF: 'default'
};
... ... @@ -9,9 +10,7 @@ class CacheAdapter {
constructor(dbName) {
this.dbName = dbName;
if (dbName === DbTypes.DEF) {
let DbType = require('./defaultCache');
this.db = new DbType();
this.db = new DefaultCache();
}
}
get(key) {
... ...
const page = r => require.ensure([], () => r(require('./#{pageName}')), '#{moduleName}.#{pageName}');
export default {
path: '/#{pageName}.html',
name: '#{pageName}',
component: page,
component: () => import(/* webpackChunkName: "#{moduleName}.#{pageName}" */'./#{pageName}'),
meta: {
pageName: '新建页面'
}
... ...
const page = r => require.ensure([], () => r(require('./#{pageName}')), '#{moduleName}.#{pageName}');
export default {
path: '/#{pageName}.html',
name: '#{pageName}',
component: page,
component: () => import(/* webpackChunkName: "#{moduleName}.#{pageName}" */'./#{pageName}'),
meta: {
pageName: '新建页面'
}
... ...
... ... @@ -64,11 +64,12 @@
"request-promise": "^4.2.0",
"serve-favicon": "^2.4.2",
"uuid": "^3.0.1",
"vue": "^2.2.2",
"vue": "^2.3.4",
"vue-cookie": "^1.1.4",
"vue-html5-editor": "^1.1.1",
"vue-router": "^2.2.0",
"vue-template-compiler": "^2.2.6",
"vue-loader": "^11.3.4",
"vue-router": "^2.5.3",
"vue-template-compiler": "^2.3.4",
"xlsx2json": "^1.0.0",
"yoho-cookie": "^1.2.0",
"yoho-md5": "^2.0.0",
... ... @@ -82,10 +83,11 @@
"autoprefixer": "^6.7.2",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-eslint": "^7.2.3",
"babel-helper-vue-jsx-merge-props": "^2.0.2",
"babel-loader": "^6.2.10",
"babel-plugin-istanbul": "^3.1.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-runtime": "^6.22.0",
... ... @@ -98,7 +100,7 @@
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.26.1",
"escodegen": "^1.8.1",
"eslint": "^3.14.1",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-config-yoho": "^1.0.8",
"eslint-friendly-formatter": "^2.0.7",
... ... @@ -131,7 +133,7 @@
"url-loader": "^0.5.7",
"vue-loader": "^11.1.4",
"vue-style-loader": "^2.0.0",
"webpack": "^2.2.1",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.2",
"webpack-dev-server": "^2.4.2",
"webpack-hot-middleware": "^2.18.0",
... ...