├── .babelrc
├── .gitignore
├── CNAME
├── LICENSE
├── README.md
├── package.json
├── src
    ├── app.js
    ├── app.vue
    ├── components
    │   ├── alert.vue
    │   ├── barBottom.vue
    │   ├── barTop.vue
    │   ├── button.vue
    │   ├── card.vue
    │   ├── list.vue
    │   ├── loading.vue
    │   └── text.vue
    ├── images
    │   ├── banner.jpg
    │   ├── easy-vue.jpg
    │   ├── logo-3.png
    │   └── phone.png
    ├── index.html
    ├── mock
    │   └── api.json
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
    │   ├── detail.vue
    │   ├── home.vue
    │   ├── lists.vue
    │   └── option.vue
├── webpack.config.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | bower_components
4 | dist
5 | npm-debug.log
6 | # index.html
7 | yarn-error.log
8 | 


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | vue.tigerb.cn
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 Awe
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <p align="center">
  3 |     <img src="./src/images/logo-3.png" width="360px">
  4 | </p>
  5 | 
  6 | <h1 align="center">Easy Vue</h1>
  7 | 
  8 | <p align="center">
  9 | <a href="http://vue.tigerb.cn/#/"><img src="https://img.shields.io/badge/build-passing-brightgreen.svg" alt="Build Status"></a>
 10 | <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>
 11 | <a href="https://github.com/TIGERB/easy-vue/releases"><img src="https://img.shields.io/badge/download-yellow.svg" alt="Downloads"></a>
 12 | <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
 13 | <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> 
 14 | </p>
 15 | 
 16 | ## Learn Vue Easily
 17 | 
 18 | > An easy example using Vue2 to implement easy web
 19 | 
 20 | <p align="center">
 21 | 	<a href="http://naruto.tigerb.cn/"><img width="30%" src="https://blog-1251019962.cos.ap-beijing.myqcloud.com/qiniu_img_2022/wechat-blog-qrcode.jpg"></a>
 22 | <p>
 23 | 
 24 | ## Dependence
 25 | Dependence         |Version
 26 | -------------------|-------
 27 | Vue                |2.6.10
 28 | Vuex               |3.1.1
 29 | Webpack            |4.32.2
 30 | 
 31 | ## Latest Version 0.8.0(2019/05/26)
 32 | - 0.8.0 [2019/05/26]
 33 |   + use webpack 4.32.2
 34 |   + use vue 2.6.10
 35 | - 0.7.2 [2017/11/12]
 36 |   + refactor ui for card component
 37 | - 0.7.1 [2017/06/20]
 38 |   + separate router, store and vendor css from app.js
 39 |   + format code style
 40 |   + use webpack 3.0.0
 41 | - 0.7.0 [2017/03/24]
 42 |   + with a cool logo
 43 |   + use webpack2
 44 |   + use json file to mock api
 45 |   + use vue-resource
 46 | - 0.6.1 [2017/03/06]
 47 |   + use yarn
 48 | - 0.6.0 [2016/12/08]
 49 |   + fix not require fastclick from node_modules
 50 |   + rename view
 51 |   + add component alert, list, button, text
 52 |   + add view detail
 53 |   + update component barBottom, barTop
 54 |   + update view list&option by use component list&button
 55 | - 0.5.1 [2016/11/25]
 56 |   + do not rely on bower
 57 | - 0.5.0 [2016/11/22]
 58 |   + use vue 2.0
 59 |   + use vuex 2.0
 60 | - 0.3.0 [2016/09/13]
 61 |   + change UI for easy-vue
 62 |   + use vue-progressbar
 63 |   + add loading animation component in src/components
 64 |   + optimize card.vue
 65 | - 0.2.0
 66 |   + implements page change
 67 |   + optimize UI
 68 | 
 69 | > [latest version download](https://github.com/TIGERB/easy-vue/releases/tag/v0.7.1)
 70 | 
 71 | ## Demo
 72 | 
 73 | > <http://vue.tigerb.cn>
 74 | 
 75 | ## How To Use ?
 76 | 
 77 | ```
 78 | step 1: yarn install
 79 | 
 80 | step 2:
 81 |     - develop: yarn run dev
 82 |     - build  : yarn run build, and use *lite-server* or *http-server* to visit the dist directory
 83 | 
 84 | ```
 85 | 
 86 | ## APPRECIATION
 87 | 
 88 | <img src="https://raw.githubusercontent.com/TIGERB/easy-tips/master/money-qrcode.jpg" width="300px">
 89 | 
 90 | ## Contributors
 91 | 
 92 | This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
 93 | <a href="graphs/contributors"><img src="https://opencollective.com/easy-vue/contributors.svg?width=890&button=false" /></a>
 94 | 
 95 | 
 96 | ## Backers
 97 | 
 98 | Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/easy-vue#backer)]
 99 | 
100 | <a href="https://opencollective.com/easy-vue#backers" target="_blank"><img src="https://opencollective.com/easy-vue/backers.svg?width=890"></a>
101 | 
102 | 
103 | ## Sponsors
104 | 
105 | Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/easy-vue#sponsor)]
106 | 
107 | <a href="https://opencollective.com/easy-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/easy-vue/sponsor/0/avatar.svg"></a>
108 | <a href="https://opencollective.com/easy-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/easy-vue/sponsor/1/avatar.svg"></a>
109 | <a href="https://opencollective.com/easy-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/easy-vue/sponsor/2/avatar.svg"></a>
110 | <a href="https://opencollective.com/easy-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/easy-vue/sponsor/3/avatar.svg"></a>
111 | <a href="https://opencollective.com/easy-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/easy-vue/sponsor/4/avatar.svg"></a>
112 | <a href="https://opencollective.com/easy-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/easy-vue/sponsor/5/avatar.svg"></a>
113 | <a href="https://opencollective.com/easy-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/easy-vue/sponsor/6/avatar.svg"></a>
114 | <a href="https://opencollective.com/easy-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/easy-vue/sponsor/7/avatar.svg"></a>
115 | <a href="https://opencollective.com/easy-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/easy-vue/sponsor/8/avatar.svg"></a>
116 | <a href="https://opencollective.com/easy-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/easy-vue/sponsor/9/avatar.svg"></a>
117 | 
118 | 
119 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "easy-vue",
 3 |   "version": "0.8.0",
 4 |   "description": "Learn Vue Easily",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "clean": "rm -rf dist",
 8 |     "dev": "npm run clean && webpack-dev-server -d --open --progress",
 9 |     "build": "npm run clean && NODE_ENV=production webpack -p --hide-modules --progress"
10 |   },
11 |   "author": "TIGERB<TIERGB.cn>",
12 |   "license": "MIT",
13 |   "dependencies": {
14 |     "animate.css": "^3.5.2",
15 |     "babel": "^6.23.0",
16 |     "font-awesome": "^4.7.0",
17 |     "mini-css-extract-plugin": "^0.6.0",
18 |     "opencollective": "^1.0.3",
19 |     "ratchet-npm": "^2.0.4",
20 |     "vue": "^2.6.10",
21 |     "vue-infinite-scroll": "^2.0.2",
22 |     "vue-progressbar": "^0.7.5",
23 |     "vue-resource": "^1.3.0",
24 |     "vue-router": "^3.0.6",
25 |     "vue-template-compiler": "^2.6.10",
26 |     "vuex": "^3.1.1"
27 |   },
28 |   "devDependencies": {
29 |     "babel-cli": "^6.26.0",
30 |     "babel-core": "^6.26.3",
31 |     "babel-loader": "7",
32 |     "babel-plugin-transform-runtime": "^6.4.3",
33 |     "babel-preset-es2015": "^6.24.1",
34 |     "babel-runtime": "^6.23.0",
35 |     "copy-webpack-plugin": "^5.0.3",
36 |     "css-loader": "^2.1.1",
37 |     "file-loader": "^3.0.1",
38 |     "html-webpack-plugin": "^3.2.0",
39 |     "style-loader": "^0.18.2",
40 |     "vue-loader": "^15.7.0",
41 |     "vue-style-loader": "^4.1.2",
42 |     "webpack": "^4.32.2",
43 |     "webpack-cli": "^3.3.2",
44 |     "webpack-dev-server": "^3.4.1"
45 |   },
46 |   "collective": {
47 |     "type": "opencollective",
48 |     "url": "https://opencollective.com/easy-vue"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
 1 | import 'ratchet-npm/dist/css/ratchet.css'; // get ratchet
 2 | import 'font-awesome/css/font-awesome.css'; // get font-awesome
 3 | import 'animate.css/animate.css'; // get animate.css
 4 | 
 5 | // import FastClick from 'fastclick';
 6 | import Vue from 'vue'; // get vue
 7 | import VueProgressBar from 'vue-progressbar'; // get vue-progressbar
 8 | import InfiniteScroll from 'vue-infinite-scroll'; // get vue-infinite-scroll
 9 | 
10 | import App from './app.vue'; // get root module
11 | import router from './router';
12 | import store from './store'; // get vuex -> store
13 | 
14 | // FastClick.attach(document.body); // init fastclick
15 | const options = {
16 |   color: '#fff',
17 |   failedColor: '#874b4b',
18 |   thickness: '3px',
19 |   transition: {
20 |     speed: '0.2s',
21 |     opacity: '0.6s'
22 |   },
23 |   autoRevert: true,
24 |   location: 'top',
25 |   inverse: false
26 | };
27 | Vue.use(VueProgressBar, options);
28 | Vue.use(InfiniteScroll);
29 | 
30 | // init
31 | const app = new Vue({
32 |   router,
33 |   store,
34 |   render: h => h(App),
35 | }).$mount('#app');
36 | 


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <!-- set progressbar -->
 4 |     <vue-progress-bar></vue-progress-bar>
 5 |     <router-view></router-view>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <style>
10 | [v-cloak] {
11 |   display: none;
12 | }
13 | </style>
14 | 


--------------------------------------------------------------------------------
/src/components/alert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="easy-alert" v-show="isShow">
 3 |     <div class="animated tada">
 4 |       <p>
 5 |         hello vue ～
 6 |       </p>
 7 |       <p @click="hideAlert">
 8 |         确定
 9 |       </p>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import { mapState } from 'vuex';
16 | 
17 | export default {
18 |   data: () => ({
19 |     // isShow: false
20 |   }),
21 |   mounted: function () {
22 |     this.$nextTick(function () { });
23 |   },
24 |   methods: {
25 |     hideAlert: function () {
26 |       this.$store.commit('isShowAlert', false);
27 |     }
28 |   },
29 |   computed: mapState({
30 |     isShow: state => state.isShow,
31 |   }),
32 | }
33 | </script>
34 | 
35 | <style>
36 | .easy-alert {}
37 | 
38 | .easy-alert-hidden {
39 |   display: none;
40 | }
41 | 
42 | .easy-alert > div {
43 |   width: 240px;
44 |   height: 120px;
45 |   background-color: #fff;
46 |   position: absolute;
47 |   margin: auto;
48 |   top: 0;
49 |   right: 0;
50 |   bottom: 0;
51 |   left: 0;
52 |   border-radius: 10px;
53 |   box-shadow: 1px 1px 20px #bbb;
54 | }
55 | 
56 | .easy-alert > div > p {
57 |   text-align: center;
58 |   margin-bottom: 0;
59 |   border-radius: 0 0 10px 10px;
60 | }
61 | 
62 | .easy-alert > div > p:first-child {
63 |   font-size: 20px;
64 |   line-height: 80px;
65 |   color: #19caad;
66 | }
67 | 
68 | .easy-alert > div > p:last-child {
69 |   border-top: 1px solid #ddd;
70 |   line-height: 22px;
71 |   padding: 9px 0;
72 |   color: #fff;
73 |   background-color: #19caad;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/components/barBottom.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="bar bar-tab easy-bottom-bar">
 3 |     <router-link class="tab-item" to="/">
 4 |       <span class="icon fa fa-weixin" :class="{'easy-fa-color': isHome}"></span>
 5 |       <span class="tab-label" :class="{'easy-fa-color': isHome}">home</span>
 6 |     </router-link>
 7 |     <router-link class="tab-item" to="/lists">
 8 |       <span class="icon icon-pages" :class="{'easy-fa-color': isList}"></span>
 9 |       <span class="tab-label" :class="{'easy-fa-color': isList}">lists</span>
10 |     </router-link>
11 |     <router-link class="tab-item" to="/option">
12 |       <span class="icon icon-person" :class="{'easy-fa-color': isOption}"></span>
13 |       <span class="tab-label" :class="{'easy-fa-color': isOption}">option</span>
14 |     </router-link>
15 |   </nav>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   data: () => ({
21 |     isHome: true,
22 |     isList: false,
23 |     isOption: false,
24 |   }),
25 |   mounted: function() {
26 |     this.$nextTick(function() {
27 |       const uri = this.$route.path;
28 |       if (uri === '/') {
29 |         this.isHome = true;
30 |         this.isList = false;
31 |         this.isOption = false;
32 |       }
33 |       if (uri === '/lists') {
34 |         this.isHome = false;
35 |         this.isList = true;
36 |         this.isOption = false;
37 |       }
38 |       if (uri === '/option') {
39 |         this.isHome = false;
40 |         this.isList = false;
41 |         this.isOption = true;
42 |       }
43 |     });
44 |   },
45 |   methods: {
46 | 
47 |   }
48 | }
49 | </script>
50 | 
51 | <style>
52 | .easy-bottom-bar {
53 |   background-color: #19caad;
54 |   color: #fff;
55 |   border: none;
56 | }
57 | .easy-bottom-bar a {
58 |   color: #cdd !important;
59 | }
60 | .easy-fa-color {
61 |   color: #fff !important;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/components/barTop.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="bar bar-nav bar-easy-vue">
 3 |     <a class="icon icon-refresh pull-left" v-if="showRefeshIcon" @click="refresh"></a>
 4 |     <a class="icon icon-left-nav pull-left" v-if="showReturnIcon" @click="goBack"></a>
 5 |     <a class="icon icon-compose pull-right" v-if="showWriteIcon" @click="writeSome"></a>
 6 |     <h1 class="title">hello vue</h1>
 7 |   </header>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   props: {
13 |     showRefeshIcon: {
14 |       default: true
15 |     },
16 |     showReturnIcon: {
17 |       default: false
18 |     },
19 |     showWriteIcon: {
20 |       default: true
21 |     },
22 |   },
23 |   methods:{
24 |     writeSome: function() {
25 |       this.$store.commit('isShowAlert', true);
26 |     },
27 |     refresh: function() {
28 |       this.$store.dispatch('getData', {
29 |         progress: this,
30 |         refresh: true
31 |       });
32 |     },
33 |     goBack: function() {
34 |       this.$router.back();
35 |     }
36 |   }
37 | }
38 | </script>
39 | 
40 | <style>
41 |   .bar-easy-vue {
42 |     background-color: #19caad;
43 |   }
44 |   .bar-easy-vue a, h1 {
45 |     color: #fff !important;
46 |   }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/components/button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content easy-button">
 3 |     <ul class="table-view">
 4 |       <li class="table-view-cell media">
 5 |         <router-link class="navigate-right" to="/detail">
 6 |           <span class="media-object pull-left icon icon-person"></span>
 7 |           <div class="media-body">
 8 |             This ia a button
 9 |           </div>
10 |         </router-link>
11 |       </li>
12 |       <li class="table-view-cell media">
13 |         <router-link class="navigate-right" to="/detail">
14 |           <span class="media-object pull-left icon icon-gear"></span>
15 |           <div class="media-body">
16 |             This ia a button
17 |           </div>
18 |         </router-link>
19 |       </li>
20 |       <li class="table-view-cell media">
21 |         <router-link class="navigate-right" to="/detail">
22 |           <span class="media-object pull-left icon icon-pages"></span>
23 |           <div class="media-body">
24 |             This ia a button
25 |           </div>
26 |         </router-link>
27 |       </li>
28 |       <li class="table-view-cell media">
29 |         <router-link class="navigate-right" to="/detail">
30 |           <span class="media-object pull-left icon icon-trash"></span>
31 |           <div class="media-body">
32 |             This ia a button
33 |           </div>
34 |         </router-link>
35 |       </li>
36 |       <li class="table-view-cell media">
37 |         <router-link class="navigate-right" to="/detail">
38 |           <span class="media-object pull-left icon icon-search"></span>
39 |           <div class="media-body">
40 |             This ia a button
41 |           </div>
42 |         </router-link>
43 |       </li>
44 |       <li class="table-view-cell media">
45 |         <router-link class="navigate-right" to="/detail">
46 |           <span class="media-object pull-left icon icon-more"></span>
47 |           <div class="media-body">
48 |             This ia a button
49 |           </div>
50 |         </router-link>
51 |       </li>
52 |     </ul>
53 |   </div>
54 | </template>
55 | 
56 | <script>
57 | import {mapState} from 'vuex';
58 | 
59 | export default {
60 |   data: () => ({}),
61 |   mounted: function () {
62 |     this.$nextTick(function() {});
63 |   },
64 |   methods: {
65 |     hideAlert: function() {}
66 |   },
67 |   computed: mapState({}),
68 | }
69 | </script>
70 | 
71 | <style>
72 | .easy-button {
73 |   background-color: #eee;
74 | }
75 | .easy-button ul {
76 |   border: none !important;
77 |   margin-top: 100px !important;
78 | }
79 | .easy-button span {
80 |   color: #19caad;
81 | }
82 | .easy-button li {
83 |   border-bottom: 1px solid #eee;
84 |   background: #fff;
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/card.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content easy-card-bg"
  3 |   v-infinite-scroll="loadMore"
  4 |   infinite-scroll-disabled="busy"
  5 |   infinite-scroll-distance="10">
  6 |     <div class="easy-card" v-for="res in results">
  7 |       <img :src="res.img" alt="">
  8 |       <p>{{res.content}}</p>
  9 |       <div class="easy-card-user-info">
 10 |         <p>
 11 |           <img :src="res.avatar" alt="">
 12 |           <span>from</span>{{res.nickname}}
 13 |         </p>
 14 |         <p>
 15 |         <!-- <p @click="favourite"> -->
 16 |         <!-- <span class="fa"
 17 |         :class="{
 18 |         'fa-heart': isFavourited,
 19 |         'nsr-favourited': isFavourited,
 20 |         'fa-heart-o': isNotFavourited
 21 |         }">
 22 |         </span> -->
 23 |         {{res.date}}
 24 |         </p>
 25 |       </div>
 26 |     </div>
 27 |     <div class="nsr-card-loading">
 28 |       <nsr-loading
 29 |       :hide-loading="isloadingComplete"
 30 |       :is-end-text="endText">
 31 |       </nsr-loading>
 32 |     </div>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script>
 37 | import {mapState} from 'vuex';
 38 | 
 39 | export default {
 40 |   data: () => ({}),
 41 |   components: {
 42 |     'nsr-loading': require('../components/loading.vue'),
 43 |   },
 44 |   mounted: function() {
 45 |     this.$nextTick(function () {
 46 |       this.fetchData(this);
 47 |     });
 48 |   },
 49 |   methods: {
 50 |     fetchData: function(progress) {
 51 |       this.$store.dispatch('getData', {
 52 |         progress: progress,
 53 |         refresh: false
 54 |       });
 55 |     },
 56 |     loadMore: function() {
 57 |       this.fetchData(this);
 58 |     }
 59 |   },
 60 |   computed: mapState({
 61 |     results: state => state.cardData,
 62 |     isloadingComplete: state => state.isloadingComplete,
 63 |     busy: state => state.busy,
 64 |   })
 65 | }
 66 | </script>
 67 | 
 68 | <style>
 69 | .easy-card-bg {
 70 |   background-color:#fafafa !important;
 71 | }
 72 | 
 73 | .easy-card{
 74 |   margin: 20px 0px 50px 0px;
 75 |   border-top: 1px solid #eeefef;
 76 |   border-bottom: 1px solid #eeefef;
 77 |   border-radius: 0px;
 78 |   background-color: #fff;
 79 | }
 80 | 
 81 | .easy-card img{
 82 |   width: 100%;
 83 |   vertical-align: middle;
 84 | }
 85 | 
 86 | .easy-card > p{
 87 |   margin: 10px 10px;
 88 | }
 89 | 
 90 | .easy-card-loading{
 91 |   margin-bottom: 90px;
 92 | }
 93 | 
 94 | .easy-card-user-info{
 95 |   margin: 8px 10px;
 96 |   overflow: hidden;
 97 | }
 98 | 
 99 | 
100 | .easy-card-user-info p{
101 |   font-size: 14px;
102 |   margin: 10px 0;
103 |   color: #777;
104 | }
105 | 
106 | .easy-card-user-info p:first-child{
107 |   float: left;
108 | }
109 | 
110 | .easy-card-user-info p:last-child{
111 |   float: right;
112 |   font-size: 14px;
113 |   padding-top: 5px;
114 | }
115 | 
116 | .easy-card-user-info p:first-child span{
117 |   color: #19caad;
118 |   font-size: 12px;
119 |   padding-right: 2px;
120 | }
121 | 
122 | .easy-card-user-info p:last-child span{
123 |   color: #777;
124 |   font-size: 14px;
125 |   padding-right: 3px;
126 | }
127 | 
128 | .easy-card-user-info .easy-favourited{
129 |   color: #19caad !important;
130 | }
131 | 
132 | .easy-card-user-info img{
133 |   width: 36px;
134 |   height: 36px;
135 |   border-radius: 50%;
136 |   display: inline-block;
137 |   vertical-align: middle;
138 | }
139 | </style>
140 | 


--------------------------------------------------------------------------------
/src/components/list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="content table-view easy-list" 
 3 |   v-infinite-scroll="loadMore" 
 4 |   infinite-scroll-disabled="busy" 
 5 |   infinite-scroll-distance="10">
 6 |     <li class="table-view-cell media" v-for="result in results">
 7 |       <router-link class="navigate-right" to="/detail">
 8 |         <img class="media-object pull-left" :src="result.img">
 9 |         <div class="media-body">
10 |           hello vue
11 |           <p>a easy example using the vue to implement easy web</p>
12 |         </div>
13 |       </router-link>
14 |     </li>
15 |     <div class="nsr-card-loading">
16 |       <nsr-loading 
17 |       :hide-loading="isloadingComplete" 
18 |       :is-end-text="endText">
19 |       </nsr-loading>
20 |     </div>
21 |   </ul>
22 | </template>
23 | 
24 | <script>
25 | import { mapState } from 'vuex';
26 | 
27 | export default {
28 |   data: () => ({}),
29 |   components: {
30 |     'nsr-loading': require('../components/loading.vue'),
31 |   },
32 |   mounted: function() {
33 |     this.$nextTick(function() {
34 |       this.fetchData(this);
35 |     });
36 |   },
37 |   methods: {
38 |     fetchData: function(progress) {
39 |       this.$store.dispatch('getData', {
40 |         progress: progress,
41 |         refresh: false
42 |       });
43 |     },
44 |     loadMore: function() {
45 |       this.fetchData(this);
46 |     }
47 |   },
48 |   computed: mapState({
49 |     results: state => state.cardData,
50 |     isloadingComplete: state => state.isloadingComplete,
51 |     busy: state => state.busy,
52 |   })
53 | }
54 | </script>
55 | 
56 | <style>
57 | .easy-list img {
58 |   width: 42px;
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/components/loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="nsr-loading-center">
 3 |     <i class="fa fa-spinner fa-spin"
 4 |     :class="{'nsr-loading-hiden': hideLoading}">
 5 |     </i>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     hideLoading: {
13 |       // default: true
14 |     },
15 |     isEndText: {
16 |       // default: ''
17 |     }
18 |   },
19 | }
20 | </script>
21 | 
22 | <style>
23 | .nsr-loading-center {
24 |   text-align: center;
25 |   margin: 10px auto;
26 |   color: #929292;
27 | }
28 | .nsr-loading-hiden {
29 |   display: none;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/components/text.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="easy-content">
 3 |     <p>
 4 |       Learn Vue Easy
 5 |     </p>
 6 |     <p>
 7 |       a easy example using the vue to implement easy web
 8 |     </p>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   data: () => ({}),
15 |   mounted: function () {
16 |     this.$nextTick(function() {});
17 |   },
18 |   methods: {}
19 | }
20 | </script>
21 | 
22 | <style>
23 | .easy-content {
24 |   text-align: center;
25 |   padding-top: 200px;
26 | }
27 | .easy-content p:first-child {
28 |   color: #19caad;
29 |   font-size: 25px;
30 | }
31 | .easy-content p:last-child {
32 |   padding-top: 20px;
33 |   color: #bbb;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/images/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TIGERB/easy-vue/3dd7458ca717a055b5e893a6a01b1fc57cd549ca/src/images/banner.jpg


--------------------------------------------------------------------------------
/src/images/easy-vue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TIGERB/easy-vue/3dd7458ca717a055b5e893a6a01b1fc57cd549ca/src/images/easy-vue.jpg


--------------------------------------------------------------------------------
/src/images/logo-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TIGERB/easy-vue/3dd7458ca717a055b5e893a6a01b1fc57cd549ca/src/images/logo-3.png


--------------------------------------------------------------------------------
/src/images/phone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TIGERB/easy-vue/3dd7458ca717a055b5e893a6a01b1fc57cd549ca/src/images/phone.png


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>easy-vue</title>
 8 | </head>
 9 | <body>
10 |   <div id='app'></div>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/mock/api.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "img": "http://cdn.tigerb.cn/WechatIMG129.jpeg",
  4 |     "content": "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.",
  5 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
  6 |     "nickname": "TIGERB",
  7 |     "date": "2017-11-12"
  8 |   },
  9 |   {
 10 |     "img": "http://cdn.tigerb.cn/WechatIMG122.jpeg",
 11 |     "content": "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.",
 12 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 13 |     "nickname": "TIGERB",
 14 |     "date": "2017-11-12"
 15 |   },
 16 |   {
 17 |     "img": "http://cdn.tigerb.cn/WechatIMG123.jpeg",
 18 |     "content": "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.",
 19 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 20 |     "nickname": "TIGERB",
 21 |     "date": "2017-11-12"
 22 |   },
 23 |   {
 24 |     "img": "http://cdn.tigerb.cn/WechatIMG127.jpeg",
 25 |     "content": "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.",
 26 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 27 |     "nickname": "TIGERB",
 28 |     "date": "2017-11-12"
 29 |   },
 30 |   {
 31 |     "img": "http://cdn.tigerb.cn/WechatIMG133.jpeg",
 32 |     "content": "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.",
 33 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 34 |     "nickname": "TIGERB",
 35 |     "date": "2017-11-12"
 36 |   },
 37 |   {
 38 |     "img": "http://cdn.tigerb.cn/WechatIMG132.jpeg",
 39 |     "content": "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.",
 40 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 41 |     "nickname": "TIGERB",
 42 |     "date": "2017-11-12"
 43 |   },
 44 |   {
 45 |     "img": "http://cdn.tigerb.cn/WechatIMG135.jpeg",
 46 |     "content": "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.",
 47 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 48 |     "nickname": "TIGERB",
 49 |     "date": "2017-11-12"
 50 |   },
 51 |   {
 52 |     "img": "http://cdn.tigerb.cn/WechatIMG131.jpeg",
 53 |     "content": "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.",
 54 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 55 |     "nickname": "TIGERB",
 56 |     "date": "2017-11-12"
 57 |   },
 58 |   {
 59 |     "img": "http://cdn.tigerb.cn/WechatIMG126.jpeg",
 60 |     "content": "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.",
 61 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 62 |     "nickname": "TIGERB",
 63 |     "date": "2017-11-12"
 64 |   },
 65 |   {
 66 |     "img": "http://cdn.tigerb.cn/WechatIMG125.jpeg",
 67 |     "content": "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.",
 68 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 69 |     "nickname": "TIGERB",
 70 |     "date": "2017-11-12"
 71 |   },
 72 |   {
 73 |     "img": "http://cdn.tigerb.cn/WechatIMG128.jpeg",
 74 |     "content": "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.",
 75 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 76 |     "nickname": "TIGERB",
 77 |     "date": "2017-11-12"
 78 |   },
 79 |   {
 80 |     "img": "http://cdn.tigerb.cn/WechatIMG124.jpeg",
 81 |     "content": "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.",
 82 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 83 |     "nickname": "TIGERB",
 84 |     "date": "2017-11-12"
 85 |   },
 86 |   {
 87 |     "img": "http://cdn.tigerb.cn/WechatIMG131.jpeg",
 88 |     "content": "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.",
 89 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 90 |     "nickname": "TIGERB",
 91 |     "date": "2017-11-12"
 92 |   },
 93 |   {
 94 |     "img": "http://cdn.tigerb.cn/WechatIMG134.jpeg",
 95 |     "content": "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.",
 96 |     "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
 97 |     "nickname": "TIGERB",
 98 |     "date": "2017-11-12"
 99 |   }
