Merge branch 'feature/vue2'

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

README.md

@@ -3,8 +3,11 @@
 > a easy example to use vue to implement easy web
 
 
-## Latest Version 0.3.0(2016/09/03)
+## Latest Version 0.5.0(2016/11/22)
 
+- 0.5.0
+  + use vue 2.0
+  + use vuex 2.0
 - 0.3.0
   + change UI for easy-vue
   + use vue-progressbar
@@ -14,15 +17,16 @@
   + implements page change
   + optimize UI
 
-> [latest version download](https://github.com/TIGERB/easy-vue/releases/tag/v0.3.0)
+> [latest version download](https://github.com/TIGERB/easy-vue/releases/tag/v0.5.0)
 
 ## Demo
 
 > <http://tigerb.github.io/easy-vue>
 
 ## How To Use ?
-* `update the variable "domain" to your domain in webpack.config.js`
-* `npm install`
-* `bower install`
-* `npm run test (develop environment) OR npm run build (production environment)`
-* `php environment to use server.php simulate api`
+1. npm install
+2. bower install
+3. build
+  - develop environment: `DOMAIN=http://yourdomain npm run test`
+  - production environment: `DOMAIN=http://yourdomain npm run build`
+4. php environment to use server.php simulate api

app.js

@@ -1,35 +1,42 @@
-var Vue 　　　       = require('vue'); // get vue
-var App 　　　       = require('./app.vue');// get root module
+var Vue　　　 = require('vue'); // get vue
+var App　　　 = require('./app.vue'); // get root module
+var store　　 = require('./store.js'); // get vuxe -> store
 
-var VueRouter       = require('vue-router'); //get vue-router
-var VueProgressBar  = require('vue-progressbar');// get vue-progressbar
+var VueRouter = require('vue-router'); //get vue-router
+var VueProgressBar = require('vue-progressbar'); // get vue-progressbar
+var infiniteScroll =  require('vue-infinite-scroll');// get vue-infinite-scroll
 
-Vue.use(VueRouter);//error:　Please install the Router with Vue.use() before creating an instance
-Vue.use(VueProgressBar, {
-  color: 'rgb(143, 255, 199)',
-  failedColor: 'red',
-  height: '3px'
-});// can use progressbar
-
-var router   	 = new VueRouter({
-    // history: true, //this config is to del anchor point like "#!"
-    // saveScrollPosition: true
-});//init
-var viewPath 	 = './src/views/';//component src
-
-router.map({
-  '/':{
-    name:'',
-    component:require(viewPath+'pageone.vue')
+Vue.use(VueRouter);
+var options = {
+  color: '#fff',
+  failedColor: '#874b4b',
+  thickness: '3px',
+  transition: {
+    speed: '0.2s',
+    opacity: '0.6s'
   },
-  '/two':{
-    name:'two',
-    component:require(viewPath+'pagetwo.vue')
-  },
-  '/three':{
-    name:'three',
-    component:require(viewPath+'pagethree.vue')
-  }
+  autoRevert: true,
+  location: 'top',
+  inverse: false
+};
+Vue.use(VueProgressBar, options);
+Vue.use(infiniteScroll)
+
+var viewPath = './src/views/'; //component src
+var routes = [
+  { path: '/', component: require(viewPath + 'pageone.vue')},
+  { path: '/two', component: require(viewPath + 'pagetwo.vue')},
+  { path: '/three', component: require(viewPath + 'pagethree.vue')}
+];
+var router = new VueRouter({
+  routes: routes
 });
 
-router.start(App,'#app');
+//init
+var app = new Vue({
+    router: router,
+    store: store,
+    render: function (h) {
+      return h(App);
+    }
+}).$mount('#app');

app.vue

@@ -1,38 +1,14 @@
 <template>
   <div>
     <!-- set progressbar -->
-    <progress :percent.sync="myProgress.percent" :options="myProgress.options"> </progress>
+    <vue-progress-bar></vue-progress-bar>
     <router-view></router-view>
   </div>
 </template>
 
 <script>
   var FastClick = require('./bower_components/fastclick/lib/fastclick');
   FastClick.attach(document.body);// init fastclick
-
-  import progress from 'vue-progressbar/vue-progressbar.vue'
-  export default {
-    data() {
-        return {
-          myProgress: {
-            percent: 0,
-            options: {
-              show: true,
-              canSuccess: true,
-              color: '#fff',
-              failedColor: 'red',
-              height: '2px'
-            }
-          }
-        }
-      },
-      components: {
-        progress
-      },
-      ready() {
-        this.$progress.setHolder(this.myProgress)
-      }
-  }
 </script>
 
 <style>

package.json

@@ -1,13 +1,13 @@
 {
   "name": "easy-vue",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Learn Vue Easy",
   "main": "index.js",
   "scripts": {
     "test": "webpack -p",
     "build": "NODE_ENV=production webpack -p"
   },
-  "author": "TIGERB<tigerbcoder@gmail.com>",
+  "author": "TIGERB<tigerbcode@gmail.com>",
   "license": "ISC",
   "devDependencies": {
     "babel-core": "^6.4.5",
@@ -24,17 +24,18 @@
     "style-loader": "^0.13.0",
     "vue-hot-reload-api": "^1.3.0",
     "vue-html-loader": "^1.1.0",
-    "vue-loader": "^8.0.5",
+    "vue-loader": "^9.0.0",
     "vue-style-loader": "^1.0.0",
     "webpack": "^1.12.12",
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
     "fetch": "^1.0.1",
-    "vue": "^1.0.15",
-    "vue-infinite-scroll": "^0.1.2",
-    "vue-progressbar": "^0.2.5",
-    "vue-router": "^0.7.10",
-    "whatwg-fetch": "^0.11.0"
+    "vue": "^2.0.0",
+    "vue-infinite-scroll": "^2.0.0",
+    "vue-progressbar": "^0.7.0",
+    "vue-router": "^2.0.0",
+    "vuex": "^2.0.0",
+    "whatwg-fetch": "^2.0.1"
   }
 }

src/components/barBottom.vue

@@ -1,17 +1,17 @@
 <template>
 	<nav class="bar bar-tab easy-bottom-bar">
-	  <a class="tab-item" href="#"  v-link="{path:'/'}">
+	  <router-link class="tab-item" to="/">
 	    <span class="icon fa fa-weixin" :class="{'easy-fa-color': isOnePage}"></span>
 	    <span class="tab-label" :class="{'easy-fa-color': isOnePage}">pageone</span>
-	  </a>
-	  <a class="tab-item" href="#" v-link="{path:'/two'}">
+	  </router-link>
+	  <router-link class="tab-item" to="/two">
 	    <span class="icon icon-pages" :class="{'easy-fa-color': isTwoPage}"></span>
 	    <span class="tab-label" :class="{'easy-fa-color': isTwoPage}">pagetwo</span>
-	  </a>
-	  <a class="tab-item" href="#" v-link="{path:'/three'}">
+	  </router-link>
+	  <router-link class="tab-item" to="/three">
 	    <span class="icon icon-person" :class="{'easy-fa-color': isThreePage}"></span>
 	    <span class="tab-label" :class="{'easy-fa-color': isThreePage}">pagethree</span>
-	  </a>
+	  </router-link>
 	</nav>
 </template>
 
@@ -24,23 +24,25 @@
   				isThreePage: false
   			}
   		},
-	    ready: function () {
-	    	var uri = window.location.hash;
-	    	if (uri === '#!/') {
-				this.isOnePage   = true;
-				this.isTwoPage   = false;
-				this.isThreePage = false;
-	    	}
-	    	if (uri === '#!/two') {
-				this.isOnePage   = false;
-				this.isTwoPage   = true;
-				this.isThreePage = false;
-	    	}
-	    	if (uri === '#!/three') {
-				this.isOnePage   = false;
-				this.isTwoPage   = false;
-				this.isThreePage = true;
-	    	}
+	    mounted: function () {
+				this.$nextTick(function () {
+					var uri = window.location.hash;
+		    	if (uri === '#/') {
+					this.isOnePage   = true;
+					this.isTwoPage   = false;
+					this.isThreePage = false;
+		    	}
+		    	if (uri === '#/two') {
+					this.isOnePage   = false;
+					this.isTwoPage   = true;
+					this.isThreePage = false;
+		    	}
+		    	if (uri === '#/three') {
+					this.isOnePage   = false;
+					this.isTwoPage   = false;
+					this.isThreePage = true;
+		    	}
+				})
 	    },
 	    methods: {
 

src/components/barTop.vue

@@ -13,8 +13,10 @@
         alert('write something');
       },
       refresh: function () {
-        // dispatch bar-top-refresh event to parent component
-        this.$dispatch('bar-top-refresh');
+        this.$store.dispatch('getData', {
+          progress: this,
+          refresh: true
+        });
       }
     }
   }

src/components/card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content easy-vue-card" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
+  <div class="content easy-vue-card" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
     <p v-for="result in results">
       <img src="../images/easy-vue.jpg">
       <span>{{result}}</span>
@@ -14,83 +14,51 @@
 </template>
 
 <script>
-  require('vue-infinite-scroll');
-
+  import {mapState} from 'vuex';
   module.exports = {
     data:function () {
       return {
-        results : [],
         busy:false,
-        isloadingComplete: false
+        isloadingComplete: false,
+        results: []
       }
     },
     components:{
       'nsr-loading':require('../components/loading.vue'),
     },
-    ready: function () {
-      this.fetchData(this, true);
+    mounted: function () {
+      this.$nextTick(function () {
+        this.fetchData(this);
+      })
     },
     methods:{
-      fetchData: function (Vue, refresh) {
-        var self = Vue;
-        self.$progress.set(0);
-        self.$progress.start();
-        self.isloadingComplete = false;
-        self.busy = true;
-        fetch('/server.php')
-        .then(function(response) {
-          return response.json()
-        }).then(function(json) {
-          self.$progress.finish();
-          self.isloadingComplete = true;
-          self.busy = false;
-          //fake data
-        json = [
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-          'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' +  + Math.random()*100000000000,
-        ];
-          if (refresh === true) {
-            self.results = json;
-          }else {
-            self.results = self.results.concat(json);
-          }
-        }).catch(function(ex) {
-          console.log(ex);
-          self.$progress.failed();
-          self.busy = false;
+      fetchData: function (progress) {
+        this.$store.dispatch('getData', {
+          progress: progress,
+          refresh: false
         });
       },
       loadMore: function () {
-        this.fetchData(this, false);
+        this.fetchData(this);
       }
     },
-    events:{
-      //catch refresh event boardcast by parent component
-      'refresh': function(){
-        this.fetchData(this, true);
+    computed: mapState({
+      results: function (state) {
+        return state.cardData;
+      },
+      isloadingComplete: function (state) {
+        return state.isloadingComplete;
+      },
+      busy: function (state) {
+        return state.busy;
       }
-    }
+    })
 }
 </script>
 
 <style>
   .easy-vue-card{
-      background-color: #f3f3f3 !important;
+    background-color: #f3f3f3 !important;
   }
 
   .easy-vue-card p{