├── README.md
├── daily
    ├── .babelrc
    ├── app.vue
    ├── components
    │   ├── daily-article.vue
    │   └── item.vue
    ├── directives
    │   └── time.js
    ├── index.ejs
    ├── index.html
    ├── libs
    │   └── util.js
    ├── main.js
    ├── package.json
    ├── proxy.js
    ├── style.css
    ├── webpack.config.js
    └── webpack.prod.config.js
├── demo
    ├── .babelrc
    ├── app.vue
    ├── button.vue
    ├── images
    │   └── image.png
    ├── index.ejs
    ├── index.html
    ├── main.js
    ├── package.json
    ├── style.css
    ├── title.vue
    ├── webpack.config.js
    └── webpack.prod.config.js
├── router
    ├── .babelrc
    ├── app.vue
    ├── button.vue
    ├── images
    │   └── image.png
    ├── index.ejs
    ├── index.html
    ├── main.js
    ├── package.json
    ├── style.css
    ├── title.vue
    ├── views
    │   ├── about.vue
    │   ├── index.vue
    │   └── user.vue
    ├── webpack.config.js
    └── webpack.prod.config.js
├── shopping
    ├── .babelrc
    ├── app.vue
    ├── components
    │   └── product.vue
    ├── index.ejs
    ├── index.html
    ├── main.js
    ├── package.json
    ├── product.js
    ├── router.js
    ├── style.css
    ├── views
    │   ├── cart.vue
    │   ├── list.vue
    │   └── product.vue
    ├── webpack.config.js
    └── webpack.prod.config.js
├── vue-bus
    ├── .babelrc
    ├── app.vue
    ├── button.vue
    ├── images
    │   └── image.png
    ├── index.ejs
    ├── index.html
    ├── main.js
    ├── package.json
    ├── style.css
    ├── title.vue
    ├── views
    │   ├── about.vue
    │   ├── counter.vue
    │   ├── index.vue
    │   └── user.vue
    ├── vue-bus.js
    ├── webpack.config.js
    └── webpack.prod.config.js
└── vuex
    ├── .babelrc
    ├── app.vue
    ├── button.vue
    ├── images
        └── image.png
    ├── index.ejs
    ├── index.html
    ├── main.js
    ├── package.json
    ├── style.css
    ├── title.vue
    ├── views
        ├── about.vue
        ├── index.vue
        └── user.vue
    ├── webpack.config.js
    └── webpack.prod.config.js


/README.md:
--------------------------------------------------------------------------------
 1 | # vue-book
 2 | 《Vue.js实战》源码及答疑
 3 | 
 4 | ### 正版购买地址
 5 | - **京东** https://item.jd.com/12215519.html
 6 | - **天猫** https://detail.tmall.com/item.htm?id=559480603657
 7 | - **当当** http://product.dangdang.com/25180286.html
 8 | - **Vue.js 系列视频教程** https://segmentfault.com/ls/1650000011074057
 9 | - **iView 系列视频教程** https://segmentfault.com/ls/1650000016424063
10 | 
11 | ## 已知勘误
12 | > 感谢大家的反馈，目前已知的勘误如下，已修改，再次印刷时将更正。
13 | 
14 | - [P26] 4.2章节个别错误 https://github.com/icarusion/vue-book/issues/2
15 | - [P60] 应该是：给 `<select`>添加属性 https://github.com/icarusion/vue-book/issues/13 
16 | - [P81] 父链标题下有错别字 https://github.com/icarusion/vue-book/issues/5
17 | - [P87] 错别字 https://github.com/icarusion/vue-book/issues/23
18 | - [P135] VNode 对象参数 context 说明错别字 https://github.com/icarusion/vue-book/issues/24
19 | - [P204] `htmlwebpackPlugin` 更改为 `htmlWebpackPlugin` https://github.com/icarusion/vue-book/issues/20 
20 | - [P271] 代码修改为 `return year + '' + month + '' + day;` https://github.com/icarusion/vue-book/issues/17
21 | - [P326] 倒数第三行少了个字符 's' https://github.com/icarusion/vue-book/issues/1
22 | 


--------------------------------------------------------------------------------
/daily/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["es2015"],
3 |     "plugins": ["transform-runtime"],
4 |     "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/daily/app.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="daily">
  3 |         <div class="daily-menu">
  4 |             <div class="daily-menu-item"
  5 |                  @click="handleToRecommend"
  6 |                  :class="{ on: type === 'recommend' }">每日推荐</div>
  7 |             <div class="daily-menu-item"
  8 |                  :class="{ on: type === 'daily' }"
  9 |                  @click="showThemes = !showThemes">主题日报</div>
 10 |             <ul v-show="showThemes">
 11 |                 <li v-for="item in themes">
 12 |                     <a
 13 |                         :class="{ on: item.id === themeId && type === 'daily' }"
 14 |                         @click="handleToTheme(item.id)">{{ item.name }}</a>
 15 |                 </li>
 16 |             </ul>
 17 |         </div>
 18 |         <div class="daily-list" ref="list">
 19 |             <template v-if="type === 'recommend'">
 20 |                 <div v-for="list in recommendList">
 21 |                     <div class="daily-date">{{ formatDay(list.date) }}</div>
 22 |                     <Item
 23 |                         v-for="item in list.stories"
 24 |                         :data="item"
 25 |                         :key="item.id"
 26 |                         @click.native="handleClick(item.id)"></Item>
 27 |                 </div>
 28 |             </template>
 29 |             <template v-if="type === 'daily'">
 30 |                 <Item
 31 |                     v-for="item in list"
 32 |                     :data="item"
 33 |                     :key="item.id"
 34 |                     @click.native="handleClick(item.id)"></Item>
 35 |             </template>
 36 |         </div>
 37 |         <daily-article :id="articleId"></daily-article>
 38 |     </div>
 39 | </template>
 40 | <script>
 41 |     import Item from './components/item.vue';
 42 |     import dailyArticle from './components/daily-article.vue';
 43 |     import $ from './libs/util';
 44 | 
 45 |     export default {
 46 |         components: { Item, dailyArticle },
 47 |         data () {
 48 |             return {
 49 |                 themes: [],
 50 |                 showThemes: false,
 51 |                 type: 'recommend',
 52 |                 recommendList: [],
 53 |                 dailyTime: $.getTodayTime(),
 54 |                 list: [],
 55 |                 themeId: 0,
 56 |                 articleId: 0,
 57 |                 isLoading: false
 58 |             }
 59 |         },
 60 |         methods: {
 61 |             handleToRecommend () {
 62 |                 this.type = 'recommend';
 63 |                 this.recommendList = [];
 64 |                 this.dailyTime = $.getTodayTime();
 65 |                 this.getRecommendList();
 66 |             },
 67 |             handleToTheme (id) {
 68 |                 this.type = 'daily';
 69 |                 this.themeId = id;
 70 |                 this.list = [];
 71 |                 $.ajax.get('theme/' + id).then(res => {
 72 |                     this.list = res.stories
 73 |                         .filter(item => item.type !== 1);
 74 |                 })
 75 |             },
 76 |             getThemes () {
 77 |                 $.ajax.get('themes').then(res => {
 78 |                     this.themes = res.others;
 79 |                 })
 80 |             },
 81 |             getRecommendList () {
 82 |                 this.isLoading = true;
 83 |                 const prevDay = $.prevDay(this.dailyTime + 86400000);
 84 |                 $.ajax.get('news/before/' + prevDay).then(res => {
 85 |                     this.recommendList.push(res);
 86 |                     this.isLoading = false;
 87 |                 })
 88 |             },
 89 |             formatDay (date) {
 90 |                 let month = date.substr(4, 2);
 91 |                 let day = date.substr(6, 2);
 92 |                 if (month.substr(0, 1) === '0') month = month.substr(1, 1);
 93 |                 if (day.substr(0, 1) === '0') day = day.substr(1, 1);
 94 |                 return `${month} 月 ${day} 日`;
 95 |             },
 96 |             handleClick (id) {
 97 |                 this.articleId = id;
 98 |             }
 99 |         },
100 |         mounted () {
101 |             this.getRecommendList();
102 |             this.getThemes();
103 |             const $list = this.$refs.list;
104 |             $list.addEventListener('scroll', () => {
105 |                 if (this.type === 'daily' || this.isLoading) return;
106 |                 if
107 |                 (
108 |                     $list.scrollTop
109 |                     + document.body.clientHeight
110 |                     >= $list.scrollHeight
111 |                 )
112 |                 {
113 |                     this.dailyTime -= 86400000;
114 |                     this.getRecommendList();
115 |                 }
116 |             });
117 |         }
118 |     }
119 | </script>


--------------------------------------------------------------------------------
/daily/components/daily-article.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="daily-article">
 3 |         <div class="daily-article-title">{{ data.title }}</div>
 4 |         <div class="daily-article-content" v-html="data.body"></div>
 5 |         <div class="daily-comments" v-show="comments.length">
 6 |             <span>评论（{{ comments.length }}）</span>
 7 |             <div class="daily-comment" v-for="comment in comments">
 8 |                 <div class="daily-comment-avatar">
 9 |                     <img :src="comment.avatar">
