Merge branch 'feature/wp4'

TIGERB · May 26, 2019 · 6f8c669 · 6f8c669
2 parents 3a069ef + ca1e5d1
commit 6f8c669
Show file tree

Hide file tree

Showing 12 changed files with 4,316 additions and 2,140 deletions.
diff --git a/README.md b/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
 
 ```
 

diff --git a/package.json b/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"
   }
-}
+}
diff --git a/src/app.js b/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',

diff --git a/src/components/alert.vue b/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>
diff --git a/src/components/barBottom.vue b/src/components/barBottom.vue
@@ -50,7 +50,7 @@ export default {
 
 <style>
 .easy-bottom-bar {
-  background-color: #1abc9c;
+  background-color: #19caad;
   color: #fff;
   border: none;
 }

diff --git a/src/components/barTop.vue b/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;

diff --git a/src/components/button.vue b/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;

diff --git a/src/components/card.vue b/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{

diff --git a/src/components/list.vue b/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>

diff --git a/src/components/text.vue b/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 {

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,8 +1,10 @@
 var webpack = require('webpack');
 var path = require('path');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin'); // separate css
-var CopyWebpackPlugin = require('copy-webpack-plugin');
+var htmlWebpackPlugin = require('html-webpack-plugin');
+// var extractTextPlugin = require('extract-text-webpack-plugin'); // separate css
+var miniCssExtractPlugin = require('mini-css-extract-plugin')
+var copyWebpackPlugin = require('copy-webpack-plugin');
+var vueLoaderPlugin = require('vue-loader/lib/plugin')
 
 var webpackConfig = module.exports = {}; // init object
 var isProduction = process.env.NODE_ENV === 'production'; // production environment
@@ -24,10 +26,10 @@ webpackConfig.module = {
   rules: [
     {
       test: /\.css$/,
-      use: ExtractTextPlugin.extract({
-        fallback: "style-loader",
-        use: "css-loader",
-      }),
+      use: [
+        miniCssExtractPlugin.loader,
+        "css-loader"
+      ],
     },
     {
       test: /\.vue$/,
@@ -52,11 +54,11 @@ webpackConfig.module = {
 
 webpackConfig.plugins = [
   // make index.html
-  new HtmlWebpackPlugin({
+  new htmlWebpackPlugin({
     template: './src/index.html'
   }),
   // separate css file
-  new ExtractTextPlugin({
+  new miniCssExtractPlugin({
     filename: isProduction ? 'app.[hash].css' : 'app.css',
     // disable: false,
     // allChunks: true
@@ -66,10 +68,11 @@ webpackConfig.plugins = [
       NODE_ENV: '"production"'
     }
   }),
-  new CopyWebpackPlugin([
+  new copyWebpackPlugin([
     { from: 'src/mock/api.json', to: 'mock' },
     { context: 'src/images', from: '*', to: path.join(__dirname, 'dist', 'images') }
   ]),
+  new vueLoaderPlugin()
 ];
 
 if (!isProduction) {