100 | ]
101 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueRouter from 'vue-router';
 3 | 
 4 | import Home from '../views/home.vue';
 5 | import Lists from '../views/lists.vue';
 6 | import Option from '../views/option.vue';
 7 | import Detail from '../views/detail.vue';
 8 | 
 9 | Vue.use(VueRouter);
10 | 
11 | const routes = [
12 |   { path: '/', component: Home },
13 |   { path: '/lists', component: Lists },
14 |   { path: '/option', component: Option },
15 |   { path: '/detail', component: Detail },
16 | ];
17 | 
18 | const router = new VueRouter({routes});
19 | 
20 | export default router;
21 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'; // get vue
 2 | import Vuex from 'vuex'; // get vuex
 3 | import VueResource from 'vue-resource';// get $http
 4 | 
 5 | Vue.use(Vuex);
 6 | Vue.use(VueResource);
 7 | 
 8 | const state = {
 9 |   cardData: [],
10 |   isloadingComplete: false,
11 |   busy: false,
12 |   isShow: false,
13 | };
14 | 
15 | const getters = {};
16 | 
17 | const mutations = {
18 |   updateLoadingState(state, data) {
19 |     state.isloadingComplete = data;
20 |   },
21 |   updateBusyState(state, data) {
22 |     state.busy = data;
23 |   },
24 |   addData(state, data) {
25 |     state.cardData = state.cardData.concat(data);
26 |   },
27 |   refreshData(state, data) {
28 |     state.cardData = data;
29 |   },
30 |   isShowAlert(state, data) {
31 |     state.isShow = data;
32 |   },
33 | };
34 | 
35 | const actions = {
36 |   getData(context, object) {
37 |     const {progress, isRefresh} = object;
38 | 	const mutationName = isRefresh === true ? 'refreshData' : 'addData';
39 |     progress.$Progress.start();
40 |     context.commit('updateLoadingState', false);
41 |     context.commit('updateBusyState', true);
42 | 
43 |     /**
44 |      * use vue-resource
45 |      */
46 |     Vue.http.get('/mock/api.json').then((response) => {
47 |       const json = response.data;
48 |       context.commit('updateLoadingState', true);
49 |       context.commit('updateBusyState', false);
50 |       context.commit(mutationName, json);        
51 |       progress.$Progress.finish();
52 |     }, () => {
53 |       context.commit('updateBusyState', false);
54 |       progress.$Progress.fail();
55 |     });
56 | }
57 | 
58 | };
59 | 
60 | const store = new Vuex.Store({
61 |  state,
62 |  getters,
63 |  mutations,
64 |  actions,
65 | });
66 | 
67 | export default store;
68 | 