10 |                 </div>
11 |                 <div class="daily-comment-content">
12 |                     <div class="daily-comment-name">{{ comment.author }}</div>
13 |                     <div class="daily-comment-time" v-time="comment.time"></div>
14 |                     <div class="daily-comment-text">{{ comment.content }}</div>
15 |                 </div>
16 |             </div>
17 |         </div>
18 |     </div>
19 | </template>
20 | <script>
21 |     import Time from '../directives/time';
22 |     import $ from '../libs/util';
23 |     export default {
24 |         directives: { Time },
25 |         props: {
26 |             id: {
27 |                 type: Number,
28 |                 default: 0
29 |             }
30 |         },
31 |         data () {
32 |             return {
33 |                 data: {},
34 |                 comments: []
35 |             }
36 |         },
37 |         methods: {
38 |             getArticle () {
39 |                 $.ajax.get('news/' + this.id).then(res => {
40 |                     res.body = res.body
41 |                         .replace(/src="http/g, 'src="' + $.imgPath + 'http');
42 |                     res.body = res.body
43 |                         .replace(/src="https/g, 'src="' + $.imgPath + 'https');
44 |                     this.data = res;
45 |                     window.scrollTo(0, 0);
46 |                     this.getComments();
47 |                 })
48 |             },
49 |             getComments () {
50 |                 this.comments = [];
51 |                 $.ajax.get('story/' + this.id + '/short-comments').then(res => {
52 |                     this.comments = res.comments.map(comment => {
53 |                         // 将头像的图片地址转为代理地址
54 |                         comment.avatar = $.imgPath + comment.avatar;
55 |                         return comment;
56 |                     });
57 |                 })
58 |             }
59 |         },
60 |         watch: {
61 |             id (val) {
62 |                 if (val) this.getArticle();
63 |             }
64 |         }
65 |     };
66 | </script>


--------------------------------------------------------------------------------
/daily/components/item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <a class="daily-item">
 3 |         <div class="daily-img" v-if="data.images">
 4 |             <img :src="imgPath + data.images[0]">
 5 |         </div>
 6 |         <div
 7 |             class="daily-title"
 8 |             :class="{ noImg: !data.images}">{{ data.title }}</div>
 9 |     </a>
10 | </template>
11 | <script>
12 |     import $ from '../libs/util';
13 |     export default {
14 |         props: {
15 |             data: {
16 |                 type: Object
17 |             }
18 |         },
19 |         data () {
20 |             return {
21 |                 imgPath: $.imgPath
22 |             }
23 |         }
24 |     }
25 | </script>


--------------------------------------------------------------------------------
/daily/directives/time.js:
--------------------------------------------------------------------------------
 1 | var Time = {
 2 |     // 获取当前时间戳
 3 |     getUnix: function () {
 4 |         var date = new Date();
 5 |         return date.getTime();
 6 |     },
 7 |     // 获取今天0点0分0秒的时间戳
 8 |     getTodayUnix: function () {
 9 |         var date = new Date();
10 |         date.setHours(0);
11 |         date.setMinutes(0);
12 |         date.setSeconds(0);
13 |         date.setMilliseconds(0);
14 |         return date.getTime();
15 |     },
16 |     // 获取今年1月1日0点0分0秒的时间戳
17 |     getYearUnix: function () {
18 |         var date = new Date();
19 |         date.setMonth(0);
20 |         date.setDate(1);
21 |         date.setHours(0);
22 |         date.setMinutes(0);
23 |         date.setSeconds(0);
24 |         date.setMilliseconds(0);
25 |         return date.getTime();
26 |     },
27 |     // 获取标准年月日
28 |     getLastDate: function(time) {
29 |         var date = new Date(time);
30 |         var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
31 |         var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
32 |         return date.getFullYear() + '-' + month + "-" + day;
33 |     },
34 |     // 转换时间
35 |     getFormatTime: function(timestamp) {
36 |         var now = this.getUnix();    //当前时间戳
37 |         var today = this.getTodayUnix(); //今天0点时间戳
38 |         var year = this.getYearUnix();   //今年0点时间戳
39 |         var timer = (now - timestamp) / 1000;   // 转换为秒级时间戳
40 |         var tip = '';
41 | 
42 |         if (timer <= 0) {
43 |             tip = '刚刚';
44 |         } else if (Math.floor(timer/60) <= 0) {
45 |             tip = '刚刚';
46 |         } else if (timer < 3600) {
47 |             tip = Math.floor(timer/60) + '分钟前';
48 |         } else if (timer >= 3600 && (timestamp - today >= 0) ) {
49 |             tip = Math.floor(timer/3600) + '小时前';
50 |         } else if (timer/86400 <= 31) {
51 |             tip = Math.ceil(timer/86400) + '天前';
52 |         } else {
53 |             tip = this.getLastDate(timestamp);
54 |         }
55 |         return tip;
56 |     }
57 | };
58 | 
59 | export default {
60 |     bind: function (el, binding) {
61 |         el.innerHTML = Time.getFormatTime(binding.value * 1000);
62 |         el.__timeout__ = setInterval(function() {
63 |             el.innerHTML = Time.getFormatTime(binding.value * 1000);
64 |         }, 60000);
65 |     },
66 |     unbind: function (el) {
67 |         clearInterval(el.__timeout__);
68 |         delete el.__timeout__;
69 |     }
70 | }


--------------------------------------------------------------------------------
/daily/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>知乎日报</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/daily/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>知乎日报</title>
 6 |     <link rel="stylesheet" type="text/css" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 |     <div id="app">
10 |         
11 |     </div>
12 |     <script type="text/javascript" src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/daily/libs/util.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | const Util = {
 4 |     imgPath: 'http://127.0.0.1:8011/img/',
 5 |     apiPath: 'http://127.0.0.1:8010/'
 6 | };
 7 | 
 8 | // 获取今天时间戳
 9 | Util.getTodayTime = function () {
10 |     const date = new Date();
11 |     date.setHours(0);
12 |     date.setMinutes(0);
13 |     date.setSeconds(0);
14 |     date.setMilliseconds(0);
15 |     return date.getTime();
16 | };
17 | 
18 | // 获取上一天日期
19 | Util.prevDay = function (timestamp = (new Date()).getTime()) {
20 |     const date = new Date(timestamp);
21 |     const year = date.getFullYear();
22 |     const month = date.getMonth() + 1 < 10
23 |         ? '0' + (date.getMonth() + 1)
24 |         : date.getMonth() + 1;
25 |     const day = date.getDate() < 10
26 |         ? '0' + date.getDate()
27 |         : date.getDate();
28 |     return year + '' + month + '' + day;
29 | };
30 | 
31 | // Ajax 通用配置
32 | Util.ajax = axios.create({
33 |     baseURL: Util.apiPath
34 | });
35 | 
36 | // 添加响应拦截器
37 | Util.ajax.interceptors.response.use(res => {
38 |     return res.data;
39 | });
40 | 
41 | export default Util;


--------------------------------------------------------------------------------
/daily/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './app.vue';
 3 | import './style.css';
 4 | 
 5 | new Vue({
 6 |     el: '#app',
 7 |     render: h => {
 8 |         return h(App)
 9 |     }
10 | });


--------------------------------------------------------------------------------
/daily/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "daily",
 3 |   "version": "1.0.0",
 4 |   "description": "daily",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
 9 |     "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel": "^6.23.0",
15 |     "babel-core": "^6.24.0",
16 |     "babel-loader": "^6.4.1",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-es2015": "^6.24.0",
19 |     "babel-runtime": "^6.23.0",
20 |     "css-loader": "^0.27.3",
21 |     "extract-text-webpack-plugin": "^2.1.0",
22 |     "file-loader": "^0.10.1",
23 |     "html-webpack-plugin": "^2.28.0",
24 |     "request": "^2.81.0",
25 |     "style-loader": "^0.16.1",
26 |     "url-loader": "^0.5.8",
27 |     "vue-hot-reload-api": "^2.0.11",
28 |     "vue-loader": "^11.3.4",
29 |     "vue-style-loader": "^2.0.5",
30 |     "vue-template-compiler": "^2.2.6",
31 |     "webpack": "^2.3.2",
32 |     "webpack-dev-server": "^2.4.2",
33 |     "webpack-merge": "^4.1.0"
34 |   },
35 |   "dependencies": {
36 |     "axios": "^0.16.1",
37 |     "vue": "^2.2.6"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/daily/proxy.js:
--------------------------------------------------------------------------------
 1 | const http = require('http');
 2 | const request = require('request');
 3 | 
 4 | const hostname = '127.0.0.1';
 5 | const port = 8010;
 6 | const imgPort = 8011;
 7 | 
 8 | // 创建一个 API 代理服务
 9 | const apiServer = http.createServer((req, res) => {
10 |     const url = 'http://news-at.zhihu.com/api/4' + req.url;
11 |     const options = {
12 |         url: url
13 |     };
14 | 
15 |     function callback (error, response, body) {
16 |         if (!error && response.statusCode === 200) {
17 |             // 设置编码类型，否则中文会显示为乱码
18 |             res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
19 |             // 设置所有域允许跨域
20 |             res.setHeader('Access-Control-Allow-Origin', '*');
21 |             // 返回代理后的内容
22 |             res.end(body);
23 |         }
24 |     }
25 |     request.get(options, callback);
26 | });
27 | // 监听 8010 端口
28 | apiServer.listen(port, hostname, () => {
29 |     console.log(`接口代理运行在 http://${hostname}:${port}/`);
30 | });
31 | // 创建一个图片代理服务
32 | const imgServer = http.createServer((req, res) => {
33 |     const url = req.url.split('/img/')[1];
34 |     const options = {
35 |         url: url,
36 |         encoding: null
37 |     };
38 | 
39 |     function callback (error, response, body) {
40 |         if (!error && response.statusCode === 200) {
41 |             const contentType = response.headers['content-type'];
42 |             res.setHeader('Content-Type', contentType);
43 |             res.setHeader('Access-Control-Allow-Origin', '*');
44 |             res.end(body);
45 |         }
46 |     }
47 |     request.get(options, callback);
48 | });
49 | // 监听 8011 端口
50 | imgServer.listen(imgPort, hostname, () => {
51 |     console.log(`图片代理运行在 http://${hostname}:${imgPort}/`);
52 | });


--------------------------------------------------------------------------------
/daily/style.css:
--------------------------------------------------------------------------------
  1 | html, body{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     height: 100%;
  5 |     color: #657180;
  6 |     font-size: 16px;
  7 | }
  8 | .daily-menu{
  9 |     width: 150px;
 10 |     position: fixed;
 11 |     top: 0;
 12 |     bottom: 0;
 13 |     left: 0;
 14 |     overflow: auto;
 15 |     background: #f5f7f9;
 16 | }
 17 | .daily-menu-item{
 18 |     font-size: 18px;
 19 |     text-align: center;
 20 |     margin: 5px 0;
 21 |     padding: 10px 0;
 22 |     cursor: pointer;
 23 |     border-right: 2px solid transparent;
 24 |     transition: all .3s ease-in-out;
 25 | }
 26 | .daily-menu-item:hover{
 27 |     background: #e3e8ee;
 28 | }
 29 | .daily-menu-item.on{
 30 |     border-right: 2px solid #3399ff;
 31 | }
 32 | 
 33 | .daily-menu ul{
 34 |     list-style: none;
 35 | }
 36 | .daily-menu ul li a{
 37 |     display: block;
 38 |     color: inherit;
 39 |     text-decoration: none;
 40 |     padding: 5px 0;
 41 |     margin: 5px 0;
 42 |     cursor: pointer;
 43 | }
 44 | .daily-menu ul li a:hover, .daily-menu ul li a.on{
 45 |     color: #3399ff;
 46 | }
 47 | 
 48 | .daily-list{
 49 |     width: 300px;
 50 |     position: fixed;
 51 |     top: 0;
 52 |     bottom: 0;
 53 |     left: 150px;
 54 |     overflow: auto;
 55 |     border-right: 1px solid #d7dde4;
 56 | }
 57 | .daily-date{
 58 |     text-align: center;
 59 |     margin: 10px 0;
 60 | }
 61 | .daily-item{
 62 |     display: block;
 63 |     color: inherit;
 64 |     text-decoration: none;
 65 |     padding: 16px;
 66 |     overflow: hidden;
 67 |     cursor: pointer;
 68 |     transition: all .3s ease-in-out;
 69 | }
 70 | .daily-item:hover{
 71 |     background: #e3e8ee;
 72 | }
 73 | .daily-img{
 74 |     width: 80px;
 75 |     height: 80px;
 76 |     float: left;
 77 | }
 78 | .daily-img img{
 79 |     width: 100%;
 80 |     height: 100%;
 81 |     border-radius: 3px;
 82 | }
 83 | .daily-title{
 84 |     padding: 10px 5px 10px 90px;
 85 | }
 86 | .daily-title.noImg{
 87 |     padding-left: 5px;
 88 | }
 89 | .daily-article{
 90 |     margin-left: 450px;
 91 |     padding: 20px;
 92 | }
 93 | .daily-article-title{
 94 |     font-size: 28px;
 95 |     font-weight: bold;
 96 |     color: #222;
 97 |     padding: 10px 0;
 98 | }
 99 | 
100 | .view-more a{
101 |     display: block;
102 |     cursor: pointer;
103 |     background: #f5f7f9;
104 |     text-align: center;
105 |     color: inherit;
106 |     text-decoration: none;
107 |     padding: 4px 0;
108 |     border-radius: 3px;
109 | }
110 | 
111 | .daily-comments{
112 |     margin: 10px 0;
113 | }
114 | .daily-comments span{
115 |     display: block;
116 |     margin: 10px 0;
117 |     font-size: 20px;
118 | }
119 | .daily-comment{
120 |     overflow: hidden;
121 |     margin-bottom: 20px;
122 |     padding-bottom: 20px;
123 |     border-bottom: 1px dashed #e3e8ee;
124 | }
125 | .daily-comment-avatar{
126 |     width: 50px;
127 |     height: 50px;
128 |     float: left;
129 | }
130 | .daily-comment-avatar img{
131 |     width: 100%;
132 |     height: 100%;
133 |     border-radius: 3px;
134 | }
135 | .daily-comment-content{
136 |     margin-left: 65px;
137 | }
138 | .daily-comment-name{
139 | 
140 | }
141 | .daily-comment-time{
142 |     color: #9ea7b4;
143 |     font-size: 14px;
144 |     margin-top: 5px;
145 | }
146 | .daily-comment-text{
147 |     margin-top: 10px;
148 | }


--------------------------------------------------------------------------------
/daily/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | 
 4 | var config = {
 5 |     entry: {
 6 |         main: './main'
 7 |     },
 8 |     output: {
 9 |         path: path.join(__dirname, './dist'),
10 |         publicPath: '/dist/',
11 |         filename: 'main.js'
12 |     },
13 |     module: {
14 |         rules: [
15 |             {
16 |                 test: /\.vue$/,
17 |                 loader: 'vue-loader',
18 |                 options: {
19 |                     loaders: {
20 |                         css: ExtractTextPlugin.extract({
21 |                             use: 'css-loader',
22 |                             fallback: 'vue-style-loader'
23 |                         })
24 |                     }
25 |                 }
26 |             },
27 |             {
28 |                 test: /\.js$/,
29 |                 loader: 'babel-loader',
30 |                 exclude: /node_modules/
31 |             },
32 |             {
33 |                 test: /\.css$/,
34 |                 use: ExtractTextPlugin.extract({
35 |                     use: 'css-loader',
36 |                     fallback: 'style-loader'
37 |                 })
38 |             },
39 |             {
40 |                 test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
41 |                 loader: 'url-loader?limit=1024'
42 |             }
43 |         ]
44 |     },
45 |     plugins: [
46 |         new ExtractTextPlugin({
47 |             filename: '[name].css',
48 |             allChunks: true
49 |         })
50 |     ]
51 | };
52 | 
53 | module.exports = config;


--------------------------------------------------------------------------------
/daily/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | var merge = require('webpack-merge');
 5 | var webpackBaseConfig = require('./webpack.config.js');
 6 | 
 7 | // 清空基本配置的插件列表
 8 | webpackBaseConfig.plugins = [];
 9 | 
10 | module.exports = merge(webpackBaseConfig, {
11 |     output: {
12 |         publicPath: '/dist/',
13 |         // 将入口文件重命名为带有 20 位 hash 值的唯一文件
14 |         filename: '[name].[hash].js'
15 |     },
16 |     plugins: [
17 |         new ExtractTextPlugin({
18 |             // 提取 css，并重命名为带有 20 位 hash 值的唯一文件
19 |             filename: '[name].[hash].css',
20 |             allChunks: true
21 |         }),
22 |         // 定义当前 node 环境为生产环境
23 |         new webpack.DefinePlugin({
24 |             'process.env': {
25 |                 NODE_ENV: '"production"'
26 |             }
27 |         }),
28 |         // 压缩 js
29 |         new webpack.optimize.UglifyJsPlugin({
30 |             compress: {
31 |                 warnings: false
32 |             }
33 |         }),
34 |         // 提取模板，并保存入口 html 文件
35 |         new HtmlWebpackPlugin({
36 |             filename: '../index_prod.html',
37 |             template: './index.ejs',
38 |             inject: false
39 |         })
40 |     ]
41 | });


--------------------------------------------------------------------------------
/demo/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["es2015"],
3 |     "plugins": ["transform-runtime"],
4 |     "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/demo/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <v-title title="Vue组件化"></v-title>
 4 |         <v-button @click="handleClick">点击按钮</v-button>
 5 |         <p>
 6 |             <img src="./images/image.png" style="width: 200px;">
 7 |         </p>
 8 |     </div>
 9 | </template>
10 | <script>
11 |     import vTitle from './title.vue';
12 |     import vButton from './button.vue';
13 | 
14 |     export default {
15 |         components: {
16 |             vTitle,
17 |             vButton
18 |         },
19 |         methods: {
20 |             handleClick (e) {
21 |                 console.log(e);
22 |             }
23 |         }
24 |     }
25 | </script>


--------------------------------------------------------------------------------
/demo/button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <button @click="handleClick" :style="styles">
 3 |         <slot></slot>
 4 |     </button>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         props: {
 9 |             color: {
10 |                 type: String,
11 |                 default: '#00cc66'
12 |             }
13 |         },
14 |         computed: {
15 |             styles () {
16 |                 return {
17 |                     background: this.color
18 |                 }
19 |             }
20 |         },
21 |         methods: {
22 |             handleClick (e) {
23 |                 this.$emit('click', e);
24 |             }
25 |         }
26 |     }
27 | </script>
28 | <style scoped>
29 |     button{
30 |         border: 0;
31 |         outline: none;
32 |         color: #fff;
33 |         padding: 4px 8px;
34 |     }
35 |     button:active{
36 |         position: relative;
37 |         top: 1px;
38 |         left: 1px;
39 |     }
40 | </style>


--------------------------------------------------------------------------------
/demo/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/icarusion/vue-book/cd7e9a5c2c86bd7129c71768cc22f9cfdd4b8d5b/demo/images/image.png


--------------------------------------------------------------------------------
/demo/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" type="text/css" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 |     <div id="app">
10 |         
11 |     </div>
12 |     <script type="text/javascript" src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/demo/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './app.vue';
3 | 
4 | new Vue({
5 |     el: '#app',
6 |     render: h => {
7 |         return h(App)
8 |     }
9 | });


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "dev": "webpack-dev-server --open --config webpack.config.js",
 9 |     "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel": "^6.23.0",
15 |     "babel-core": "^6.24.0",
16 |     "babel-loader": "^6.4.1",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-es2015": "^6.24.0",
19 |     "babel-runtime": "^6.23.0",
20 |     "css-loader": "^0.27.3",
21 |     "extract-text-webpack-plugin": "^2.1.0",
22 |     "file-loader": "^0.10.1",
23 |     "html-webpack-plugin": "^2.28.0",
24 |     "style-loader": "^0.16.1",
25 |     "url-loader": "^0.5.8",
26 |     "vue-hot-reload-api": "^2.0.11",
27 |     "vue-loader": "^11.3.4",
28 |     "vue-style-loader": "^2.0.5",
29 |     "vue-template-compiler": "^2.2.6",
30 |     "webpack": "^2.3.2",
31 |     "webpack-dev-server": "^2.4.2",
32 |     "webpack-merge": "^4.1.0"
33 |   },
34 |   "dependencies": {
35 |     "vue": "^2.2.6"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/demo/style.css:
--------------------------------------------------------------------------------
1 | /* style.css */
2 | #app{
3 |     font-size: 24px;
4 |     color: #f50;
5 | }


