upgrade to vue 2.0

Author: fnlctrl

404.html

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "fnlCtrl's portfolio",
   "license": "MIT",
   "author": {
@@ -13,30 +13,33 @@
   },
   "dependencies": {
     "marked": "^0.3.5",
-    "vue": "^1.0.21",
-    "vue-i18n": "^2.4.1",
-    "vue-router": "^0.7.13"
+    "vue": "^2.0.0-rc.1",
+    "vue-i18n": "^4.2.0",
+    "vue-router": "^2.0.0-rc.3"
   },
   "devDependencies": {
     "autoprefixer-loader": "^3.2.0",
-    "babel-core": "^6.7.6",
+    "babel-core": "^6.13.2",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "gulp": "^3.9.1",
     "gulp-inline": "^0.1.1",
+    "html-loader": "^0.4.3",
     "less": "^2.6.1",
     "less-loader": "^2.2.3",
     "raw-loader": "^0.5.1",
     "style-loader": "^0.13.1",
+    "svg-sprite-loader": "0.0.26",
     "url-loader": "^0.5.7",
-    "vue-html-loader": "^1.2.2",
-    "webpack": "^1.12.14",
+    "vue-loader": "^9.3.2",
+    "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1"
   },
   "scripts": {
+    "optimize-icons": "svgo --config=svgo.config.yml src/icons",
     "start": "webpack-dev-server --config webpack.config.js",
     "build": "webpack -p && gulp build && cp index.html 404.html"
   },

index.html

@@ -4,7 +4,6 @@ import MdT from 'md-transform';
 
 export default {
     template,
-    replace: false,
     props: {
         data: {
             type: Object,
@@ -13,7 +12,7 @@ export default {
     },
     methods: {
         redirect({target: {href}}) {
-            href && this.$route.router.go(href.replace(window.location.origin,''));
+            href && this.$router.push(href.replace(window.location.origin,''));
         }
     }
 };

package.json

@@ -1,30 +1,10 @@
-gallery {
+.gallery {
   height: 100%;
   display: block;
   position: relative;
-  overflow: auto;
   column-count: 100;
   column-width: 200px;
   column-gap: 20px;
-  &::-webkit-scrollbar-track {
-    background: linear-gradient(
-            to bottom,
-            transparent 0%,
-            transparent 30%,
-            rgba(0, 0, 0, 0.3) 50%,
-            transparent 70%,
-            transparent 100%
-    )
-  }
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: rgba(0, 0, 0, 0.6);
-  }
   ul {
     display: none;
   }

src/components/gallery/index.js

@@ -1 +1,6 @@
-<div class="item" v-for="(title, item) in data" @click.capture.prevent="redirect">{{{ item.html }}}</div>
+<div class="gallery">
+    <div class="item"
+         v-for="(item, title) in data"
+         v-html="item.html"
+         @click.capture.prevent="redirect"></div>
+</div>

src/components/gallery/style.less

@@ -1,6 +1,9 @@
-export default {
-    github: require('../../icons/ic-github.svg'),
-    gplus: require('../../icons/ic-gplus.svg'),
-    star: require('../../icons/ic-star.svg'),
-    zhihu: require('../../icons/ic-zhihu.svg')
+module.exports = {
+    props: {
+        name: {
+            type: String,
+            required: true
+        }
+    },
+    template: `<svg icon><use v-bind="{'xlink:href': name}"></use></svg>`
 };

src/components/gallery/template.html

@@ -3,7 +3,6 @@ import template from './template.html';
 
 export default {
 	template,
-	replace: false,
 	data: () => ({
 		views: [
 			"designs",

src/components/icon/index.js

@@ -1,12 +1,12 @@
-navigation {
+.navigation {
   position: fixed;
   width: auto;
   height: auto;
   z-index: 98;
 }
 
 @media (min-width: 640px) {
-  navigation {
+  .navigation {
     top: 50%;
     height: 100px;
     margin-top: -50px;
@@ -59,7 +59,7 @@ navigation {
 }
 
 @media (max-width: 640px) {
-  navigation {
+  .navigation {
     padding: 0 40px;
     width: 100%;
     top: 0;

src/components/navigation/index.js

@@ -1,3 +1,6 @@
-<a class="dot" v-for="view in views" v-link="{path: '/' + view, activeClass: 'active'}">
-	<span class="hint">{{ view }}</span>
-</a>
+<div class="navigation">
+    <!--activeClass-->
+    <router-link class="dot" v-for="view in views" active-class="active" :to="{path: '/' + view}">
+        <span class="hint">{{ view }}</span>
+    </router-link>
+</div>