Merge branch 'feature/wp4'

Author: TIGERB

README.md

@@ -7,8 +7,8 @@
 
 <p align="center">
 <a href="http://vue.tigerb.cn/#/"><img src="https://img.shields.io/badge/build-passing-brightgreen.svg" alt="Build Status"></a>
-<a href="https://github.com/TIGERB/easy-vue/releases"><img src="https://img.shields.io/badge/version-0.7.2-lightgrey.svg" alt="Version"></a>
-<a href="https://github.com/TIGERB/easy-vue/releases"><img src="https://img.shields.io/badge/download-400kb-yellow.svg" alt="Downloads"></a>
+<a href="https://github.com/TIGERB/easy-vue/releases"><img src="https://img.shields.io/badge/version-0.8.0-lightgrey.svg" alt="Version"></a>
+<a href="https://github.com/TIGERB/easy-vue/releases"><img src="https://img.shields.io/badge/download-yellow.svg" alt="Downloads"></a>
 <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
 <a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/easy-vue/backers/badge.svg" /></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/easy-vue/sponsors/badge.svg" /></a> 
 </p>
@@ -24,11 +24,14 @@
 ## Dependence
 Dependence         |Version
 -------------------|-------
-Vue                |2.0+
-Vuex               |2.0+
-Webpack            |3.0+
-
-## Latest Version 0.7.2(2017/11/12)
+Vue                |2.6.10
+Vuex               |3.1.1
+Webpack            |4.32.2
+
+## Latest Version 0.8.0(2019/05/26)
+- 0.8.0 [2019/05/26]
+  + use webpack 4.32.2
+  + use vue 2.6.10
 - 0.7.2 [2017/11/12]
   + refactor ui for card component
 - 0.7.1 [2017/06/20]
@@ -75,8 +78,8 @@ Webpack            |3.0+
 step 1: yarn install
 
 step 2:
-    - develop: npm run dev
-    - build  : npm run build, and use *lite-server* or *http-server* to visit the dist directory
+    - develop: yarn run dev
+    - build  : yarn run build, and use *lite-server* or *http-server* to visit the dist directory
 
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-vue",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Learn Vue Easily",
   "main": "index.js",
   "scripts": {
@@ -12,38 +12,39 @@
   "license": "MIT",
   "dependencies": {
     "animate.css": "^3.5.2",
-    "fastclick": "^1.0.6",
+    "babel": "^6.23.0",
     "font-awesome": "^4.7.0",
+    "mini-css-extract-plugin": "^0.6.0",
     "opencollective": "^1.0.3",
     "ratchet-npm": "^2.0.4",
-    "vue": "^2.2.6",
-    "vue-infinite-scroll": "^2.0.1",
-    "vue-progressbar": "^0.7.1",
+    "vue": "^2.6.10",
+    "vue-infinite-scroll": "^2.0.2",
+    "vue-progressbar": "^0.7.5",
     "vue-resource": "^1.3.0",
-    "vue-router": "^2.3.1",
-    "vuex": "^2.0.0"
+    "vue-router": "^3.0.6",
+    "vue-template-compiler": "^2.6.10",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
-    "babel-loader": "^7.0.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "7",
     "babel-plugin-transform-runtime": "^6.4.3",
     "babel-preset-es2015": "^6.24.1",
     "babel-runtime": "^6.23.0",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
-    "extract-text-webpack-plugin": "^2.1.0",
-    "file-loader": "^0.11.1",
-    "html-webpack-plugin": "^2.16.0",
+    "copy-webpack-plugin": "^5.0.3",
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
     "style-loader": "^0.18.2",
-    "vue-loader": "^12.2.1",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.2.6",
-    "webpack": "3.0.0",
-    "webpack-dev-server": "^2.4.2"
+    "vue-loader": "^15.7.0",
+    "vue-style-loader": "^4.1.2",
+    "webpack": "^4.32.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.4.1"
   },
   "collective": {
     "type": "opencollective",
     "url": "https://opencollective.com/easy-vue"
   }
-}
+}

src/app.js

@@ -2,7 +2,7 @@ import 'ratchet-npm/dist/css/ratchet.css'; // get ratchet
 import 'font-awesome/css/font-awesome.css'; // get font-awesome
 import 'animate.css/animate.css'; // get animate.css
 
-import FastClick from 'fastclick';
+// import FastClick from 'fastclick';
 import Vue from 'vue'; // get vue
 import VueProgressBar from 'vue-progressbar'; // get vue-progressbar
 import InfiniteScroll from 'vue-infinite-scroll'; // get vue-infinite-scroll