--------------------------------------------------------------------------------
/demo/title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <h1>
 3 |         <a :href="'#' + title">{{ title }}</a>
 4 |     </h1>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         props: {
 9 |             title: {
10 |                 type: String
11 |             }
12 |         }
13 |     }
14 | </script>
15 | <style scoped>
16 |     h1 a{
17 |         color: #3399ff;
18 |         font-size: 24px;
19 |     }
20 | </style>


--------------------------------------------------------------------------------
/demo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | 
 4 | var config = {
 5 |     entry: {
 6 |         main: './main'
 7 |     },
 8 |     output: {
 9 |         path: path.join(__dirname, './dist'),
10 |         publicPath: '/dist/',
11 |         filename: 'main.js'
12 |     },
13 |     module: {
14 |         rules: [
15 |             {
16 |                 test: /\.vue$/,
17 |                 loader: 'vue-loader',
18 |                 options: {
19 |                     loaders: {
20 |                         css: ExtractTextPlugin.extract({
21 |                             use: 'css-loader',
22 |                             fallback: 'vue-style-loader'
23 |                         })
24 |                     }
25 |                 }
26 |             },
27 |             {
28 |                 test: /\.js$/,
29 |                 loader: 'babel-loader',
30 |                 exclude: /node_modules/
31 |             },
32 |             {
33 |                 test: /\.css$/,
34 |                 use: ExtractTextPlugin.extract({
35 |                     use: 'css-loader',
36 |                     fallback: 'style-loader'
37 |                 })
38 |             },
39 |             {
40 |                 test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
41 |                 loader: 'url-loader?limit=1024'
42 |             }
43 |         ]
44 |     },
45 |     plugins: [
46 |         new ExtractTextPlugin("main.css")
47 |     ]
48 | };
49 | 
50 | module.exports = config;


--------------------------------------------------------------------------------
/demo/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | var merge = require('webpack-merge');
 5 | var webpackBaseConfig = require('./webpack.config.js');
 6 | 
 7 | // 清空基本配置的插件列表
 8 | webpackBaseConfig.plugins = [];
 9 | 
10 | module.exports = merge(webpackBaseConfig, {
11 |     output: {
12 |         publicPath: '/dist/',
13 |         // 将入口文件重命名为带有 20 位 hash 值的唯一文件
14 |         filename: '[name].[hash].js'
15 |     },
16 |     plugins: [
17 |         new ExtractTextPlugin({
18 |             // 提取 css，并重命名为带有 20 位 hash 值的唯一文件
19 |             filename: '[name].[hash].css',
20 |             allChunks: true
21 |         }),
22 |         // 定义当前 node 环境为生产环境
23 |         new webpack.DefinePlugin({
24 |             'process.env': {
25 |                 NODE_ENV: '"production"'
26 |             }
27 |         }),
28 |         // 压缩 js
29 |         new webpack.optimize.UglifyJsPlugin({
30 |             compress: {
31 |                 warnings: false
32 |             }
33 |         }),
34 |         // 提取模板，并保存入口 html 文件
35 |         new HtmlWebpackPlugin({
36 |             filename: '../index_prod.html',
37 |             template: './index.ejs',
38 |             inject: false
39 |         })
40 |     ]
41 | });


--------------------------------------------------------------------------------
/router/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["es2015"],
3 |     "plugins": ["transform-runtime"],
4 |     "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/router/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <router-view></router-view>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         
 9 |     }
10 | </script>


--------------------------------------------------------------------------------
/router/button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <button @click="handleClick" :style="styles">
 3 |         <slot></slot>
 4 |     </button>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         props: {
 9 |             color: {
10 |                 type: String,
11 |                 default: '#00cc66'
12 |             }
13 |         },
14 |         computed: {
15 |             styles () {
16 |                 return {
17 |                     background: this.color
18 |                 }
19 |             }
20 |         },
21 |         methods: {
22 |             handleClick (e) {
23 |                 this.$emit('click', e);
24 |             }
25 |         }
26 |     }
27 | </script>
28 | <style scoped>
29 |     button{
30 |         border: 0;
31 |         outline: none;
32 |         color: #fff;
33 |         padding: 4px 8px;
34 |     }
35 |     button:active{
36 |         position: relative;
37 |         top: 1px;
38 |         left: 1px;
39 |     }
40 | </style>


--------------------------------------------------------------------------------
/router/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/icarusion/vue-book/cd7e9a5c2c86bd7129c71768cc22f9cfdd4b8d5b/router/images/image.png


--------------------------------------------------------------------------------
/router/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/router/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" type="text/css" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 |     <div id="app">
10 |         
11 |     </div>
12 |     <script type="text/javascript" src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/router/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueRouter from 'vue-router';
 3 | import App from './app.vue';
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | // 路由配置
 8 | const Routers = [
 9 |     {
10 |         path: '/index',
11 |         meta: {
12 |             title: '首页'
13 |         },
14 |         component: (resolve) => require(['./views/index.vue'], resolve)
15 |     },
16 |     {
17 |         path: '/about',
18 |         meta: {
19 |             title: '关于'
20 |         },
21 |         component: (resolve) => require(['./views/about.vue'], resolve)
22 |     },
23 |     {
24 |         path: '/user/:id',
25 |         meta: {
26 |             title: '个人主页'
27 |         },
28 |         component: (resolve) => require(['./views/user.vue'], resolve)
29 |     },
30 |     {
31 |         path: '*',
32 |         redirect: '/index'
33 |     }
34 | ];
35 | const RouterConfig = {
36 |     // 使用 HTML5 的 History 路由模式
37 |     mode: 'history',
38 |     routes: Routers
39 | };
40 | const router = new VueRouter(RouterConfig);
41 | 
42 | router.beforeEach((to, from, next) => {
43 |     window.document.title = to.meta.title;
44 |     next();
45 | });
46 | 
47 | router.afterEach((to, from, next) => {
48 |     window.scrollTo(0, 0);
49 | });
50 | 
51 | new Vue({
52 |     el: '#app',
53 |     router: router,
54 |     render: h => {
55 |         return h(App)
56 |     }
57 | });


--------------------------------------------------------------------------------
/router/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
 9 |     "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel": "^6.23.0",
15 |     "babel-core": "^6.24.0",
16 |     "babel-loader": "^6.4.1",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-es2015": "^6.24.0",
19 |     "babel-runtime": "^6.23.0",
20 |     "css-loader": "^0.27.3",
21 |     "extract-text-webpack-plugin": "^2.1.0",
22 |     "file-loader": "^0.10.1",
23 |     "html-webpack-plugin": "^2.28.0",
24 |     "style-loader": "^0.16.1",
25 |     "url-loader": "^0.5.8",
26 |     "vue-hot-reload-api": "^2.0.11",
27 |     "vue-loader": "^11.3.4",
28 |     "vue-style-loader": "^2.0.5",
29 |     "vue-template-compiler": "^2.2.6",
30 |     "webpack": "^2.3.2",
31 |     "webpack-dev-server": "^2.4.2",
32 |     "webpack-merge": "^4.1.0"
33 |   },
34 |   "dependencies": {
35 |     "vue": "^2.2.6",
36 |     "vue-router": "^2.3.1"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/router/style.css:
--------------------------------------------------------------------------------
1 | /* style.css */
2 | #app{
3 |     font-size: 24px;
4 |     color: #f50;
5 | }


