Add: loader 플러그인화

src/App.vue

@@ -4,9 +4,9 @@
     <div class="main-navs">
       <h3>Go to Pages:</h3>
       <ul>
-        <li><router-link to="/">Home</router-link></li>
-        <li><router-link to="/page1">Page1</router-link></li>
-        <li><router-link to="/page2">Page2</router-link></li>
+        <router-link to="/" tag="li" :class="{active: $route.matched[0].name !== 'page1'}">Home</router-link>
+        <router-link to="/page1" tag="li" :class="'actvie'">Page1</router-link>
+        <router-link to="/page2" tag="li" :class="'actvie'">Page2</router-link>
       </ul>
     </div>
     <div class="main">
@@ -16,36 +16,21 @@
 </template>
 
 <script>
-import loader from '@ibsheet/loader';
-import VueRouter from 'vue-router';
-import HelloWorld from './components/HelloWorld.vue';
-import Page1 from './components/Page1.vue';
-import Page2 from './components/Page2.vue';
-
-const router = new VueRouter({
-  mode: 'history',
-  routes: [
-    { path: '/', name: 'home', component: HelloWorld },
-    { path: '/page1', name: 'page1', component: Page1 },
-    { path: '/page2', name: 'page2', component: Page2 }
-  ]
-})
-
-loader.config({
-  registry: [{
-    name: 'ibsheet',
-    baseUrl: '/ibsheet'
-  }]
-});
-
 export default {
   name: 'app',
   data() {
     return {
-      loaderVersion: loader.version
+      loaderVersion: this.$_Loader.version
     }
   },
-  router
+  created() {
+    this.$_Loader.config({
+      registry: [{
+        name: 'ibsheet',
+        baseUrl: '/ibsheet'
+      }]
+    });
+  }
 }
 </script>
 
@@ -68,10 +53,14 @@ export default {
     > li {
       display: inline-block;
       margin: 0 10px;
-      a > {
-        color: #42b983;
-      }
+      // a > {
+      //   color: #42b983;
+      // }
     }
   }
 }
+
+.router-link-exact-active {
+  color: aquamarine
+}
 </style>

src/components/HelloWorld.vue

@@ -6,9 +6,6 @@
 </template>
 
 <script>
-/* eslint-disable no-console */
-import loader from '@ibsheet/loader';
-
 export default {
   name: 'HelloWorld',
   data() {
@@ -17,7 +14,7 @@ export default {
     }
   },
   mounted() {
-    loader.unload();
+    this.$_Loader.unload();
   }
 }
 </script>

src/components/Page1.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script>
-import loader from '@ibsheet/loader';
 import { SheetSampleData } from '../shared/ibsheet-data';
 
 let sheetId = '';
@@ -16,7 +15,7 @@ export default {
   mounted() {
     const { data, options } = SheetSampleData[0];
 
-    loader.createSheet({
+    this.$_Loader.createSheet({
       el: sheetEl,
       options,
       data
@@ -27,7 +26,7 @@ export default {
     });
   },
   beforeDestroy() {
-    loader.removeSheet(sheetId);
+    this.$_Loader.removeSheet(sheetId);
   }
 }
 </script>

src/components/Page2.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script>
-import loader from '@ibsheet/loader';
 import { SheetSampleData } from '../shared/ibsheet-data';
 
 let sheetId = '';
@@ -16,7 +15,7 @@ export default {
   mounted() {
     const { data, options } = SheetSampleData[1];
 
-    loader.createSheet({
+    this.$_Loader.createSheet({
       el: sheetEl,
       options,
       data
@@ -27,7 +26,7 @@ export default {
     });
   },
   beforeDestroy() {
-    loader.removeSheet(sheetId);
+    this.$_Loader.removeSheet(sheetId);
   }
 }
 </script>

src/main.js

@@ -1,11 +1,13 @@
 import 'babel-polyfill';
 import Vue from 'vue';
-import VueRouter from 'vue-router';
 import App from './App.vue';
+import router from '@/router';
+import LoaderPlugin from '@/plugins/LoaderPlugin.js';
 
-Vue.use(VueRouter);
 Vue.config.productionTip = false;
+Vue.use(LoaderPlugin);
 
 new Vue({
   render: h => h(App),
+  router
 }).$mount('#app')

src/plugins/LoaderPlugin.js

@@ -0,0 +1,7 @@
+import loader from '@ibsheet/loader';
+
+export default {
+  install(Vue) {
+    Vue.prototype.$_Loader = loader;
+  }
+}

src/router/index.js

@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import HelloWorld from '@/components/HelloWorld.vue';
+import Page1 from '@/components/Page1.vue';
+import Page2 from '@/components/Page2.vue';
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  mode: 'history',
+  routes: [
+    { path: '/', name: 'home', component: HelloWorld },
+    { path: '/page1', name: 'page1', component: Page1 },
+    { path: '/page2', name: 'page2', component: Page2 }
+  ]
+});
+
+export default router;