@@ -11,7 +11,7 @@ import App from './app.vue'; // get root module
 import router from './router';
 import store from './store'; // get vuex -> store
 
-FastClick.attach(document.body); // init fastclick
+// FastClick.attach(document.body); // init fastclick
 const options = {
   color: '#fff',
   failedColor: '#874b4b',

src/components/alert.vue

@@ -62,14 +62,14 @@ export default {
 .easy-alert > div > p:first-child {
   font-size: 20px;
   line-height: 80px;
-  color: #1abc9c;
+  color: #19caad;
 }
 
 .easy-alert > div > p:last-child {
   border-top: 1px solid #ddd;
   line-height: 22px;
   padding: 9px 0;
   color: #fff;
-  background-color: #1abc9c;
+  background-color: #19caad;
 }
 </style>

src/components/barBottom.vue

@@ -50,7 +50,7 @@ export default {
 
 <style>
 .easy-bottom-bar {
-  background-color: #1abc9c;
+  background-color: #19caad;
   color: #fff;
   border: none;
 }

src/components/barTop.vue

@@ -39,7 +39,7 @@ export default {
 
 <style>
   .bar-easy-vue {
-    background-color: #1abc9c;
+    background-color: #19caad;
   }
   .bar-easy-vue a, h1 {
     color: #fff !important;

src/components/button.vue

@@ -77,7 +77,7 @@ export default {
   margin-top: 100px !important;
 }
 .easy-button span {
-  color: #1abc9c;
+  color: #19caad;
 }
 .easy-button li {
   border-bottom: 1px solid #eee;

src/components/card.vue

@@ -4,25 +4,26 @@
   infinite-scroll-disabled="busy"
   infinite-scroll-distance="10">
     <div class="easy-card" v-for="res in results">
-    <img v-bind:src="res.img" alt="">
-    <p>{{res.content}}</p>
-    <div class="easy-card-user-info">
-      <p>
-        <img v-bind:src="res.avatar" alt="">
-        <span>from</span>{{res.nickname}}
-      </p>
-      <p @click="favourite">
-      <span class="fa"
-      :class="{
-      'fa-heart': isFavourited,
-      'nsr-favourited': isFavourited,
-      'fa-heart-o': isNotFavourited
-      }">
-      </span>
-      {{res.date}}
-      </p>
+      <img :src="res.img" alt="">
+      <p>{{res.content}}</p>
+      <div class="easy-card-user-info">
+        <p>
+          <img :src="res.avatar" alt="">
+          <span>from</span>{{res.nickname}}
+        </p>
+        <p>
+        <!-- <p @click="favourite"> -->
+        <!-- <span class="fa"
+        :class="{
+        'fa-heart': isFavourited,
+        'nsr-favourited': isFavourited,
+        'fa-heart-o': isNotFavourited
+        }">
+        </span> -->
+        {{res.date}}
+        </p>
+      </div>
     </div>
-  </div>
     <div class="nsr-card-loading">
       <nsr-loading
       :hide-loading="isloadingComplete"
@@ -113,7 +114,7 @@ export default {
 }
 
 .easy-card-user-info p:first-child span{
-  color: #1abc9c;
+  color: #19caad;
   font-size: 12px;
   padding-right: 2px;
 }
@@ -125,7 +126,7 @@ export default {
 }
 
 .easy-card-user-info .easy-favourited{
-  color: #1abc9c !important;
+  color: #19caad !important;
 }
 
 .easy-card-user-info img{

src/components/list.vue

@@ -1,5 +1,8 @@
 <template>
-  <ul class="content table-view easy-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
+  <ul class="content table-view easy-list" 
+  v-infinite-scroll="loadMore" 
+  infinite-scroll-disabled="busy" 
+  infinite-scroll-distance="10">
     <li class="table-view-cell media" v-for="result in results">
       <router-link class="navigate-right" to="/detail">
         <img class="media-object pull-left" :src="result.img">
@@ -10,7 +13,9 @@
       </router-link>
     </li>
     <div class="nsr-card-loading">
-      <nsr-loading :hide-loading="isloadingComplete" :is-end-text="endText">
+      <nsr-loading 
+      :hide-loading="isloadingComplete" 
+      :is-end-text="endText">
       </nsr-loading>
     </div>
   </ul>

src/components/text.vue

@@ -25,7 +25,7 @@ export default {
   padding-top: 200px;
 }
 .easy-content p:first-child {
-  color: #1abc9c;
+  color: #19caad;
   font-size: 25px;
 }
 .easy-content p:last-child {