--------------------------------------------------------------------------------
/router/title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <h1>
 3 |         <a :href="'#' + title">{{ title }}</a>
 4 |     </h1>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         props: {
 9 |             title: {
10 |                 type: String
11 |             }
12 |         }
13 |     }
14 | </script>
15 | <style scoped>
16 |     h1 a{
17 |         color: #3399ff;
18 |         font-size: 24px;
19 |     }
20 | </style>


--------------------------------------------------------------------------------
/router/views/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>介绍页</h1>
 4 |         <button @click="handleRouter">跳转到 user</button>
 5 |     </div>
 6 | </template>
 7 | <script>
 8 |     export default {
 9 |         methods: {
10 |             handleRouter () {
11 |                 this.$router.push('/user/123');
12 |             }
13 |         }
14 |     }
15 | </script>


--------------------------------------------------------------------------------
/router/views/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>首页</h1>
 4 |         <router-link to="/about">跳转到 about</router-link>
 5 |     </div>
 6 | </template>
 7 | <script>
 8 |     export default {
 9 | 
10 |     }
11 | </script>


--------------------------------------------------------------------------------
/router/views/user.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>{{ $route.params.id }}</div>
 3 | </template>
 4 | <script>
 5 |     export default {
 6 |         mounted () {
 7 |             console.log(this.$route);
 8 |         }
 9 |     }
10 | </script>


--------------------------------------------------------------------------------
/router/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | 
 4 | var config = {
 5 |     entry: {
 6 |         main: './main'
 7 |     },
 8 |     output: {
 9 |         path: path.join(__dirname, './dist'),
10 |         publicPath: '/dist/',
11 |         filename: 'main.js'
12 |     },
13 |     module: {
14 |         rules: [
15 |             {
16 |                 test: /\.vue$/,
17 |                 loader: 'vue-loader',
18 |                 options: {
19 |                     loaders: {
20 |                         css: ExtractTextPlugin.extract({
21 |                             use: 'css-loader',
22 |                             fallback: 'vue-style-loader'
23 |                         })
24 |                     }
25 |                 }
26 |             },
27 |             {
28 |                 test: /\.js$/,
29 |                 loader: 'babel-loader',
30 |                 exclude: /node_modules/
31 |             },
32 |             {
33 |                 test: /\.css$/,
34 |                 use: ExtractTextPlugin.extract({
35 |                     use: 'css-loader',
36 |                     fallback: 'style-loader'
37 |                 })
38 |             },
39 |             {
40 |                 test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
41 |                 loader: 'url-loader?limit=1024'
42 |             }
43 |         ]
44 |     },
45 |     plugins: [
46 |         new ExtractTextPlugin({
47 |             filename: '[name].css',
48 |             allChunks: true
49 |         })
50 |     ]
51 | };
52 | 
53 | module.exports = config;


--------------------------------------------------------------------------------
/router/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | var merge = require('webpack-merge');
 5 | var webpackBaseConfig = require('./webpack.config.js');
 6 | 
 7 | // 清空基本配置的插件列表
 8 | webpackBaseConfig.plugins = [];
 9 | 
10 | module.exports = merge(webpackBaseConfig, {
11 |     output: {
12 |         publicPath: '/dist/',
13 |         // 将入口文件重命名为带有 20 位 hash 值的唯一文件
14 |         filename: '[name].[hash].js'
15 |     },
16 |     plugins: [
17 |         new ExtractTextPlugin({
18 |             // 提取 css，并重命名为带有 20 位 hash 值的唯一文件
19 |             filename: '[name].[hash].css',
20 |             allChunks: true
21 |         }),
22 |         // 定义当前 node 环境为生产环境
23 |         new webpack.DefinePlugin({
24 |             'process.env': {
25 |                 NODE_ENV: '"production"'
26 |             }
27 |         }),
28 |         // 压缩 js
29 |         new webpack.optimize.UglifyJsPlugin({
30 |             compress: {
31 |                 warnings: false
32 |             }
33 |         }),
34 |         // 提取模板，并保存入口 html 文件
35 |         new HtmlWebpackPlugin({
36 |             filename: '../index_prod.html',
37 |             template: './index.ejs',
38 |             inject: false
39 |         })
40 |     ]
41 | });


--------------------------------------------------------------------------------
/shopping/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["es2015"],
3 |     "plugins": ["transform-runtime"],
4 |     "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/shopping/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="header">
 4 |             <router-link to="/list" class="header-title">电商网站示例</router-link>
 5 |             <div class="header-menu">
 6 |                 <router-link to="/cart" class="header-menu-cart">
 7 |                     购物车
 8 |                     <span v-if="cartList.length">{{ cartList.length }}</span>
 9 |                 </router-link>
10 |             </div>
11 |         </div>
12 |         <router-view></router-view>
13 |     </div>
14 | </template>
15 | <script>
16 |     export default {
17 |         computed: {
18 |             cartList () {
19 |                 return this.$store.state.cartList;
20 |             }
21 |         }
22 |     }
23 | </script>


--------------------------------------------------------------------------------
/shopping/components/product.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="product">
 3 |         <router-link :to="'/product/' + info.id" class="product-main">
 4 |             <img :src="info.image">
 5 |             <h4>{{ info.name }}</h4>
 6 |             <div class="product-color" :style="{ background: colors[info.color]}"></div>
 7 |             <div class="product-cost">¥ {{ info.cost }}</div>
 8 |             <div class="product-add-cart" @click.prevent="handleCart">加入购物车</div>
 9 |         </router-link>
10 |     </div>
11 | </template>
12 | <script>
13 |     export default {
14 |         props: {
15 |             info: Object
16 |         },
17 |         data () {
18 |             return {
19 |                 colors: {
20 |                     '白色': '#ffffff',
21 |                     '金色': '#dac272',
22 |                     '蓝色': '#233472',
23 |                     '红色': '#f2352e'
24 |                 }
25 |             }
26 |         },
27 |         methods: {
28 |             handleCart () {
29 |                 this.$store.commit('addCart', this.info.id);
30 |             }
31 |         }
32 |     };
33 | </script>
34 | <style scoped>
35 |     .product{
36 |         width: 25%;
37 |         float: left;
38 |     }
39 |     .product-main{
40 |         display: block;
41 |         margin: 16px;
42 |         padding: 16px;
43 |         border: 1px solid #dddee1;
44 |         border-radius: 6px;
45 |         overflow: hidden;
46 |         background: #fff;
47 |         text-align: center;
48 |         position: relative;
49 |     }
50 |     .product-main img{
51 |         width: 100%;
52 |     }
53 |     h4{
54 |         color: #222;
55 |         overflow: hidden;
56 |         text-overflow: ellipsis;
57 |         white-space: nowrap;
58 |     }
59 |     .product-main:hover h4{
60 |         color: #0070c9;
61 |     }
62 |     .product-color{
63 |         display: block;
64 |         width: 16px;
65 |         height: 16px;
66 |         border: 1px solid #dddee1;
67 |         border-radius: 50%;
68 |         margin: 6px auto;
69 |     }
70 |     .product-cost{
71 |         color: #de4037;
72 |         margin-top: 6px;
73 |     }
74 |     .product-add-cart{
75 |         display: none;
76 |         padding: 4px 8px;
77 |         background: #2d8cf0;
78 |         color: #fff;
79 |         font-size: 12px;
80 |         border-radius: 3px;
81 |         cursor: pointer;
82 |         position: absolute;
83 |         top: 5px;
84 |         right: 5px;
85 |     }
86 |     .product-main:hover .product-add-cart{
87 |         display: inline-block;
88 |     }
89 | </style>


--------------------------------------------------------------------------------
/shopping/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>电商网站示例</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/shopping/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" type="text/css" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 |     <div id="app">
10 |         
11 |     </div>
12 |     <script type="text/javascript" src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/shopping/main.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue';
  2 | import VueRouter from 'vue-router';
  3 | import Routers from './router';
  4 | import Vuex from 'vuex';
  5 | import App from './app.vue';
  6 | import './style.css';
  7 | 
  8 | import product_data from './product';
  9 | 
 10 | Vue.use(VueRouter);
 11 | Vue.use(Vuex);
 12 | 
 13 | // 路由配置
 14 | const RouterConfig = {
 15 |     // 使用 HTML5 的 History 路由模式
 16 |     mode: 'history',
 17 |     routes: Routers
 18 | };
 19 | const router = new VueRouter(RouterConfig);
 20 | 
 21 | router.beforeEach((to, from, next) => {
 22 |     window.document.title = to.meta.title;
 23 |     next();
 24 | });
 25 | 
 26 | router.afterEach((to, from, next) => {
 27 |     window.scrollTo(0, 0);
 28 | });
 29 | 
 30 | // 数组排重
 31 | function getFilterArray (array) {
 32 |     const res = [];
 33 |     const json = {};
 34 |     for (let i = 0; i < array.length; i++){
 35 |         const _self = array[i];
 36 |         if(!json[_self]){
 37 |             res.push(_self);
 38 |             json[_self] = 1;
 39 |         }
 40 |     }
 41 |     return res;
 42 | }
 43 | 
 44 | const store = new Vuex.Store({
 45 |     state: {
 46 |         productList: [],
 47 |         cartList: []
 48 |     },
 49 |     getters: {
 50 |         brands: state => {
 51 |             const brands = state.productList.map(item => item.brand);
 52 |             return getFilterArray(brands);
 53 |         },
 54 |         colors: state => {
 55 |             const colors = state.productList.map(item => item.color);
 56 |             return getFilterArray(colors);
 57 |         }
 58 |     },
 59 |     mutations: {
 60 |         // 添加商品列表
 61 |         setProductList (state, data) {
 62 |             state.productList = data;
 63 |         },
 64 |         // 添加到购物车
 65 |         addCart (state, id) {
 66 |             // 先判断购物车是否已有，如果有，数量+1
 67 |             const isAdded = state.cartList.find(item => item.id === id);
 68 |             if (isAdded) {
 69 |                 isAdded.count ++;
 70 |             } else {
 71 |                 state.cartList.push({
 72 |                     id: id,
 73 |                     count: 1
 74 |                 })
 75 |             }
 76 |         },
 77 |         // 修改商品数量
 78 |         editCartCount (state, payload) {
 79 |             const product = state.cartList.find(item => item.id === payload.id);
 80 |             product.count += payload.count;
 81 |         },
 82 |         // 删除商品
 83 |         deleteCart (state, id) {
 84 |             const index = state.cartList.findIndex(item => item.id === id);
 85 |             state.cartList.splice(index, 1);
 86 |         },
 87 |         // 清空购物车
 88 |         emptyCart (state) {
 89 |             state.cartList = [];
 90 |         }
 91 |     },
 92 |     actions: {
 93 |         // 请求商品列表
 94 |         getProductList (context) {
 95 |             // 真实环境通过 ajax 获取，这里用异步模拟
 96 |             setTimeout(() => {
 97 |                 context.commit('setProductList', product_data);
 98 |             }, 500);
 99 |         },
100 |         // 购买
101 |         buy (context) {
102 |             // 真实环境应通过 ajax 提交购买请求后再清空购物列表
103 |             return new Promise(resolve=> {
104 |                 setTimeout(() => {
105 |                     context.commit('emptyCart');
106 |                     resolve();
107 |                 }, 500)
108 |             });
109 |         }
110 |     }
111 | });
112 | 
113 | new Vue({
114 |     el: '#app',
115 |     router: router,
116 |     store: store,
117 |     render: h => {
118 |         return h(App)
119 |     }
120 | });


--------------------------------------------------------------------------------
/shopping/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
 9 |     "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel": "^6.23.0",
15 |     "babel-core": "^6.24.0",
16 |     "babel-loader": "^6.4.1",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-es2015": "^6.24.0",
19 |     "babel-runtime": "^6.23.0",
20 |     "css-loader": "^0.27.3",
21 |     "extract-text-webpack-plugin": "^2.1.0",
22 |     "file-loader": "^0.10.1",
23 |     "html-webpack-plugin": "^2.28.0",
24 |     "style-loader": "^0.16.1",
25 |     "url-loader": "^0.5.8",
26 |     "vue-hot-reload-api": "^2.0.11",
27 |     "vue-loader": "^11.3.4",
28 |     "vue-style-loader": "^2.0.5",
29 |     "vue-template-compiler": "^2.2.6",
30 |     "webpack": "^2.3.2",
31 |     "webpack-dev-server": "^2.4.2",
32 |     "webpack-merge": "^4.1.0"
33 |   },
34 |   "dependencies": {
35 |     "vue": "^2.2.6",
36 |     "vue-router": "^2.3.1",
37 |     "vuex": "^2.2.1"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/shopping/product.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |     {
 3 |         id: 1,
 4 |         name: 'AirPods',
 5 |         brand: 'Apple',
 6 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/1.jpeg',
 7 |         sales: 10000,
 8 |         cost: 1288,
 9 |         color: '白色'
10 |     },
11 |     {
12 |         id: 2,
13 |         name: 'BeatsX 入耳式耳机',
14 |         brand: 'Beats',
15 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/2.jpeg',
16 |         sales: 11000,
17 |         cost: 1188,
18 |         color: '白色'
19 |     },
20 |     {
21 |         id: 3,
22 |         name: 'Beats Solo3 Wireless 头戴式式耳机',
23 |         brand: 'Beats',
24 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/3.jpeg',
25 |         sales: 5000,
26 |         cost: 2288,
27 |         color: '金色'
28 |     },
29 |     {
30 |         id: 4,
31 |         name: 'Beats Pill+ 便携式扬声器',
32 |         brand: 'Beats',
33 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/4.jpeg',
34 |         sales: 3000,
35 |         cost: 1888,
36 |         color: '红色'
37 |     },
38 |     {
39 |         id: 5,
40 |         name: 'Sonos PLAY:1 无线扬声器',
41 |         brand: 'Sonos',
42 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/5.jpeg',
43 |         sales: 8000,
44 |         cost: 1578,
45 |         color: '白色'
46 |     },
47 |     {
48 |         id: 6,
49 |         name: 'Powerbeats3 by Dr. Dre Wireless 入耳式耳机',
50 |         brand: 'Beats',
51 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/6.jpeg',
52 |         sales: 12000,
53 |         cost: 1488,
54 |         color: '金色'
55 |     },
56 |     {
57 |         id: 7,
58 |         name: 'Beats EP 头戴式耳机',
59 |         brand: 'Beats',
60 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/7.jpeg',
61 |         sales: 25000,
62 |         cost: 788,
63 |         color: '蓝色'
64 |     },
65 |     {
66 |         id: 8,
67 |         name: 'B&O PLAY BeoPlay A1 便携式蓝牙扬声器',
68 |         brand: 'B&O',
69 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/8.jpeg',
70 |         sales: 15000,
71 |         cost: 1898,
72 |         color: '金色'
73 |     },
74 |     {
75 |         id: 9,
76 |         name: 'Bose® QuietComfort® 35 无线耳机',
77 |         brand: 'Bose',
78 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/9.jpeg',
79 |         sales: 14000,
80 |         cost: 2878,
81 |         color: '蓝色'
82 |     },
83 |     {
84 |         id: 10,
85 |         name: 'B&O PLAY Beoplay H4 无线头戴式耳机',
86 |         brand: 'B&O',
87 |         image: 'http://ordfm6aah.bkt.clouddn.com/shop/10.jpeg',
88 |         sales: 9000,
89 |         cost: 2298,
90 |         color: '金色'
91 |     }
92 | ]


--------------------------------------------------------------------------------
/shopping/router.js:
--------------------------------------------------------------------------------
 1 | const routers = [
 2 |     {
 3 |         path: '/list',
 4 |         meta: {
 5 |             title: '商品列表'
 6 |         },
 7 |         component: (resolve) => require(['./views/list.vue'], resolve)
 8 |     },
 9 |     {
10 |         path: '/product/:id',
11 |         meta: {
12 |             title: '商品详情'
13 |         },
14 |         component: (resolve) => require(['./views/product.vue'], resolve)
15 |     },
16 |     {
17 |         path: '/cart',
18 |         meta: {
19 |             title: '购物车'
20 |         },
21 |         component: (resolve) => require(['./views/cart.vue'], resolve)
22 |     },
23 |     {
24 |         path: '*',
25 |         redirect: '/list'
26 |     }
27 | ];
28 | export default routers;


--------------------------------------------------------------------------------
/shopping/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | a{
 6 |     text-decoration: none;
 7 | }
 8 | body{
 9 |     background: #f8f8f9;
10 | }
11 | .header{
12 |     height: 48px;
13 |     line-height: 48px;
14 |     background: rgba(0,0,0,.8);
15 |     color: #fff;
16 | }
17 | .header-title{
18 |     padding: 0 32px;
19 |     float: left;
20 |     color: #fff;
21 | }
22 | .header-menu{
23 |     float: right;
24 |     margin-right: 32px;
25 | }
26 | .header-menu-cart{
27 |     color: #fff;
28 | }
29 | .header-menu-cart span{
30 |     display: inline-block;
31 |     width: 16px;
32 |     height: 16px;
33 |     line-height: 16px;
34 |     text-align: center;
35 |     border-radius: 50%;
36 |     background: #ff5500;
37 |     color: #fff;
38 |     font-size: 12px;
39 | }


--------------------------------------------------------------------------------
/shopping/views/cart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="cart">
  3 |         <div class="cart-header">
  4 |             <div class="cart-header-title">购物清单</div>
  5 |             <div class="cart-header-main">
  6 |                 <div class="cart-info">商品信息</div>
  7 |                 <div class="cart-price">单价</div>
  8 |                 <div class="cart-count">数量</div>
  9 |                 <div class="cart-cost">小计</div>
 10 |                 <div class="cart-delete">删除</div>
 11 |             </div>
 12 |         </div>
 13 |         <div class="cart-content">
 14 |             <div class="cart-content-main" v-for="(item, index) in cartList">
 15 |                 <div class="cart-info">
 16 |                     <img :src="productDictList[item.id].image">
 17 |                     <span>{{ productDictList[item.id].name }}</span>
 18 |                 </div>
 19 |                 <div class="cart-price">¥ {{ productDictList[item.id].cost }}</div>
 20 |                 <div class="cart-count">
 21 |                     <span class="cart-control-minus" @click="handleCount(index, -1)">-</span>
 22 |                     {{ item.count }}
 23 |                     <span class="cart-control-add" @click="handleCount(index, 1)">+</span>
 24 |                 </div>
 25 |                 <div class="cart-cost">¥ {{ productDictList[item.id].cost * item.count }}</div>
 26 |                 <div class="cart-delete">
 27 |                     <span class="cart-control-delete" @click="handleDelete(index)">删除</span>
 28 |                 </div>
 29 |             </div>
 30 |             <div class="cart-empty" v-if="!cartList.length">购物车为空</div>
 31 |         </div>
 32 |         <div class="cart-promotion" v-show="cartList.length">
 33 |             <span>使用优惠码：</span>
 34 |             <input type="text" v-model="promotionCode">
 35 |             <span class="cart-control-promotion" @click="handleCheckCode">验证</span>
 36 |         </div>
 37 |         <div class="cart-footer" v-show="cartList.length">
 38 |             <div class="cart-footer-desc">
 39 |                 共计 <span>{{ countAll }}</span> 件商品
 40 |             </div>
 41 |             <div class="cart-footer-desc">
 42 |                 应付总额 <span>¥ {{ costAll - promotion }}</span>
 43 |                 <br>
 44 |                 <template v-if="promotion">
 45 |                     （优惠 <span>¥ {{ promotion }}</span>）
 46 |                 </template>
 47 |             </div>
 48 |             <div class="cart-footer-desc">
 49 |                 <div class="cart-control-order" @click="handleOrder">现在结算</div>
 50 |             </div>
 51 |         </div>
 52 |     </div>
 53 | </template>
 54 | <script>
 55 |     import product_data from '../product.js';
 56 |     export default {
 57 |         computed: {
 58 |             cartList () {
 59 |                 return this.$store.state.cartList;
 60 |             },
 61 |             productDictList () {
 62 |                 const dict = {};
 63 |                 this.productList.forEach(item => {
 64 |                     dict[item.id] = item;
 65 |                 });
 66 |                 return dict;
 67 |             },
 68 |             countAll () {
 69 |                 let count = 0;
 70 |                 this.cartList.forEach(item => {
 71 |                     count += item.count;
 72 |                 });
 73 |                 return count;
 74 |             },
 75 |             costAll () {
 76 |                 let cost = 0;
 77 |                 this.cartList.forEach(item => {
 78 |                     cost += this.productDictList[item.id].cost * item.count;
 79 |                 });
 80 |                 return cost;
 81 |             }
 82 |         },
 83 |         data () {
 84 |             return {
 85 |                 productList: product_data,
 86 |                 promotionCode: '',
 87 |                 promotion: 0
 88 |             }
 89 |         },
 90 |         methods: {
 91 |             handleCount (index, count) {
 92 |                 if (count < 0 && this.cartList[index].count === 1) return;
 93 |                 this.$store.commit('editCartCount', {
 94 |                     id: this.cartList[index].id,
 95 |                     count: count
 96 |                 });
 97 |             },
 98 |             handleDelete (index) {
 99 |                 this.$store.commit('deleteCart', this.cartList[index].id);
100 |             },
101 |             handleCheckCode () {
102 |                 if (this.promotionCode === '') {
103 |                     window.alert('请输入优惠码');
104 |                     return;
105 |                 }
106 |                 if (this.promotionCode !== 'Vue.js') {
107 |                     window.alert('优惠码验证失败');
108 |                 } else {
109 |                     this.promotion = 500;
110 |                 }
111 |             },
112 |             handleOrder () {
113 |                 this.$store.dispatch('buy').then(() => {
114 |                     window.alert('购买成功');
115 |                 })
116 |             }
117 |         }
118 |     }
119 | </script>
120 | <style scoped>
121 |     .cart{
122 |         margin: 32px;
123 |         background: #fff;
124 |         border: 1px solid #dddee1;
125 |         border-radius: 10px;
126 |     }
127 |     .cart-header-title{
128 |         padding: 16px 32px;
129 |         border-bottom: 1px solid #dddee1;
130 |         border-radius: 10px 10px 0 0;
131 |         background: #f8f8f9;
132 |     }
133 |     .cart-header-main{
134 |         padding: 8px 32px;
135 |         overflow: hidden;
136 |         border-bottom: 1px solid #dddee1;
137 |         background: #eee;
138 |         overflow: hidden;
139 |     }
140 |     .cart-empty{
141 |         text-align: center;
142 |         padding: 32px;
143 |     }
144 |     .cart-header-main div{
145 |         text-align: center;
146 |         float: left;
147 |         font-size: 14px;
148 |     }
149 |     div.cart-info{
150 |         width: 60%;
151 |         text-align: left;
152 |     }
153 |     .cart-price{
154 |         width: 10%;
155 |     }
156 |     .cart-count{
157 |         width: 10%;
158 |     }
159 |     .cart-cost{
160 |         width: 10%;
161 |     }
162 |     .cart-delete {
163 |         width: 10%;
164 |     }
165 |     .cart-content-main{
166 |         padding: 0 32px;
167 |         height: 60px;
168 |         line-height: 60px;
169 |         text-align: center;
170 |         border-bottom: 1px dashed #e9eaec;
171 |         overflow: hidden;
172 |     }
173 |     .cart-content-main div{
174 |         float: left;
175 |     }
176 |     .cart-content-main img{
177 |         width: 40px;
178 |         height: 40px;
179 |         position: relative;
180 |         top: 10px;
181 |     }
182 |     .cart-control-minus,
183 |     .cart-control-add{
184 |         display: inline-block;
185 |         margin: 0 4px;
186 |         width: 24px;
187 |         height: 24px;
188 |         line-height: 22px;
189 |         text-align: center;
190 |         background: #f8f8f9;
191 |         border-radius: 50%;
192 |         box-shadow: 0 1px 1px rgba(0,0,0,.2);
193 |         cursor: pointer;
194 |     }
195 |     .cart-control-delete{
196 |         cursor: pointer;
197 |         color: #2d8cf0;
198 |     }
199 |     .cart-promotion{
200 |         padding: 16px 32px;
201 |     }
202 |     .cart-control-promotion,
203 |     .cart-control-order{
204 |         display: inline-block;
205 |         padding: 8px 32px;
206 |         border-radius: 6px;
207 |         background: #2d8cf0;
208 |         color: #fff;
209 |         cursor: pointer;
210 |     }
211 |     .cart-control-promotion{
212 |         padding: 2px 6px;
213 |         font-size: 12px;
214 |         border-radius: 3px;
215 |     }
216 |     .cart-footer{
217 |         padding: 32px;
218 |         text-align: right;
219 |     }
220 |     .cart-footer-desc{
221 |         display: inline-block;
222 |         padding: 0 16px;
223 |     }
224 |     .cart-footer-desc span{
225 |         color: #f2352e;
226 |         font-size: 20px;
227 |     }
228 | </style>