--------------------------------------------------------------------------------
/src/views/detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <bar-top
 4 |     :show-refesh-icon="false"
 5 |     :show-return-icon="true"
 6 |     :show-write-icon="false"></bar-top>
 7 |     <text-content></text-content>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import barTop from '../components/barTop.vue';
13 | import text from '../components/text.vue';
14 | 
15 | export default {
16 |   components: {
17 |     'bar-top': barTop,
18 |     'text-content': text,
19 |   },
20 |   methods:{
21 | 
22 |   }
23 | }
24 | </script>
25 | 
26 | <style>
27 | 
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/views/home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <bar-top
 4 |     :show-refesh-icon="true"
 5 |     :show-return-icon="false"
 6 |     :show-write-icon="true"></bar-top>
 7 |     <card></card>
 8 |     <bar-bottom></bar-bottom>
 9 |     <alert></alert>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import barTop from '../components/barTop.vue';
15 | import card from '../components/card.vue';
16 | import barBottom from '../components/barBottom.vue';
17 | import alert from '../components/alert.vue';
18 | 
19 | export default {
20 |   components: {
21 |     'bar-top': barTop,
22 |     'card': card,
23 |     'alert': alert,
24 |     'bar-bottom': barBottom,
25 |   },
26 |   methods:{
27 | 
28 |   }
29 | }
30 | </script>
31 | 
32 | <style>
33 | 
34 | </style>
35 | 


