Skip to content

A
ant-design-pro-vue
Commit f2591d26 by Sendya
Options

feat: Load on demand

parent 816be980
Showing with 221 additions and 99 deletions
babel.config.js
module.exports = { module.exports = {
presets: [ presets: [
'@vue/app' '@vue/app'
] ],
} plugins: [
[ 'import', {
'libraryName': 'ant-design-vue',
'libraryDirectory': 'es',
'style': true // `style: true` 会加载 less 文件
} ]
]
}
package.json
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
"@vue/cli-service": "^3.2.0", "@vue/cli-service": "^3.2.0",
"@vue/eslint-config-standard": "^4.0.0", "@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"babel-plugin-import": "^1.11.0",
"eslint": "^5.8.0", "eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0", "eslint-plugin-vue": "^5.0.0-0",
"less": "^3.8.1", "less": "^3.8.1",
......
src/components/use.js 0 → 100644
/* eslint-disable */
/**
* 该文件是为了按需加载，剔除掉了一些不需要的框架组件。
* 减少了编译支持库包大小
*
* 当需要更多组件依赖时，在该文件加入即可
*/
import Vue from 'vue'
import {
LocaleProvider,
Layout,
Input,
InputNumber,
Button,
Switch,
Radio,
Checkbox,
Select,
Card,
Form,
Row,
Col,
Modal,
Table,
Tabs,
Icon,
Badge,
Popover,
Dropdown,
List,
Avatar,
Breadcrumb,
Steps,
Spin,
Menu,
Drawer,
Tooltip,
Alert,
Tag,
Divider,
DatePicker,
TimePicker,
Upload,
Progress,
Skeleton,
Popconfirm,
message,
notification
} from 'ant-design-vue'
// import VueCropper from 'vue-cropper'
Vue.use(LocaleProvider)
Vue.use(Layout)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Button)
Vue.use(Switch)
Vue.use(Radio)
Vue.use(Checkbox)
Vue.use(Select)
Vue.use(Card)
Vue.use(Form)
Vue.use(Row)
Vue.use(Col)
Vue.use(Modal)
Vue.use(Table)
Vue.use(Tabs)
Vue.use(Icon)
Vue.use(Badge)
Vue.use(Popover)
Vue.use(Dropdown)
Vue.use(List)
Vue.use(Avatar)
Vue.use(Breadcrumb)
Vue.use(Steps)
Vue.use(Spin)
Vue.use(Menu)
Vue.use(Drawer)
Vue.use(Tooltip)
Vue.use(Alert)
Vue.use(Tag)
Vue.use(Divider)
Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(Upload)
Vue.use(Progress)
Vue.use(Skeleton)
Vue.use(Popconfirm)
// Vue.use(VueCropper)
Vue.use(notification)
Vue.prototype.$confirm = Modal.confirm
Vue.prototype.$message = message
Vue.prototype.$notification = notification
Vue.prototype.$info = Modal.info
Vue.prototype.$success = Modal.success
Vue.prototype.$error = Modal.error
Vue.prototype.$warning = Modal.warning
src/core/bootstrap.js 0 → 100644
import Vue from 'vue'
import store from '@/store/'
import {
ACCESS_TOKEN,
DEFAULT_COLOR,
DEFAULT_THEME,
DEFAULT_LAYOUT_MODE,
DEFAULT_COLOR_WEAK,
SIDEBAR_TYPE,
DEFAULT_FIXED_HEADER,
DEFAULT_FIXED_HEADER_HIDDEN,
DEFAULT_FIXED_SIDEMENU,
DEFAULT_CONTENT_WIDTH_TYPE
} from '@/store/mutation-types'
import { destroyLoadingAnimate } from '@/utils/util'
import config from '@/config/defaultSettings'
export default function Initializer () {
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
// last step
destroyLoadingAnimate('preloadingWrapper', 1500)
}
src/core/use.js 0 → 100644
import Vue from 'vue'
import VueStorage from 'vue-ls'
import config from '@/config/defaultSettings'
import PermissionHelper from '@/utils/helper/permission'
import '@/components/use'
Vue.use(VueStorage, config.storageOptions)
Vue.use(PermissionHelper)
\ No newline at end of file
src/main.js
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import Storage from 'vue-ls' import router from './router'
import router from './router' import store from './store/'
import store from './store/'
import { VueAxios } from '@/utils/request'
import { VueAxios } from '@/utils/request'
import Viser from 'viser-vue'
import Antd from 'ant-design-vue'
import Viser from 'viser-vue' import '@/core/use' // base components use
import 'ant-design-vue/dist/antd.less' // or 'ant-design-vue/dist/antd.less' import '@/permission' // permission control
import '@/utils/filter' // base filter
import '@/permission' // permission control import Initializer from '@/core/bootstrap'
import '@/utils/filter' // base filter
import PermissionHelper from '@/utils/helper/permission' Vue.config.productionTip = false
import { removeLoadingAnimate } from '@/utils/util'
Vue.use(VueAxios, router)
import { Vue.use(Viser)
ACCESS_TOKEN,
DEFAULT_COLOR, new Vue({
DEFAULT_THEME, router,
DEFAULT_LAYOUT_MODE, store,
DEFAULT_COLOR_WEAK, created () {
SIDEBAR_TYPE, Initializer()
DEFAULT_FIXED_HEADER, },
DEFAULT_FIXED_HEADER_HIDDEN, render: h => h(App)
DEFAULT_FIXED_SIDEMENU, }).$mount('#app')
DEFAULT_CONTENT_WIDTH_TYPE
} from '@/store/mutation-types'
import config from '@/defaultSettings'
Vue.config.productionTip = false
Vue.use(Storage, config.storageOptions)
Vue.use(Antd)
Vue.use(VueAxios, router)
Vue.use(Viser)
Vue.use(PermissionHelper)
new Vue({
router,
store,
created () {
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
console.log('.... created ()')
removeLoadingAnimate('preloadingWrapper')
},
render: h => h(App)
}).$mount('#app')
src/utils/util.js
export function timeFix() { export function timeFix() {
const time = new Date() const time = new Date()
const hour = time.getHours() const hour = time.getHours()
return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour < 20 ? '下午好' : '晚上好'))) return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour < 20 ? '下午好' : '晚上好')))
} }
export function welcome() { export function welcome() {
const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了'] const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
const index = Math.floor((Math.random()*arr.length)) const index = Math.floor((Math.random()*arr.length))
return arr[index] return arr[index]
} }
/** /**
* 触发 window.resize * 触发 window.resize
*/ */
export function triggerWindowResizeEvent() { export function triggerWindowResizeEvent() {
const event = document.createEvent('HTMLEvents') const event = document.createEvent('HTMLEvents')
event.initEvent('resize', true, true) event.initEvent('resize', true, true)
event.eventType = 'message' event.eventType = 'message'
window.dispatchEvent(event) window.dispatchEvent(event)
} }
/** /**
* Remove loading animate * Remove loading animate
* @param id parent element id or class * @param id parent element id or class
* @param timeout * @param timeout
*/ */
export function removeLoadingAnimate(id = '', timeout = 1500) { export function destroyLoadingAnimate(id = '', timeout = 1500) {
if (id === '') { if (id === '') {
return return
} }
setTimeout(() => { setTimeout(() => {
document.getElementById(id).remove() document.getElementById(id).remove()
}, timeout) }, timeout)
} }
\ No newline at end of file
yarn.lock
...@@ -1695,6 +1695,14 @@ babel-plugin-dynamic-import-node@^2.2.0: ...@@ -1695,6 +1695,14 @@ babel-plugin-dynamic-import-node@^2.2.0:
dependencies: dependencies:
object.assign "^4.1.0" object.assign "^4.1.0"
babel-plugin-import@^1.11.0:
version "1.11.0"
resolved "https://registry.yarnpkg.com/babel-plugin-import/-/babel-plugin-import-1.11.0.tgz#78ac908e6b225206babb734e19eae5f78d6d1035"
integrity sha512-de9dWdU1YjmWRPYurlHRKD2hTd24z0bIQ0/JgyXqLMXML+TsvEkVhtqzOsNtu9MmCuvwBiTTTjZBbZXA1Xu7TQ==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@babel/runtime" "^7.0.0"
babel-plugin-transform-runtime@^6.23.0: babel-plugin-transform-runtime@^6.23.0:
version "6.23.0" version "6.23.0"
resolved "http://registry.npm.taobao.org/babel-plugin-transform-runtime/download/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee" resolved "http://registry.npm.taobao.org/babel-plugin-transform-runtime/download/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment