按需载入eui组件, 将coming soon方法独立成全局方法

babel.config.js

@@ -2,9 +2,17 @@ const plugins = ['@vue/babel-plugin-transform-vue-jsx', '@babel/plugin-proposal-
 
 if (process.env.NODE_ENV === 'production') {
   plugins.push('transform-remove-console')
+  plugins.push([
+    'component',
+    {
+      libraryName: 'element-ui',
+      styleLibraryName: 'theme-chalk'
+    }
+  ])
 }
 
 module.exports = {
   plugins: plugins,
+  // presets: [['@babel/preset-env', { modules: false }]]
   presets: ['@vue/cli-plugin-babel/preset']
 }

package.json

@@ -47,6 +47,7 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^7.0.0",
+    "babel-plugin-component": "^1.1.1",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^7.12.1",
     "eslint-plugin-import": "^2.22.1",

src/App.vue

@@ -8,6 +8,12 @@ import { Component } from 'vue-property-decorator'
 import ResizeMixin from '@/utils/resize'
 import { mixins } from 'vue-class-component'
 
+declare module 'vue/types/vue' {
+  interface Vue {
+    comingSoon?: () => void
+  }
+}
+
 @Component({
   name: 'App',
   components: {

src/components/index/DesktopFooter.vue

@@ -50,7 +50,6 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { Message } from 'element-ui'
 
 @Component({
   name: 'DesktopFooter',
@@ -59,13 +58,6 @@ import { Message } from 'element-ui'
   }
 })
 export default class extends Vue {
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/components/index/DesktopHeader.vue

@@ -28,7 +28,6 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { Message } from 'element-ui'
 import { AppModule } from '@/store/modules/app'
 import { UserModule } from '@/store/modules/user'
 import ChainManager from '@/utils/ChainManager'
@@ -76,14 +75,6 @@ export default class extends Vue {
   get accountId() {
     return AppModule.accountId
   }
-
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/components/index/TopSection.vue

@@ -85,14 +85,6 @@ export default class extends Vue {
   _onScrollEnd() {
     console.log('CurrentPage => ', this.slide.getCurrentPage())
   }
-
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/components/main/MainHeader.vue

@@ -129,14 +129,6 @@ export default class extends Vue {
   get accountId() {
     return AppModule.accountId
   }
-
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/components/market/MoileTop.vue

@@ -83,14 +83,6 @@ export default class extends Vue {
     this.menuShow = false
     return this.chainManager.logout()
   }
-
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/components/market/TopMenu.vue

@@ -99,14 +99,6 @@ export default class extends Vue {
   onClose() {
     this.infoPanelShow = false
   }
-
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/components/mobile/main/MobileFooter.vue

@@ -82,14 +82,6 @@ export default class MobileFooter extends Vue {
     console.log('toggleSublist ', idx, this.status[idx])
     this.status.splice(idx, 1, !this.status[idx])
   }
-
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/components/mobile/main/MobileHeader.vue

@@ -48,14 +48,6 @@ export default class MobileHeader extends Vue {
     this.menuShow = !this.menuShow
   }
 
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
-
   changeSection(e: PointerEvent) {
     this.menuShow = false
     const target = e.currentTarget as HTMLElement

src/components/mobile/main/TopSection.vue

@@ -15,13 +15,7 @@ import { Message } from 'element-ui'
   }
 })
 export default class MobileTopSection extends Vue {
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
+
 }
 </script>
 <style lang="scss" scoped>

src/components/nft/ChipSection.vue

@@ -57,14 +57,6 @@ export default class extends Vue {
     console.log('show info')
     this.$emit('dialog-show', true)
   }
-
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/components/nft/NftSection.vue

@@ -58,14 +58,6 @@ export default class extends Vue {
     console.log('show info')
     this.$emit('dialog-show', true)
   }
-
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/components/nft/TopSection.vue

@@ -37,14 +37,6 @@ export default class extends Vue {
   get mobile() {
     return AppModule.device === DeviceType.Mobile
   }
-
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/components/nft/WeaponSection.vue

@@ -55,14 +55,6 @@ export default class extends Vue {
     console.log('show info')
     this.$emit('dialog-show', true)
   }
-
-  comingSoon() {
-    Message({
-      message: 'coming soon',
-      type: 'info',
-      duration: 5 * 1000
-    })
-  }
 }
 </script>
 

src/main.ts

@@ -1,18 +1,40 @@
 import Vue from 'vue'
 import App from './App.vue'
-import ElementUI from 'element-ui'
+import { Loading, Message, MessageBox } from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import router from './router'
 import store from './store'
 import VueClipboard from 'vue-clipboard2'
-// import 'video.js/dist/video-js.css'
 import VueYouTubeEmbed from 'vue-youtube-embed'
 
-Vue.use(ElementUI)
+// Vue.use(ElementUI)
+Vue.use(Loading.directive)
+
 Vue.use(VueYouTubeEmbed)
 Vue.use(VueClipboard)
 Vue.config.productionTip = false
 
+Vue.prototype.$loading = Loading.service
+Vue.prototype.$msgbox = MessageBox
+Vue.prototype.$alert = MessageBox.alert
+Vue.prototype.$confirm = MessageBox.confirm
+Vue.prototype.$prompt = MessageBox.prompt
+Vue.prototype.$notify = Notification
+Vue.prototype.$message = Message
+
+const CustomerPlugin = {
+  install(_vue: typeof Vue, options?: any) {
+    _vue.prototype.comingSoon = () => {
+      Message({
+        message: 'coming soon',
+        type: 'info',
+        duration: 5 * 1000
+      })
+    }
+  }
+}
+Vue.use(CustomerPlugin)
+
 new Vue({
   router,
   store,