demand loading

.babelrc

@@ -1,5 +1,10 @@
 {
   "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
+  "plugins": ["transform-runtime", ["component", [
+      {
+          "libraryName": "mint-ui",
+          "style": true
+      }
+      ]]],
   "comments": false
 }

package.json

@@ -18,6 +18,7 @@
   "devDependencies": {
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
+    "babel-plugin-component": "^0.3.3",
     "babel-plugin-transform-runtime": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-stage-2": "^6.0.0",

src/components/App.vue

@@ -23,15 +23,18 @@
 <script>
     import { TabItem, Tabbar } from 'mint-ui'
     export default {
-        components: { TabItem, Tabbar },
+        components: {
+            'mt-tab-item': TabItem,
+            'mt-tabbar': Tabbar
+        },
         computed: {
             isWelcom() {
                 return this.$route.path === '/' || this.$route.path === '/login'
             }
         },
         data() {
             return {
-                channel: this.$route.path.slice(1)
+                channel: this.$route.path.split('/')[1]
             }
         },
         watch: {

src/components/Detail.vue

@@ -51,7 +51,9 @@
 <script>
     import { Header, Indicator, MessageBox, Toast } from 'mint-ui'
     export default {
-        components: { 'mtHeader': { Header }, Indicator, MessageBox, Toast },
+        components: {
+            'mt-header': Header
+        },
         data() {
             return {
                 content: {

src/components/Login.vue

@@ -8,7 +8,10 @@
 <script>
     import { Field, Button } from 'mint-ui'
     export default {
-        components: { Field, Button },
+        components: {
+            'mt-field': Field,
+            'mt-button': Button
+        },
         props: [{
             name: 'tocken',
             default: ''

src/components/Topic.vue

@@ -36,7 +36,12 @@
 <script>
     import { Loadmore, Navbar, TabItem, Indicator, Tabbar } from 'mint-ui'
     export default {
-        components: { Loadmore, Navbar, TabItem, Tabbar },
+        components: {
+            'mt-loadmore': Loadmore,
+            'mt-navbar': Navbar,
+            'mt-tab-item': TabItem,
+            'mt-tabbar': Tabbar
+        },
         data() {
             return {
                 dataList: [],

src/components/User.vue

@@ -33,7 +33,6 @@
 </template>
 
 <script>
-    import { Tabbar, TabItem } from 'mint-ui'
     export default {
         data() {
             return {

src/main.js

@@ -1,12 +1,12 @@
 import Vue from 'vue'
-import MintUI from 'mint-ui'
-import 'mint-ui/lib/style.css'
+//import MintUI from 'mint-ui'
+//import 'mint-ui/lib/style.css'
 import VueResource from 'vue-resource'
 import VueRouter from 'vue-router'
 
 require('./assets/less/global.less')
 
-Vue.use(MintUI)
+// Vue.use(MintUI)
 Vue.use(VueResource)
 Vue.use(VueRouter)