--------------------------------------------------------------------------------
/shopping/views/list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-show="list.length">
  3 |         <div class="list-control">
  4 |             <div class="list-control-filter">
  5 |                 <span>品牌：</span>
  6 |                 <span
  7 |                     class="list-control-filter-item"
  8 |                     :class="{on: item === filterBrand}"
  9 |                     v-for="item in brands"
 10 |                     @click="handleFilterBrand(item)">{{ item }}</span>
 11 |             </div>
 12 |             <div class="list-control-filter">
 13 |                 <span>颜色：</span>
 14 |                 <span
 15 |                     class="list-control-filter-item"
 16 |                     :class="{on: item === filterColor}"
 17 |                     v-for="item in colors"
 18 |                     @click="handleFilterColor(item)">{{ item }}</span>
 19 |             </div>
 20 |             <div class="list-control-order">
 21 |                 <span>排序：</span>
 22 |                 <span
 23 |                     class="list-control-order-item"
 24 |                     :class="{on: order === ''}"
 25 |                     @click="handleOrderDefault">默认</span>
 26 |                 <span
 27 |                     class="list-control-order-item"
 28 |                     :class="{on: order === 'sales'}"
 29 |                     @click="handleOrderSales">
 30 |                     销量
 31 |                     <template v-if="order === 'sales'">↓</template>
 32 |                 </span>
 33 |                 <span
 34 |                     class="list-control-order-item"
 35 |                     :class="{on: order.indexOf('cost') > -1}"
 36 |                     @click="handleOrderCost">
 37 |                     价格
 38 |                     <template v-if="order === 'cost-asc'">↑</template>
 39 |                     <template v-if="order === 'cost-desc'">↓</template>
 40 |                 </span>
 41 |             </div>
 42 |         </div>
 43 |         <Product v-for="item in filteredAndOrderedList" :info="item" :key="item.id"></Product>
 44 |         <div class="product-not-found" v-show="!filteredAndOrderedList.length">暂无相关商品</div>
 45 |     </div>
 46 | </template>
 47 | <script>
 48 |     import Product from '../components/product.vue';
 49 |     export default {
 50 |         components: { Product },
 51 |         computed: {
 52 |             list () {
 53 |                 return this.$store.state.productList;
 54 |             },
 55 |             brands () {
 56 |                 return this.$store.getters.brands;
 57 |             },
 58 |             colors () {
 59 |                 return this.$store.getters.colors;
 60 |             },
 61 |             filteredAndOrderedList () {
 62 |                 let list = [...this.list];
 63 |                 // 按品牌过滤
 64 |                 if (this.filterBrand !== '') {
 65 |                     list = list.filter(item => item.brand === this.filterBrand);
 66 |                 }
 67 |                 // 按颜色过滤
 68 |                 if (this.filterColor !== '') {
 69 |                     list = list.filter(item => item.color === this.filterColor);
 70 |                 }
 71 |                 // 排序
 72 |                 if (this.order !== '') {
 73 |                     if (this.order === 'sales') {
 74 |                         list = list.sort((a, b) => b.sales - a.sales);
 75 |                     } else if (this.order === 'cost-desc') {
 76 |                         list = list.sort((a, b) => b.cost - a.cost);
 77 |                     } else if (this.order === 'cost-asc') {
 78 |                         list = list.sort((a, b) => a.cost - b.cost);
 79 |                     }
 80 |                 }
 81 |                 return list;
 82 |             }
 83 |         },
 84 |         data () {
 85 |             return {
 86 |                 filterBrand: '',
 87 |                 filterColor: '',
 88 |                 order: ''
 89 |             }
 90 |         },
 91 |         methods: {
 92 |             handleFilterBrand (brand) {
 93 |                 if (this.filterBrand === brand) {
 94 |                     this.filterBrand = '';
 95 |                 } else {
 96 |                     this.filterBrand = brand;
 97 |                 }
 98 |             },
 99 |             handleFilterColor (color) {
100 |                 if (this.filterColor === color) {
101 |                     this.filterColor = '';
102 |                 } else {
103 |                     this.filterColor = color;
104 |                 }
105 |             },
106 |             handleOrderDefault () {
107 |                 this.order = '';
108 |             },
109 |             handleOrderSales () {
110 |                 this.order = 'sales';
111 |             },
112 |             handleOrderCost () {
113 |                 if (this.order === 'cost-desc') {
114 |                     this.order = 'cost-asc';
115 |                 } else {
116 |                     this.order = 'cost-desc';
117 |                 }
118 |             }
119 |         },
120 |         mounted () {
121 |             this.$store.dispatch('getProductList');
122 |         }
123 |     }
124 | </script>
125 | <style scoped>
126 |     .list-control{
127 |         background: #fff;
128 |         border-radius: 6px;
129 |         margin: 16px;
130 |         padding: 16px;
131 |         box-shadow: 0 1px 1px rgba(0,0,0,.2);
132 |     }
133 |     .list-control-filter{
134 |         margin-bottom: 16px;
135 |     }
136 |     .list-control-filter-item,
137 |     .list-control-order-item {
138 |         cursor: pointer;
139 |         display: inline-block;
140 |         border: 1px solid #e9eaec;
141 |         border-radius: 4px;
142 |         margin-right: 6px;
143 |         padding: 2px 6px;
144 |     }
145 |     .list-control-filter-item.on,
146 |     .list-control-order-item.on{
147 |         background: #f2352e;
148 |         border: 1px solid #f2352e;
149 |         color: #fff;
150 |     }
151 |     .product-not-found{
152 |         text-align: center;
153 |         padding: 32px;
154 |     }
155 | </style>


--------------------------------------------------------------------------------
/shopping/views/product.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-if="product">
 3 |         <div class="product">
 4 |             <div class="product-image">
 5 |                 <img :src="product.image">
 6 |             </div>
 7 |             <div class="product-info">
 8 |                 <h1 class="product-name">{{ product.name }}</h1>
 9 |                 <div class="product-cost">¥ {{ product.cost }}</div>
10 |                 <div class="product-add-cart" @click="handleAddToCart">加入购物车</div>
11 |             </div>
12 |         </div>
13 |         <div class="product-desc">
14 |             <h2>产品介绍</h2>
15 |             <img v-for="n in 10" :src="'http://ordfm6aah.bkt.clouddn.com/shop/' + n + '.jpeg'">
16 |         </div>
17 |     </div>
18 | </template>
19 | <script>
20 |     import product_data from '../product.js';
21 |     export default {
22 |         data () {
23 |             return {
24 |                 // 获取路由中的参数
25 |                 id: parseInt(this.$route.params.id),
26 |                 product: null
27 |             }
28 |         },
29 |         methods: {
30 |             getProduct () {
31 |                 // 真实环境通过 ajax 获取，这里用异步模拟
32 |                 setTimeout(() => {
33 |                     this.product = product_data.find(item => item.id === this.id);
34 |                 }, 500);
35 |             },
36 |             // 加入购物车
37 |             handleAddToCart () {
38 |                 this.$store.commit('addCart', this.id);
39 |             }
40 |         },
41 |         mounted () {
42 |             this.getProduct();
43 |         }
44 |     }
45 | </script>
46 | <style scoped>
47 |     .product{
48 |         margin: 32px;
49 |         padding: 32px;
50 |         background: #fff;
51 |         border: 1px solid #dddee1;
52 |         border-radius: 10px;
53 |         overflow: hidden;
54 |     }
55 |     .product-image{
56 |         width: 50%;
57 |         height: 550px;
58 |         float: left;
59 |         text-align: center;
60 |     }
61 |     .product-image img{
62 |         height: 100%;
63 |     }
64 |     .product-info{
65 |         width: 50%;
66 |         padding: 150px 0 250px;
67 |         height: 150px;
68 |         float: left;
69 |         text-align: center;
70 |     }
71 |     .product-cost{
72 |         color: #f2352e;
73 |         margin: 8px 0;
74 |     }
75 |     .product-add-cart{
76 |         display: inline-block;
77 |         padding: 8px 64px;
78 |         margin: 8px 0;
79 |         background: #2d8cf0;
80 |         color: #fff;
81 |         border-radius: 4px;
82 |         cursor: pointer;
83 |     }
84 |     .product-desc{
85 |         background: #fff;
86 |         margin: 32px;
87 |         padding: 32px;
88 |         border: 1px solid #dddee1;
89 |         border-radius: 10px;
90 |         text-align: center;
91 |     }
92 |     .product-desc img{
93 |         display: block;
94 |         width: 50%;
95 |         margin: 32px auto;
96 |         padding: 32px;
97 |         border-bottom: 1px solid #dddee1;
98 |     }
99 | </style>


--------------------------------------------------------------------------------
/shopping/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | 
 4 | var config = {
 5 |     entry: {
 6 |         main: './main'
 7 |     },
 8 |     output: {
 9 |         path: path.join(__dirname, './dist'),
10 |         publicPath: '/dist/',
11 |         filename: 'main.js'
12 |     },
13 |     module: {
14 |         rules: [
15 |             {
16 |                 test: /\.vue$/,
17 |                 loader: 'vue-loader',
18 |                 options: {
19 |                     loaders: {
20 |                         css: ExtractTextPlugin.extract({
21 |                             use: 'css-loader',
22 |                             fallback: 'vue-style-loader'
23 |                         })
24 |                     }
25 |                 }
26 |             },
27 |             {
28 |                 test: /\.js$/,
29 |                 loader: 'babel-loader',
30 |                 exclude: /node_modules/
31 |             },
32 |             {
33 |                 test: /\.css$/,
34 |                 use: ExtractTextPlugin.extract({
35 |                     use: 'css-loader',
36 |                     fallback: 'style-loader'
37 |                 })
38 |             },
39 |             {
40 |                 test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
41 |                 loader: 'url-loader?limit=1024'
42 |             }
43 |         ]
44 |     },
45 |     plugins: [
46 |         new ExtractTextPlugin({
47 |             filename: '[name].css',
48 |             allChunks: true
49 |         })
50 |     ]
51 | };
52 | 
53 | module.exports = config;


--------------------------------------------------------------------------------
/shopping/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | var merge = require('webpack-merge');
 5 | var webpackBaseConfig = require('./webpack.config.js');
 6 | 
 7 | // 清空基本配置的插件列表
 8 | webpackBaseConfig.plugins = [];
 9 | 