--------------------------------------------------------------------------------
/src/views/lists.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <bar-top
 4 |     :show-refesh-icon="true"
 5 |     :show-return-icon="false"
 6 |     :show-write-icon="false"></bar-top>
 7 |     <list></list>
 8 |     <bar-bottom></bar-bottom>
 9 |     <alert></alert>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import barTop from '../components/barTop.vue';
15 | import list from '../components/list.vue';
16 | import barBottom from '../components/barBottom.vue';
17 | import alert from '../components/alert.vue';
18 | 
19 | export default {
20 |   components: {
21 |     'bar-top': barTop,
22 |     'list': list,
23 |     'alert': alert,
24 |     'bar-bottom': barBottom,
25 |   },
26 |   methods: {
27 | 
28 |   }
29 | }
30 | </script>
31 | 
32 | <style>
33 | 
34 | </style>
35 | 


--------------------------------------------------------------------------------
/src/views/option.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <bar-top
 4 |     :show-refesh-icon="false"
 5 |     :show-return-icon="false"
 6 |     :show-write-icon="false">
 7 |     </bar-top>
 8 |     <div class="pagethree-button">
 9 |         <option-button></option-button>
10 |     </div>
11 |     <bar-bottom></bar-bottom>
12 |     <alert></alert>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import barTop from '../components/barTop.vue';
18 | import button from '../components/button.vue';
19 | import barBottom from '../components/barBottom.vue';
20 | import alert from '../components/alert.vue';
21 | 
22 | export default {
23 |   components: {
24 |     'bar-top': barTop,
25 |     'option-button': button,
26 |     'alert': alert,
27 |     'bar-bottom': barBottom,
28 |   },
29 |   methods: {
30 | 
31 |   }
32 | }
33 | </script>
34 | 
35 | <style>
36 | .pagethree-button {
37 |   margin-top: 80px;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var path = require('path');
 3 | var htmlWebpackPlugin = require('html-webpack-plugin');
 4 | // var extractTextPlugin = require('extract-text-webpack-plugin'); // separate css
 5 | var miniCssExtractPlugin = require('mini-css-extract-plugin')
 6 | var copyWebpackPlugin = require('copy-webpack-plugin');
 7 | var vueLoaderPlugin = require('vue-loader/lib/plugin')
 8 | 
 9 | var webpackConfig = module.exports = {}; // init object
10 | var isProduction = process.env.NODE_ENV === 'production'; // production environment
11 | 
12 | // input
13 | webpackConfig.entry = {
14 |   app: './src/app.js', // main
15 | };
16 | 
17 | // output
18 | webpackConfig.output = {
19 |   path: path.resolve(__dirname, 'dist'),
20 |   publicPath: '/',
21 |   filename: isProduction ? '[name].[hash].js' : '[name].js',
22 | };
23 | 
24 | // loader
25 | webpackConfig.module = {
26 |   rules: [
27 |     {
28 |       test: /\.css$/,
29 |       use: [
30 |         miniCssExtractPlugin.loader,
31 |         "css-loader"
32 |       ],
33 |     },
34 |     {
35 |       test: /\.vue$/,
36 |       loader: 'vue-loader',
37 |     },
38 |     {
39 |       test: /\.js$/,
40 |       loader: 'babel-loader',
41 |       exclude: /node_modules/,
42 |     },
43 |     {
44 |       test: /\.(eot(|\?v=.*)|woff(|\?v=.*)|woff2(|\?v=.*)|ttf(|\?v=.*)|svg(|\?v=.*))$/,
45 |       loader: 'file-loader',
46 |       options: { name: 'fonts/[name].[ext]' },
47 |     },
48 |     {
49 |       test: /\.(png|jpg|gif)$/,
50 |       loader: 'file-loader',
51 |     },
52 |   ]
53 | };
54 | 
55 | webpackConfig.plugins = [
56 |   // make index.html
57 |   new htmlWebpackPlugin({
58 |     template: './src/index.html'
59 |   }),
60 |   // separate css file
61 |   new miniCssExtractPlugin({
62 |     filename: isProduction ? 'app.[hash].css' : 'app.css',
63 |     // disable: false,
64 |     // allChunks: true
65 |   }),
66 |   new webpack.DefinePlugin({
67 |     'process.env': {
68 |       NODE_ENV: '"production"'
69 |     }
70 |   }),
71 |   new copyWebpackPlugin([
72 |     { from: 'src/mock/api.json', to: 'mock' },
73 |     { context: 'src/images', from: '*', to: path.join(__dirname, 'dist', 'images') }
74 |   ]),
75 |   new vueLoaderPlugin()
76 | ];
77 | 
78 | if (!isProduction) {
79 |   webpackConfig.devServer = {
80 |     contentBase: path.resolve(__dirname, 'dist'),
81 |     compress: true,
82 |     historyApiFallback: true,
83 |   };
84 | }
85 | 


--------------------------------------------------------------------------------