Import Vue

9ce3c68a · Cole Bemis · 9cbd7ca2 · 9ce3c68a · 9ce3c68a · 9ce3c68a
Commit 9ce3c68a authored Jan 28, 2017 by Cole Bemis
Show whitespace changes
Inline Side-by-side

Showing with 8888 additions and 85 deletions

bundle.js bundle.js +8835 -38

index.html index.html +4 -6

package.json package.json +1 -0

main.js src/main.js +43 -41

webpack.config.js webpack.config.js +5 -0

No files found.
--- a/bundle.js
+++ b/bundle.js
--- a/index.html
+++ b/index.html
@@ -18,26 +18,24 @@
      stroke: currentColor;
    }
  </style>
-
-  <script src="https://unpkg.com/vue/dist/vue.js"></script>
 </head>
 <body>

  <div id="app">
-    <icon-container v-for="icon in icons" :name="icon"></icon-container>
+    <!-- <icon-container v-for="icon in icons" :name="icon"></icon-container> -->
  </div>

-  <script type="text/x-template" id="icon-template">
+  <!-- <script type="text/x-template" id="icon-template">
    <div class="icon"></div>
  </script>

  <script type="text/x-template" id="icon-container-template">
    <div class="icon-container">
-      <a :href="`./icons/${name}.svg`" download>
+      <a :href="`icons/${name}.svg`" download>
        <icon :name="name" size="48"></icon>
      </a>
    </div>
-  </script>
+  </script> -->

  <script src="bundle.js"></script>
 </body>

--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
+    "vue": "^2.1.10",
    "webpack": "^2.2.0"
  }
 }
--- a/src/main.js
+++ b/src/main.js
+import Vue from 'vue';
+
 const data = {
  icons: [
    'square',
@@ -7,50 +9,50 @@ const data = {
  ]
 };

-Vue.component('icon', {
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: '24'
-    }
-  },
-  template: '#icon-template',
-  mounted() {
-    fetch(`./icons/${this.name}.svg`)
-      .then(response => {
-        if (response.ok) {
-          return response.text();
-        }
-        throw new Error(`Cannot find ${this.name}.svg`);
-      })
-      .then(svgText => {
-        const svgDocument = new DOMParser().parseFromString(svgText, 'image/svg+xml');
-        const svgIcon = svgDocument.querySelector('svg').cloneNode(true);
+// Vue.component('icon', {
+//   props: {
+//     name: {
+//       type: String,
+//       required: true
+//     },
+//     size: {
+//       type: String,
+//       default: '24'
+//     }
+//   },
+//   template: '#icon-template',
+//   mounted() {
+//     fetch(`./icons/${this.name}.svg`)
+//       .then(response => {
+//         if (response.ok) {
+//           return response.text();
+//         }
+//         throw new Error(`Cannot find ${this.name}.svg`);
+//       })
+//       .then(svgText => {
+//         const svgDocument = new DOMParser().parseFromString(svgText, 'image/svg+xml');
+//         const svgIcon = svgDocument.querySelector('svg').cloneNode(true);

-        svgIcon.setAttribute('width', this.size);
-        svgIcon.setAttribute('height', this.size);
+//         svgIcon.setAttribute('width', this.size);
+//         svgIcon.setAttribute('height', this.size);

-        this.$el.appendChild(svgIcon);
-      })
-      .catch(error => {
-        console.error(error);
-      });
-  }
-});
+//         this.$el.appendChild(svgIcon);
+//       })
+//       .catch(error => {
+//         console.error(error);
+//       });
+//   }
+// });

-Vue.component('icon-container', {
-  props: {
-    name: {
-      type: String,
-      required: true
-    }
-  },
-  template: '#icon-container-template'
-})
+// Vue.component('icon-container', {
+//   props: {
+//     name: {
+//       type: String,
+//       required: true
+//     }
+//   },
+//   template: '#icon-container-template'
+// })

 new Vue({
  el: '#app',

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -14,5 +14,10 @@ module.exports = {
        exclude: /node_modules/
      }
    ]
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.common.js'
+    }
  }
 }
\ No newline at end of file