10 | module.exports = merge(webpackBaseConfig, {
11 |     output: {
12 |         publicPath: '/dist/',
13 |         // 将入口文件重命名为带有 20 位 hash 值的唯一文件
14 |         filename: '[name].[hash].js'
15 |     },
16 |     plugins: [
17 |         new ExtractTextPlugin({
18 |             // 提取 css，并重命名为带有 20 位 hash 值的唯一文件
19 |             filename: '[name].[hash].css',
20 |             allChunks: true
21 |         }),
22 |         // 定义当前 node 环境为生产环境
23 |         new webpack.DefinePlugin({
24 |             'process.env': {
25 |                 NODE_ENV: '"production"'
26 |             }
27 |         }),
28 |         // 压缩 js
29 |         new webpack.optimize.UglifyJsPlugin({
30 |             compress: {
31 |                 warnings: false
32 |             }
33 |         }),
34 |         // 提取模板，并保存入口 html 文件
35 |         new HtmlWebpackPlugin({
36 |             filename: '../index_prod.html',
37 |             template: './index.ejs',
38 |             inject: false
39 |         })
40 |     ]
41 | });


--------------------------------------------------------------------------------
/vue-bus/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["es2015"],
3 |     "plugins": ["transform-runtime"],
4 |     "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/vue-bus/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <router-view></router-view>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         
 9 |     }
10 | </script>


--------------------------------------------------------------------------------
/vue-bus/button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <button @click="handleClick" :style="styles">
 3 |         <slot></slot>
 4 |     </button>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         props: {
 9 |             color: {
10 |                 type: String,
11 |                 default: '#00cc66'
12 |             }
13 |         },
14 |         computed: {
15 |             styles () {
16 |                 return {
17 |                     background: this.color
18 |                 }
19 |             }
20 |         },
21 |         methods: {
22 |             handleClick (e) {
23 |                 this.$emit('click', e);
24 |             }
25 |         }
26 |     }
27 | </script>
28 | <style scoped>
29 |     button{
30 |         border: 0;
31 |         outline: none;
32 |         color: #fff;
33 |         padding: 4px 8px;
34 |     }
35 |     button:active{
36 |         position: relative;
37 |         top: 1px;
38 |         left: 1px;
39 |     }
40 | </style>


--------------------------------------------------------------------------------
/vue-bus/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/icarusion/vue-book/cd7e9a5c2c86bd7129c71768cc22f9cfdd4b8d5b/vue-bus/images/image.png


--------------------------------------------------------------------------------
/vue-bus/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/vue-bus/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" type="text/css" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 |     <div id="app">
10 |         
11 |     </div>
12 |     <script type="text/javascript" src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/vue-bus/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueRouter from 'vue-router';
 3 | import Vuex from 'vuex';
 4 | import VueBus from './vue-bus';
 5 | import App from './app.vue';
 6 | 
 7 | Vue.use(VueRouter);
 8 | Vue.use(Vuex);
 9 | Vue.use(VueBus);
10 | 
11 | // 路由配置
12 | const Routers = [
13 |     {
14 |         path: '/index',
15 |         meta: {
16 |             title: '首页'
17 |         },
18 |         component: (resolve) => require(['./views/index.vue'], resolve)
19 |     },
20 |     {
21 |         path: '/about',
22 |         meta: {
23 |             title: '关于'
24 |         },
25 |         component: (resolve) => require(['./views/about.vue'], resolve)
26 |     },
27 |     {
28 |         path: '/user/:id',
29 |         meta: {
30 |             title: '个人主页'
31 |         },
32 |         component: (resolve) => require(['./views/user.vue'], resolve)
33 |     },
34 |     {
35 |         path: '*',
36 |         redirect: '/index'
37 |     }
38 | ];
39 | const RouterConfig = {
40 |     // 使用 HTML5 的 History 路由模式
41 |     mode: 'history',
42 |     routes: Routers
43 | };
44 | const router = new VueRouter(RouterConfig);
45 | 
46 | router.beforeEach((to, from, next) => {
47 |     window.document.title = to.meta.title;
48 |     next();
49 | });
50 | 
51 | router.afterEach((to, from, next) => {
52 |     window.scrollTo(0, 0);
53 | });
54 | 
55 | const store = new Vuex.Store({
56 |     state: {
57 |         count: 0,
58 |         list: [1, 5, 8, 10, 30, 50]
59 |     },
60 |     getters: {
61 |         filteredList: state => {
62 |             return state.list.filter(item => item < 10);
63 |         },
64 |         listCount: (state, getters) => {
65 |             return getters.filteredList.length;
66 |         }
67 |     },
68 |     mutations: {
69 |         increment (state, n = 1) {
70 |             state.count += n;
71 |         },
72 |         decrease (state) {
73 |             state.count --;
74 |         }
75 |     },
76 |     actions: {
77 |         increment (context) {
78 |             context.commit('increment');
79 |         },
80 |         asyncIncrement (context) {
81 |             return new Promise(resolve => {
82 |                 setTimeout(() => {
83 |                     context.commit('increment');
84 |                     resolve();
85 |                 }, 1000)
86 |             });
87 |         }
88 |     }
89 | });
90 | 
91 | new Vue({
92 |     el: '#app',
93 |     router: router,
94 |     store: store,
95 |     render: h => {
96 |         return h(App)
97 |     }
98 | });


--------------------------------------------------------------------------------
/vue-bus/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
 9 |     "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel": "^6.23.0",
15 |     "babel-core": "^6.24.0",
16 |     "babel-loader": "^6.4.1",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-es2015": "^6.24.0",
19 |     "babel-runtime": "^6.23.0",
20 |     "css-loader": "^0.27.3",
21 |     "extract-text-webpack-plugin": "^2.1.0",
22 |     "file-loader": "^0.10.1",
23 |     "html-webpack-plugin": "^2.28.0",
24 |     "style-loader": "^0.16.1",
25 |     "url-loader": "^0.5.8",
26 |     "vue-hot-reload-api": "^2.0.11",
27 |     "vue-loader": "^11.3.4",
28 |     "vue-style-loader": "^2.0.5",
29 |     "vue-template-compiler": "^2.2.6",
30 |     "webpack": "^2.3.2",
31 |     "webpack-dev-server": "^2.4.2",
32 |     "webpack-merge": "^4.1.0"
33 |   },
34 |   "dependencies": {
35 |     "vue": "^2.2.6",
36 |     "vue-router": "^2.3.1",
37 |     "vuex": "^2.2.1"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/vue-bus/style.css:
--------------------------------------------------------------------------------
1 | /* style.css */
2 | #app{
3 |     font-size: 24px;
4 |     color: #f50;
5 | }


--------------------------------------------------------------------------------
/vue-bus/title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <h1>
 3 |         <a :href="'#' + title">{{ title }}</a>
 4 |     </h1>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         props: {
 9 |             title: {
10 |                 type: String
11 |             }
12 |         }
13 |     }
14 | </script>
15 | <style scoped>
16 |     h1 a{
17 |         color: #3399ff;
18 |         font-size: 24px;
19 |     }
20 | </style>


--------------------------------------------------------------------------------
/vue-bus/views/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>介绍页</h1>
 4 |         <button @click="handleRouter">跳转到 user</button>
 5 |     </div>
 6 | </template>
 7 | <script>
 8 |     export default {
 9 |         methods: {
10 |             handleRouter () {
11 |                 this.$router.push('/user/123');
12 |             }
13 |         }
14 |     }
15 | </script>


--------------------------------------------------------------------------------
/vue-bus/views/counter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         {{ number }}
 4 |         <button @click="handleAddRandom">随机增加</button>
 5 |     </div>
 6 | </template>
 7 | <script>
 8 |     export default {
 9 |         props: {
10 |             number: {
11 |                 type: Number
12 |             }
13 |         },
14 |         methods: {
15 |             handleAddRandom () {
16 |                 // 随机获取 1-100 中的数
17 |                 const num = Math.floor(Math.random () * 100 + 1);
18 |                 this.$bus.emit('add', num);
19 |             }
20 |         }
21 |     };
22 | </script>


--------------------------------------------------------------------------------
/vue-bus/views/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>首页</h1>
 4 |         {{ count }}
 5 |         <button @click="handleIncrement">+1</button>
 6 |         <button @click="handleDecrease">-1</button>
 7 |         <button @click="handleIncrementMore">+5</button>
 8 |         <div>{{ list }}</div>
 9 |         <div>{{ listCount }}</div>
10 |         <button @click="handleActionIncrement">action +1</button>
11 |         <button @click="handleAsyncIncrement">async +1</button>
12 |         随机增加：
13 |         <Counter :number="number"></Counter>
14 |     </div>
15 | </template>
16 | <script>
17 |     import Counter from './counter.vue';
18 | 
19 |     export default {
20 |         components: {
21 |             Counter
22 |         },
23 |         computed: {
24 |             count () {
25 |                 return this.$store.state.count;
26 |             },
27 |             list () {
28 |                 return this.$store.getters.filteredList;
29 |             },
30 |             listCount () {
31 |                 return this.$store.getters.listCount;
32 |             }
33 |         },
34 |         methods: {
35 |             handleIncrement () {
36 |                 this.$store.commit('increment');
37 |             },
38 |             handleDecrease () {
39 |                 this.$store.commit('decrease');
40 |             },
41 |             handleIncrementMore () {
42 |                 this.$store.commit('increment', 5);
43 |             },
44 |             handleActionIncrement () {
45 |                 this.$store.dispatch('increment')
46 |             },
47 |             handleAsyncIncrement () {
48 |                 this.$store.dispatch('asyncIncrement').then(() => {
49 |                     console.log(this.$store.state.count);
50 |                 });
51 |             },
52 |             handleAddRandom (num) {
53 |                 this.number += num;
54 |             }
55 |         },
56 |         data () {
57 |             return {
58 |                 number: 0
59 |             }
60 |         },
61 |         created () {
62 |             this.$bus.on('add', this.handleAddRandom);
63 |         },
64 |         beforeDestroy () {
65 |             this.$bus.off('add', this.handleAddRandom);
66 |         }
67 |     }
68 | </script>


--------------------------------------------------------------------------------
/vue-bus/views/user.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>{{ $route.params.id }}</div>
 3 | </template>
 4 | <script>
 5 |     export default {
 6 |         mounted () {
 7 |             console.log(this.$route);
 8 |         }
 9 |     }
10 | </script>


--------------------------------------------------------------------------------
/vue-bus/vue-bus.js:
--------------------------------------------------------------------------------
 1 | const install = function (Vue) {
 2 |     const Bus = new Vue({
 3 |         methods: {
 4 |             emit (event, ...args) {
 5 |                 this.$emit(event, ...args);
 6 |             },
 7 |             on (event, callback) {
 8 |                 this.$on(event, callback);
 9 |             },
10 |             off (event, callback) {
11 |                 this.$off(event, callback);
12 |             }
13 |         }
14 |     });
15 |     Vue.prototype.$bus = Bus;
16 | };
17 | 
18 | export default install;


--------------------------------------------------------------------------------
/vue-bus/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | 
 4 | var config = {
 5 |     entry: {
 6 |         main: './main'
 7 |     },
 8 |     output: {
 9 |         path: path.join(__dirname, './dist'),
10 |         publicPath: '/dist/',
11 |         filename: 'main.js'
12 |     },
13 |     module: {
14 |         rules: [
15 |             {
16 |                 test: /\.vue$/,
17 |                 loader: 'vue-loader',
18 |                 options: {
19 |                     loaders: {
20 |                         css: ExtractTextPlugin.extract({
21 |                             use: 'css-loader',
22 |                             fallback: 'vue-style-loader'
23 |                         })
24 |                     }
25 |                 }
26 |             },
27 |             {
28 |                 test: /\.js$/,
29 |                 loader: 'babel-loader',
30 |                 exclude: /node_modules/
31 |             },
32 |             {
33 |                 test: /\.css$/,
34 |                 use: ExtractTextPlugin.extract({
35 |                     use: 'css-loader',
36 |                     fallback: 'style-loader'
37 |                 })
38 |             },
39 |             {
40 |                 test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
41 |                 loader: 'url-loader?limit=1024'
42 |             }
43 |         ]
44 |     },
45 |     plugins: [
46 |         new ExtractTextPlugin({
47 |             filename: '[name].css',
48 |             allChunks: true
49 |         })
50 |     ]
51 | };
52 | 
53 | module.exports = config;


--------------------------------------------------------------------------------
/vue-bus/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | var merge = require('webpack-merge');
 5 | var webpackBaseConfig = require('./webpack.config.js');
 6 | 
 7 | // 清空基本配置的插件列表
 8 | webpackBaseConfig.plugins = [];
 9 | 
10 | module.exports = merge(webpackBaseConfig, {
11 |     output: {
12 |         publicPath: '/dist/',
13 |         // 将入口文件重命名为带有 20 位 hash 值的唯一文件
14 |         filename: '[name].[hash].js'
15 |     },
16 |     plugins: [
17 |         new ExtractTextPlugin({
18 |             // 提取 css，并重命名为带有 20 位 hash 值的唯一文件
19 |             filename: '[name].[hash].css',
20 |             allChunks: true
21 |         }),
22 |         // 定义当前 node 环境为生产环境
23 |         new webpack.DefinePlugin({
24 |             'process.env': {
25 |                 NODE_ENV: '"production"'
26 |             }
27 |         }),
28 |         // 压缩 js
29 |         new webpack.optimize.UglifyJsPlugin({
30 |             compress: {
31 |                 warnings: false
32 |             }
33 |         }),
34 |         // 提取模板，并保存入口 html 文件
35 |         new HtmlWebpackPlugin({
36 |             filename: '../index_prod.html',
37 |             template: './index.ejs',
38 |             inject: false
39 |         })
40 |     ]
41 | });


--------------------------------------------------------------------------------
/vuex/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["es2015"],
3 |     "plugins": ["transform-runtime"],
4 |     "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/vuex/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <router-view></router-view>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         
 9 |     }
10 | </script>


--------------------------------------------------------------------------------
/vuex/button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <button @click="handleClick" :style="styles">
 3 |         <slot></slot>
 4 |     </button>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         props: {
 9 |             color: {
10 |                 type: String,
11 |                 default: '#00cc66'
12 |             }
13 |         },
14 |         computed: {
15 |             styles () {
16 |                 return {
17 |                     background: this.color
18 |                 }
19 |             }
20 |         },
21 |         methods: {
22 |             handleClick (e) {
23 |                 this.$emit('click', e);
24 |             }
25 |         }
26 |     }
27 | </script>
28 | <style scoped>
29 |     button{
30 |         border: 0;
31 |         outline: none;
32 |         color: #fff;
33 |         padding: 4px 8px;
34 |     }
35 |     button:active{
36 |         position: relative;
37 |         top: 1px;
38 |         left: 1px;
39 |     }
40 | </style>


--------------------------------------------------------------------------------
/vuex/images/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/icarusion/vue-book/cd7e9a5c2c86bd7129c71768cc22f9cfdd4b8d5b/vuex/images/image.png


--------------------------------------------------------------------------------
/vuex/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
 7 | </head>
 8 | <body>
 9 |     <div id="app"></div>
10 |     <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
11 | </body>
12 | </html> 


--------------------------------------------------------------------------------
/vuex/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Webpack App</title>
 6 |     <link rel="stylesheet" type="text/css" href="/dist/main.css">
 7 | </head>
 8 | <body>
 9 |     <div id="app">
10 |         
11 |     </div>
12 |     <script type="text/javascript" src="/dist/main.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/vuex/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueRouter from 'vue-router';
 3 | import Vuex from 'vuex';
 4 | import App from './app.vue';
 5 | 
 6 | Vue.use(VueRouter);
 7 | Vue.use(Vuex);
 8 | 
 9 | // 路由配置
10 | const Routers = [
11 |     {
12 |         path: '/index',
13 |         meta: {
14 |             title: '首页'
15 |         },
16 |         component: (resolve) => require(['./views/index.vue'], resolve)
17 |     },
18 |     {
19 |         path: '/about',
20 |         meta: {
21 |             title: '关于'
22 |         },
23 |         component: (resolve) => require(['./views/about.vue'], resolve)
24 |     },
25 |     {
26 |         path: '/user/:id',
27 |         meta: {
28 |             title: '个人主页'
29 |         },
30 |         component: (resolve) => require(['./views/user.vue'], resolve)
31 |     },
32 |     {
33 |         path: '*',
34 |         redirect: '/index'
35 |     }
36 | ];
37 | const RouterConfig = {
38 |     // 使用 HTML5 的 History 路由模式
39 |     mode: 'history',
40 |     routes: Routers
41 | };
42 | const router = new VueRouter(RouterConfig);
43 | 
44 | router.beforeEach((to, from, next) => {
45 |     window.document.title = to.meta.title;
46 |     next();
47 | });
48 | 
49 | router.afterEach((to, from, next) => {
50 |     window.scrollTo(0, 0);
51 | });
52 | 
53 | const store = new Vuex.Store({
54 |     state: {
55 |         count: 0,
56 |         list: [1, 5, 8, 10, 30, 50]
57 |     },
58 |     getters: {
59 |         filteredList: state => {
60 |             return state.list.filter(item => item < 10);
61 |         },
62 |         listCount: (state, getters) => {
63 |             return getters.filteredList.length;
64 |         }
65 |     },
66 |     mutations: {
67 |         increment (state, n = 1) {
68 |             state.count += n;
69 |         },
70 |         decrease (state) {
71 |             state.count --;
72 |         }
73 |     },
74 |     actions: {
75 |         increment (context) {
76 |             context.commit('increment');
77 |         },
78 |         asyncIncrement (context) {
79 |             return new Promise(resolve => {
80 |                 setTimeout(() => {
81 |                     context.commit('increment');
82 |                     resolve();
83 |                 }, 1000)
84 |             });
85 |         }
86 |     }
87 | });
88 | 
89 | new Vue({
90 |     el: '#app',
91 |     router: router,
92 |     store: store,
93 |     render: h => {
94 |         return h(App)
95 |     }
96 | });


--------------------------------------------------------------------------------
/vuex/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
 9 |     "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel": "^6.23.0",
15 |     "babel-core": "^6.24.0",
16 |     "babel-loader": "^6.4.1",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-preset-es2015": "^6.24.0",
19 |     "babel-runtime": "^6.23.0",
20 |     "css-loader": "^0.27.3",
21 |     "extract-text-webpack-plugin": "^2.1.0",
22 |     "file-loader": "^0.10.1",
23 |     "html-webpack-plugin": "^2.28.0",
24 |     "style-loader": "^0.16.1",
25 |     "url-loader": "^0.5.8",
26 |     "vue-hot-reload-api": "^2.0.11",
27 |     "vue-loader": "^11.3.4",
28 |     "vue-style-loader": "^2.0.5",
29 |     "vue-template-compiler": "^2.2.6",
30 |     "webpack": "^2.3.2",
31 |     "webpack-dev-server": "^2.4.2",
32 |     "webpack-merge": "^4.1.0"
33 |   },
34 |   "dependencies": {
35 |     "vue": "^2.2.6",
36 |     "vue-router": "^2.3.1",
37 |     "vuex": "^2.2.1"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/vuex/style.css:
--------------------------------------------------------------------------------
1 | /* style.css */
2 | #app{
3 |     font-size: 24px;
4 |     color: #f50;
5 | }


--------------------------------------------------------------------------------
/vuex/title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <h1>
 3 |         <a :href="'#' + title">{{ title }}</a>
 4 |     </h1>
 5 | </template>
 6 | <script>
 7 |     export default {
 8 |         props: {
 9 |             title: {
10 |                 type: String
11 |             }
12 |         }
13 |     }
14 | </script>
15 | <style scoped>
16 |     h1 a{
17 |         color: #3399ff;
18 |         font-size: 24px;
19 |     }
20 | </style>


--------------------------------------------------------------------------------
/vuex/views/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>介绍页</h1>
 4 |         <button @click="handleRouter">跳转到 user</button>
 5 |     </div>
 6 | </template>
 7 | <script>
 8 |     export default {
 9 |         methods: {
10 |             handleRouter () {
11 |                 this.$router.push('/user/123');
12 |             }
13 |         }
14 |     }
15 | </script>


--------------------------------------------------------------------------------
/vuex/views/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>首页</h1>
 4 |         {{ count }}
 5 |         <button @click="handleIncrement">+1</button>
 6 |         <button @click="handleDecrease">-1</button>
 7 |         <button @click="handleIncrementMore">+5</button>
 8 |         <div>{{ list }}</div>
 9 |         <div>{{ listCount }}</div>
10 |         <button @click="handleActionIncrement">action +1</button>
11 |         <button @click="handleAsyncIncrement">async +1</button>
12 |     </div>
13 | </template>
14 | <script>
15 |     export default {
16 |         computed: {
17 |             count () {
18 |                 return this.$store.state.count;
19 |             },
20 |             list () {
21 |                 return this.$store.getters.filteredList;
22 |             },
23 |             listCount () {
24 |                 return this.$store.getters.listCount;
25 |             }
26 |         },
27 |         methods: {
28 |             handleIncrement () {
29 |                 this.$store.commit('increment');
30 |             },
31 |             handleDecrease () {
32 |                 this.$store.commit('decrease');
33 |             },
34 |             handleIncrementMore () {
35 |                 this.$store.commit('increment', 5);
36 |             },
37 |             handleActionIncrement () {
38 |                 this.$store.dispatch('increment')
39 |             },
40 |             handleAsyncIncrement () {
41 |                 this.$store.dispatch('asyncIncrement').then(() => {
42 |                     console.log(this.$store.state.count);
43 |                 });
44 |             }
45 |         }
46 |     }
47 | </script>


--------------------------------------------------------------------------------
/vuex/views/user.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>{{ $route.params.id }}</div>
 3 | </template>
 4 | <script>
 5 |     export default {
 6 |         mounted () {
 7 |             console.log(this.$route);
 8 |         }
 9 |     }
10 | </script>


--------------------------------------------------------------------------------
/vuex/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | 
 4 | var config = {
 5 |     entry: {
 6 |         main: './main'
 7 |     },
 8 |     output: {
 9 |         path: path.join(__dirname, './dist'),
10 |         publicPath: '/dist/',
11 |         filename: 'main.js'
12 |     },
13 |     module: {
14 |         rules: [
15 |             {
16 |                 test: /\.vue$/,
17 |                 loader: 'vue-loader',
18 |                 options: {
19 |                     loaders: {
20 |                         css: ExtractTextPlugin.extract({
21 |                             use: 'css-loader',
22 |                             fallback: 'vue-style-loader'
23 |                         })
24 |                     }
25 |                 }
26 |             },
27 |             {
28 |                 test: /\.js$/,
29 |                 loader: 'babel-loader',
30 |                 exclude: /node_modules/
31 |             },
32 |             {
33 |                 test: /\.css$/,
34 |                 use: ExtractTextPlugin.extract({
35 |                     use: 'css-loader',
36 |                     fallback: 'style-loader'
37 |                 })
38 |             },
39 |             {
40 |                 test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
41 |                 loader: 'url-loader?limit=1024'
42 |             }
43 |         ]
44 |     },
45 |     plugins: [
46 |         new ExtractTextPlugin({
47 |             filename: '[name].css',
48 |             allChunks: true
49 |         })
50 |     ]
51 | };
52 | 
53 | module.exports = config;


--------------------------------------------------------------------------------
/vuex/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 | var merge = require('webpack-merge');
 5 | var webpackBaseConfig = require('./webpack.config.js');
 6 | 
 7 | // 清空基本配置的插件列表
 8 | webpackBaseConfig.plugins = [];
 9 | 
10 | module.exports = merge(webpackBaseConfig, {
11 |     output: {
12 |         publicPath: '/dist/',
13 |         // 将入口文件重命名为带有 20 位 hash 值的唯一文件
14 |         filename: '[name].[hash].js'
15 |     },
16 |     plugins: [
17 |         new ExtractTextPlugin({
18 |             // 提取 css，并重命名为带有 20 位 hash 值的唯一文件
19 |             filename: '[name].[hash].css',
20 |             allChunks: true
21 |         }),
22 |         // 定义当前 node 环境为生产环境
23 |         new webpack.DefinePlugin({
24 |             'process.env': {
25 |                 NODE_ENV: '"production"'
26 |             }
27 |         }),
28 |         // 压缩 js
29 |         new webpack.optimize.UglifyJsPlugin({
30 |             compress: {
31 |                 warnings: false
32 |             }
33 |         }),
34 |         // 提取模板，并保存入口 html 文件
35 |         new HtmlWebpackPlugin({
36 |             filename: '../index_prod.html',
37 |             template: './index.ejs',
38 |             inject: false
39 |         })
40 |     ]
41 | });


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