├── dist
    ├── 1-aaa.jpg
    ├── index.html
    ├── styles.4389b935.css
    ├── runtime.bcdaec9b.js
    └── app.86e10d14.js
├── .babelrc
├── src
    ├── assets
    │   ├── images
    │   │   ├── 1.jpg
    │   │   ├── check-circle.svg
    │   │   └── close-circle.svg
    │   └── styles
    │   │   ├── footer.styl
    │   │   └── global.styl
    ├── index.js
    ├── todo
    │   ├── footer.jsx
    │   ├── header.vue
    │   ├── todo.vue
    │   ├── tabs.vue
    │   └── item.vue
    └── app.vue
├── postcss.config.js
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js


/dist/1-aaa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maitel2020/Vue-Webpack-Todo/HEAD/dist/1-aaa.jpg


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets":[
3 | 		"env"
4 | 	],
5 | 	"plugins":[
6 | 		"transform-vue-jsx"
7 | 	]
8 | }


--------------------------------------------------------------------------------
/src/assets/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maitel2020/Vue-Webpack-Todo/HEAD/src/assets/images/1.jpg


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | const autoprefixer = require('autoprefixer')
2 | 
3 | module.exports ={
4 | 	plugins:[
5 | 		autoprefixer()  //作用是用于自动加前缀的css
6 | 	]
7 | }


--------------------------------------------------------------------------------
/src/assets/styles/footer.styl:
--------------------------------------------------------------------------------
1 | #footer
2 | 	margin-top 40px
3 | 	text-align center
4 | 	color #bfbfbf
5 | 	font-size 30px
6 | 	text-shadow 0px 1px 0px 1px
7 | 	


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './app.vue'
 3 | import './assets/styles/global.styl'
 4 | 
 5 | 
 6 | const root = document.createElement('div')
 7 | document.body.appendChild(root)
 8 | 
 9 | 
10 | new Vue({
11 |     render: (h) => h(App)
12 | }).$mount(root)


--------------------------------------------------------------------------------
/src/todo/footer.jsx:
--------------------------------------------------------------------------------
 1 | import '../assets/styles/footer.styl'
 2 | export default{
 3 | 	data() {
 4 | 		return{
 5 | 			author: 'zsp'
 6 | 		}
 7 | 	},
 8 | 	render(){
 9 | 		return (
10 | 			<div id="footer">
11 | 				<span>Written by {this.author}</span>
12 | 			</div>
13 | 		)
14 | 	}
15 | }


--------------------------------------------------------------------------------
/src/todo/header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<header class="main-header">
 3 | 		<h1>JTodo</h1>
 4 | 	</header>
 5 | </template>
 6 | 
 7 | <style lang="stylus" scoped>
 8 | 	.main-header
 9 | 		text-align center
10 | 		h1
11 | 			font-size 100px
12 | 			color rgba(175,47,47,0.4)
13 | 			font-weight 100
14 | 			margin 20px
15 | </style>	


--------------------------------------------------------------------------------
/src/assets/styles/global.styl:
--------------------------------------------------------------------------------
 1 | html,body{
 2 |   margin:0px
 3 |   padding:0px
 4 |   width:100%
 5 |   height:100%
 6 | }
 7 | body{
 8 |   background-image:url('../images/1.jpg');
 9 |   background-size:cover;
10 |   background-position:center;
11 |   font:14px 'microsoft yahei';
12 |   color:#4d4d4d;
13 |   font-weight:300;
14 | }


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 |   <head>
4 |     <meta charset="UTF-8">
5 |     <title>Webpack App</title>
6 |   <link href="styles.4389b935.css" rel="stylesheet"></head>
7 |   <body>
8 |   <script type="text/javascript" src="runtime.bcdaec9b.js"></script><script type="text/javascript" src="vendor.d44c638b.js"></script><script type="text/javascript" src="app.86e10d14.js"></script></body>
9 | </html>


--------------------------------------------------------------------------------
/dist/styles.4389b935.css:
--------------------------------------------------------------------------------
 1 | #footer {
 2 |   margin-top: 40px;
 3 |   text-align: center;
 4 |   color: #bfbfbf;
 5 |   font-size: 30px;
 6 |   text-shadow: 0px 1px 0px 1px;
 7 | }
 8 | html,
 9 | body {
10 |   margin: 0px;
11 |   padding: 0px;
12 |   width: 100%;
13 |   height: 100%;
14 | }
15 | body {
16 |   background-image: url(1-aaa.jpg);
17 |   background-size: cover;
18 |   background-position: center;
19 |   font: 14px 'microsoft yahei';
20 |   color: #4d4d4d;
21 |   font-weight: 300;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div id="app">
 3 | 		<div id="cover"></div>
 4 | 		<Header></Header>
 5 | 		<todo></todo>
 6 | 		<Footer></Footer>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <script>
11 | import Header from './todo/header.vue'
12 | import Footer from './todo/footer.jsx'
13 | import Todo from './todo/todo.vue'
14 | 	export default{
15 | 		// 声明引入的组件
16 | 		components: {
17 | 			Header,
18 | 			Footer,
19 | 			Todo
20 | 		}
21 | 	}
22 | </script>
23 | 
24 | <style lang="stylus" scoped>
25 | 	#app
26 | 		position absolute
27 | 		left 0
28 | 		right 0
29 | 		top 0
30 | 		bottom 0
31 | 		#cover
32 | 			position absolute
33 | 			left 0
34 | 			top 0
35 | 			right 0
36 | 			bottom 0
37 | 			background-color #999
38 | 			opacity .9
39 | 			z-index -1
40 | </style>


--------------------------------------------------------------------------------
/src/assets/images/check-circle.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1530163406314" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5825" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8c12.7 17.7 39 17.7 51.7 0l210.6-292c3.9-5.3 0.1-12.7-6.4-12.7z" p-id="5826" fill="#333333"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="5827" fill="#333333"></path></svg>


--------------------------------------------------------------------------------
/src/assets/images/close-circle.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1530163442667" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6042" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="6043" fill="#ffffff"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="6044" fill="#ffffff"></path></svg>


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-webpack",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
 9 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "autoprefixer": "^7.2.3",
15 |     "babel-core": "^6.26.0",
16 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
17 |     "babel-loader": "^7.1.2",
18 |     "babel-plugin-syntax-jsx": "^6.18.0",
19 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
20 |     "babel-preset-env": "^1.6.1",
21 |     "cross-env": "^5.1.6",
22 |     "css-loader": "^0.28.11",
23 |     "extract-text-webpack-plugin": "^3.0.2",
24 |     "file-loader": "^1.1.11",
25 |     "html-webpack-plugin": "^3.2.0",
26 |     "postcss-loader": "^2.0.9",
27 |     "style-loader": "^0.21.0",
28 |     "stylus": "^0.54.5",
29 |     "stylus-loader": "^3.0.2",
30 |     "url-loader": "^1.0.1",
31 |     "vue": "^2.5.13",
32 |     "vue-loader": "^13.6.0",
33 |     "vue-template-compiler": "^2.5.13",
34 |     "webpack": "^3.10.0",
35 |     "webpack-dev-server": "^2.9.7"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue+Webpack打造todo应用
 2 | 
 3 | 原视频：https://www.imooc.com/video/16404<br/>
 4 | 刚开始也走了很多弯路，主要是模块版本导致的，最后采取只要老师的模块安装完成后，我就暂停记版本号，这样下来，才一路顺通。<br/>
 5 | 既然是入门，很多模块我也顺便记了下作用。刚开始我是记在json文件里的，npm run时一直报错，便百度了一下下，原来json里不能用//、/**/等这些注释符号...<br/>
 6 | 
 7 | 热更新不起作用时，就把node_modules这个文件夹删了，然后npm i重新下载，而我先把node_modules这个文件夹改个名，接着npm i重新下载，因为删node_modules也要一些时间，不想等。。<br/>
 8 | 
 9 | https://www.jianshu.com/p/42e11515c10f   《入门Webpack，看这篇就够了》顺便也看看<br/>
10 | 
11 | 
12 | 视频里所有提到的插件，描述可能不是很准确，毕竟也是从网上拼凑出来的<br/>
13 | webpack<br/>
14 | Vue<br/>
15 | vue-loader
16 | css-loader-------处理css文件中的url()等	http://www.css88.com/doc/webpack/loaders/css-loader/<br/>
17 | style-loader-------自动将css代码放到生成的style标签中插入到head标签里		http://www.css88.com/doc/webpack/loaders/style-loader/<br/>
18 | url-loader-------解决图片较多，会发很多http请求，会降低页面性能等问题		http://www.css88.com/doc/webpack/loaders/url-loader/<br/>
19 | file-loader-------解决图片引入问题		http://www.css88.com/doc/webpack/loaders/file-loader/<br/>
20 | stylus<br/>
21 | stylus-loader-------将stylus语言转化为原生css<br/>
22 | cross-env-------运行跨平台设置和使用环境变量的脚本<br/>
23 | html-webpack-plugin-------生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）<br/>
24 | webpack-dev-server-------提供了开发环境调试工具 		https://blog.csdn.net/qq_38652603/article/details/73865017
25 | postcss-loader-------补全css代码的兼容性前缀<br/>
26 | autoprefixer-------自动添加css前缀的功能<br/>
27 | babel-plugin-syntax-jsx<br/> 		
28 | babel-helper-vue-jsx-merge-props<br/>
29 | extract-text-webpack-plugin-------将样式文件单独打包 		http://www.css88.com/doc/webpack/plugins/extract-text-webpack-plugin/<br/>
30 | babel-preset-env-------根据当前的运行环境来自动配置源码到当前环境可正常运行的代码的编译转换    https://coding.imooc.com/learn/questiondetail/8901.html<br/>
31 | babel-plugin-transform-vue-jsx-------Vue官方提供了一个叫做babel-plugin-transform-vue-jsx的插件来编译JSX<br/>
32 | babel-core-------babel-core是作为babel的核心存在,babel的核心api都在这个模块里面<br/>
33 | babel-loader-------调用babel-core的API来完成转译过程		http://www.css88.com/doc/webpack/loaders/babel-loader/<br/>


--------------------------------------------------------------------------------
/src/todo/todo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<section class="real-app">
 3 | 		<input type="text"
 4 | 		class="add-input"
 5 | 		autofocus="autofocus"
 6 | 		placeholder="接下去要做什么？"
 7 | 		@keyup.enter="addTodo" 
 8 | 		>
 9 | 		<item 
10 | 		:todo="todo"
11 | 		v-for="todo in filteredTodos"
12 | 		:key="todo.id"
13 | 		@del="deleteTodo"
14 | 		></item>	
15 | 		<tabs 
16 | 		:filter="filter" 
17 | 		:todos="todos"
18 | 		@toggle="toggleFilter"
19 | 		@clearAllCompleted ="clearAllCompleted"
20 | 		></tabs>
21 | 	</section>
22 | </template>
23 | <script>
24 | import Item from './item.vue'
25 | import Tabs from './tabs.vue'
26 | let id = 0
27 | 	export default{
28 | 		data(){
29 | 			return {
30 | 				todos:[],
31 | 				filter: 'all'
32 | 			}
33 | 		},
34 | 		components:{
35 | 			Item,
36 | 			Tabs
37 | 		},
38 | 		computed:{
39 | 			filteredTodos(){
40 | 				if(this.filter === 'all'){
41 | 					return this.todos
42 | 				}
43 | 				const completed = this.filter === 'completed' 
44 | 				return this.todos.filter(todo => completed === todo.completed)
45 | 			}
46 | 		},
47 | 		methods: {
48 | 			addTodo(e){
49 | 				this.todos.unshift({
50 | 					id: id++,
51 | 					content: e.target.value.trim(),
52 | 					completed: false
53 | 				})
54 | 				e.target.value = ''
55 | 			},
56 | 			deleteTodo(id){
57 | 				this.todos.splice(this.todos.findIndex(todo => todo.id === id),1)
58 | 			},
59 | 			toggleFilter(state){
60 | 			this.filter = state
61 | 			},
62 | 			clearAllCompleted(){
63 | 				this.todos = this.todos.filter(todo => !todo.completed)
64 | 			}	
65 | 		}
66 | 	}
67 | </script>
68 | 
69 | <style lang="stylus" scoped>
70 | .real-app{
71 |         width 600px
72 |         margin :0px  auto
73 |         box-shadow :0px 0px 5px #666
74 |     }
75 |     .add-input{
76 |         positon:relative;
77 |         margin 0px
78 |         width 100%
79 |         font-size 24px
80 |         font-family  inherit
81 |         font-weight:inherit
82 |         line-height 1.4rem
83 |         border 0;
84 |         outline none
85 |         color inherit
86 |         padding 6px
87 |         border 1px solid #999
88 |         box-shadow: inset 0 -1px 5px 0px rgba(0,0,0,0)
89 |         box-sizing border-box
90 |         font-smoothing:antialiased;
91 |         padding 16px 16px 16px 60px
92 |         border none
93 |     }
94 | </style>


--------------------------------------------------------------------------------
/src/todo/tabs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="helper">
 3 | 		<span class="left">{{unFinishedTodoLength}} items left</span>
 4 | 		<span class="tabs">
 5 | 			<span 
 6 | 				v-for="state in states"
 7 | 				:key="state"
 8 | 				:class="[state,filter === state ? 'actived' : '']"
 9 | 				@click="toggleFilter(state)"
10 | 			>
11 | 				{{state}}
12 | 			</span>
13 | 		</span>
14 | 		<span class="clear" @click=clearAllCompleted>Clear Completed</span>
15 | 	</div>
16 | </template>
17 | 
18 | <script>
19 | 	export default {
20 | 		props:{
21 | 			filter:{
22 | 				type: String,
23 | 				required: true
24 | 			},
25 |             todos:{
26 |                 type:Array,
27 |                 required: true
28 |             }
29 | 		},
30 | 		data(){
31 | 			return {
32 | 				states:['all','active','completed']
33 | 			}
34 | 		},
35 |         computed:{
36 |             unFinishedTodoLength(){
37 |                 return this.todos.filter(todo => !todo.completed).length
38 |             }
39 |         },
40 | 		methods:{
41 | 			clearAllCompleted(){
42 |                 this.$emit('clearAllCompleted')
43 |             },
44 | 			toggleFilter(state){
45 |                 this.$emit('toggle',state)
46 |             }
47 | 		}
48 | 	}
49 | </script>
50 | 
51 | <style lang="stylus" scoped>
52 |     .helper{
53 |         font-weight 100
54 |         display flex
55 |         justify-content space-between
56 |         padding 5px 0
57 |         line-height 30px
58 |         background-color #ffffff
59 |         font-size 14px
60 |         font-smoothing:antialiased;
61 |     }
62 |     .left,.clear,.tabs{
63 |         padding 0px 10px
64 |         box-sizing border-box
65 |     }
66 |     .left,.clear{
67 |         width 150px
68 |     }
69 |     .left{
70 |         text-align left
71 |     }
72 |     .clear {
73 |         text-align:right
74 |         cursor pointer
75 |     }
76 |     .tabs{
77 |         width 200px
78 |         display flex
79 |         justify-content space-around
80 |         *{
81 |             display inline-block
82 |             padding 0px 10px
83 |             cursor pointer
84 |             border 1px solid rgba(175,47,47,0)
85 |             &.actived{
86 |                 border-color rgba(175,47,47,0.4)
87 |                 border-radius 5px
88 |             }
89 |         }
90 |     }
91 | </style>


--------------------------------------------------------------------------------
/src/todo/item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div :class="['todo-item',todo.completed ? 'completed' : '']">
 3 | 		<input 
 4 | 		type="checkbox"
 5 | 		class="toggle"
 6 | 		v-model="todo.completed" 
 7 | 		>
 8 | 		<label>{{todo.content}}</label>
 9 | 		<button class="destroy" @click="deleteTodo"></button>
10 | 	</div>
11 | </template>
12 | 
13 | <script>
14 | 	export default{
15 | 		props:{
16 | 			todo:{
17 | 				type: Object,
18 | 				required: true
19 | 			}
20 | 		},
21 | 		methods: {
22 | 			deleteTodo(){
23 | 				this.$emit('del',this.todo.id)
24 | 			}
25 | 		}
26 | 	}
27 | </script>
28 | 
29 | <style lang="stylus" scoped>
30 | .todo-item
31 |     position relative
32 |     background #ffffff
33 |     font-size 24px
34 |     border-bottom 1px solid rgba(0,0,0,.06)
35 |     &:hover
36 |         .destroy:after {
37 |             content: 'x'
38 |         }
39 |     label
40 |         white-space pre-line
41 |         word-break break-all
42 |         padding 15px 60px 15px 15px
43 |         margin-left 45px
44 |         display block
45 |         line-height 1.2
46 |         transition color 0.4s
47 | &.completed{
48 |     label
49 |     color #d9d9d9
50 |     text-decoration line-through
51 | }
52 |     .toggle{
53 |         text-align center
54 |         width 400px
55 |         height 40px
56 |         position absolute
57 |         top 0
58 |         bottom 0
59 |         margin auto 0
60 |         border none
61 |         outline none
62 |         appearance none
63 |     }
64 |     .toggle:before{
65 |         content:url('../assets/images/close-circle.svg')
66 |         position absolute
67 |         left 12px
68 |         cursor pointer
69 |     }
70 |     .toggle:checked:before{
71 |         content : url('../assets/images/check-circle.svg')
72 |         position absolute
73 |         left 12px
74 |         cursor pointer
75 |     }
76 |     .destroy
77 |         position absolute
78 |         top 50%
79 |         right 10px
80 |         bottom 0;
81 |         width 40px
82 |         height 40px
83 |         margin auto 0;
84 |         font-size 30px
85 |         color #cc9a9a;
86 |         margin-bottom 11px
87 |         transition: color 0.2s east-out
88 |         background-color transparent
89 |         appearance none
90 |         border-width 0
91 |         cursor pointer
92 |         outline none
93 | </style>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path')
  2 | const HTMLPlugin = require('html-webpack-plugin')
  3 | const webpack = require('webpack')
  4 | const ExtractPlugin = require('extract-text-webpack-plugin')
  5 | 
  6 | const isDev = process.env.NODE_ENV === 'development'
  7 | const config = {
  8 |     target: 'web', //跑在浏览器上，所以编译目标是web
  9 |     entry: path.join(__dirname, 'src/index.js'),
 10 |     output: {
 11 |         filename: 'bundle.[hash:8].js',
 12 |         path: path.join(__dirname, 'dist')
 13 |     },
 14 |     module: {
 15 |         rules: [{
 16 |                 test: /\.vue$/,
 17 |                 loader: 'vue-loader'
 18 |             }, {
 19 |                 test: /\.jsx$/,
 20 |                 loader: 'babel-loader'
 21 |             },
 22 |             {
 23 |                 test: /\.(gif|jpg|jpeg|png|svg)$/,
 24 |                 use: [{
 25 |                     loader: 'url-loader',
 26 |                     options: {
 27 |                         limit: 1024,
 28 |                         name: '[name]-aaa.[ext]'
 29 |                     }
 30 |                 }]
 31 |             }
 32 |         ]
 33 |     },
 34 |     plugins: [
 35 |         //判断环境，vue框架一定要用
 36 |         new webpack.DefinePlugin({
 37 |             'process.env': {
 38 |                 NODE_ENV: isDev ? '"development"' : '"production"'
 39 |             }
 40 |         }),
 41 |         new HTMLPlugin()
 42 |     ]
 43 | }
 44 | 
 45 | if (isDev) {
 46 |     config.module.rules.push({
 47 |         test: /\.styl/,
 48 |         use: [
 49 |             'style-loader',
 50 |             'css-loader',
 51 |             {
 52 |                 loader: 'postcss-loader',
 53 |                 options: {
 54 |                     sourceMap: true,
 55 |                 }
 56 |             },
 57 |             'stylus-loader'
 58 |         ]
 59 |     })
 60 |     config.devtool = '#cheap-module-eval-source-map' //帮助我们调试代码
 61 |     //dev配置
 62 |     config.devServer = {
 63 |         port: 8000,
 64 |         host: '0.0.0.0',
 65 |         overlay: { //错误显示在网页上
 66 |             errors: true
 67 |         },
 68 |         hot: true //热更新，只重新渲染该页面的组件
 69 |     }
 70 |     config.plugins.push(
 71 |         new webpack.HotModuleReplacementPlugin(), //配合hot使用
 72 |         new webpack.NoEmitOnErrorsPlugin() //减少不需要的信息展示
 73 |     )
 74 | 
 75 | } else {
 76 |     config.entry = {
 77 |         app: path.join(__dirname, 'src/index.js'),
 78 |         vendor: ['vue']
 79 |     }
 80 |     config.output.filename = '[name].[chunkhash:8].js'
 81 |     config.module.rules.push({
 82 |         test: /\.styl/,
 83 |         use: ExtractPlugin.extract({
 84 |             fallback: 'style-loader',
 85 |             use: [
 86 |                 'css-loader',
 87 |                 {
 88 |                     loader: 'postcss-loader',
 89 |                     options: {
 90 |                         sourceMap: true,
 91 |                     }
 92 |                 },
 93 |                 'stylus-loader'
 94 |             ]
 95 |         })
 96 |     })
 97 |     config.plugins.push(
 98 |         new ExtractPlugin('styles.[contentHash:8].css'),
 99 |         //vendor一定要在runtime前面
100 |         new webpack.optimize.CommonsChunkPlugin({
101 |             name: 'vendor'
102 |         }),
103 |         new webpack.optimize.CommonsChunkPlugin({
104 |             name: 'runtime'
105 |         })
106 |     )
107 | }
108 | 
109 | module.exports = config


--------------------------------------------------------------------------------
/dist/runtime.bcdaec9b.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// install a JSONP callback for chunk loading
  3 | /******/ 	var parentJsonpFunction = window["webpackJsonp"];
  4 | /******/ 	window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
  5 | /******/ 		// add "moreModules" to the modules object,
  6 | /******/ 		// then flag all "chunkIds" as loaded and fire callback
  7 | /******/ 		var moduleId, chunkId, i = 0, resolves = [], result;
  8 | /******/ 		for(;i < chunkIds.length; i++) {
  9 | /******/ 			chunkId = chunkIds[i];
 10 | /******/ 			if(installedChunks[chunkId]) {
 11 | /******/ 				resolves.push(installedChunks[chunkId][0]);
 12 | /******/ 			}
 13 | /******/ 			installedChunks[chunkId] = 0;
 14 | /******/ 		}
 15 | /******/ 		for(moduleId in moreModules) {
 16 | /******/ 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
 17 | /******/ 				modules[moduleId] = moreModules[moduleId];
 18 | /******/ 			}
 19 | /******/ 		}
 20 | /******/ 		if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
 21 | /******/ 		while(resolves.length) {
 22 | /******/ 			resolves.shift()();
 23 | /******/ 		}
 24 | /******/ 		if(executeModules) {
 25 | /******/ 			for(i=0; i < executeModules.length; i++) {
 26 | /******/ 				result = __webpack_require__(__webpack_require__.s = executeModules[i]);
 27 | /******/ 			}
 28 | /******/ 		}
 29 | /******/ 		return result;
 30 | /******/ 	};
 31 | /******/
 32 | /******/ 	// The module cache
 33 | /******/ 	var installedModules = {};
 34 | /******/
 35 | /******/ 	// objects to store loaded and loading chunks
 36 | /******/ 	var installedChunks = {
 37 | /******/ 		2: 0
 38 | /******/ 	};
 39 | /******/
 40 | /******/ 	// The require function
 41 | /******/ 	function __webpack_require__(moduleId) {
 42 | /******/
 43 | /******/ 		// Check if module is in cache
 44 | /******/ 		if(installedModules[moduleId]) {
 45 | /******/ 			return installedModules[moduleId].exports;
 46 | /******/ 		}
 47 | /******/ 		// Create a new module (and put it into the cache)
 48 | /******/ 		var module = installedModules[moduleId] = {
 49 | /******/ 			i: moduleId,
 50 | /******/ 			l: false,
 51 | /******/ 			exports: {}
 52 | /******/ 		};
 53 | /******/
 54 | /******/ 		// Execute the module function
 55 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 56 | /******/
 57 | /******/ 		// Flag the module as loaded
 58 | /******/ 		module.l = true;
 59 | /******/
 60 | /******/ 		// Return the exports of the module
 61 | /******/ 		return module.exports;
 62 | /******/ 	}
 63 | /******/
 64 | /******/ 	// This file contains only the entry chunk.
 65 | /******/ 	// The chunk loading function for additional chunks
 66 | /******/ 	__webpack_require__.e = function requireEnsure(chunkId) {
 67 | /******/ 		var installedChunkData = installedChunks[chunkId];
 68 | /******/ 		if(installedChunkData === 0) {
 69 | /******/ 			return new Promise(function(resolve) { resolve(); });
 70 | /******/ 		}
 71 | /******/
 72 | /******/ 		// a Promise means "currently loading".
 73 | /******/ 		if(installedChunkData) {
 74 | /******/ 			return installedChunkData[2];
 75 | /******/ 		}
 76 | /******/
 77 | /******/ 		// setup Promise in chunk cache
 78 | /******/ 		var promise = new Promise(function(resolve, reject) {
 79 | /******/ 			installedChunkData = installedChunks[chunkId] = [resolve, reject];
 80 | /******/ 		});
 81 | /******/ 		installedChunkData[2] = promise;
 82 | /******/
 83 | /******/ 		// start chunk loading
 84 | /******/ 		var head = document.getElementsByTagName('head')[0];
 85 | /******/ 		var script = document.createElement('script');
 86 | /******/ 		script.type = 'text/javascript';
 87 | /******/ 		script.charset = 'utf-8';
 88 | /******/ 		script.async = true;
 89 | /******/ 		script.timeout = 120000;
 90 | /******/
 91 | /******/ 		if (__webpack_require__.nc) {
 92 | /******/ 			script.setAttribute("nonce", __webpack_require__.nc);
 93 | /******/ 		}
 94 | /******/ 		script.src = __webpack_require__.p + "" + chunkId + "." + {"0":"86e10d14","1":"d44c638b"}[chunkId] + ".js";
 95 | /******/ 		var timeout = setTimeout(onScriptComplete, 120000);
 96 | /******/ 		script.onerror = script.onload = onScriptComplete;
 97 | /******/ 		function onScriptComplete() {
 98 | /******/ 			// avoid mem leaks in IE.
 99 | /******/ 			script.onerror = script.onload = null;
100 | /******/ 			clearTimeout(timeout);
101 | /******/ 			var chunk = installedChunks[chunkId];
102 | /******/ 			if(chunk !== 0) {
103 | /******/ 				if(chunk) {
104 | /******/ 					chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
105 | /******/ 				}
106 | /******/ 				installedChunks[chunkId] = undefined;
107 | /******/ 			}
108 | /******/ 		};
109 | /******/ 		head.appendChild(script);
110 | /******/
111 | /******/ 		return promise;
112 | /******/ 	};
113 | /******/
114 | /******/ 	// expose the modules object (__webpack_modules__)
115 | /******/ 	__webpack_require__.m = modules;
116 | /******/
117 | /******/ 	// expose the module cache
118 | /******/ 	__webpack_require__.c = installedModules;
119 | /******/
120 | /******/ 	// define getter function for harmony exports
121 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
122 | /******/ 		if(!__webpack_require__.o(exports, name)) {
123 | /******/ 			Object.defineProperty(exports, name, {
124 | /******/ 				configurable: false,
125 | /******/ 				enumerable: true,
126 | /******/ 				get: getter
127 | /******/ 			});
128 | /******/ 		}
129 | /******/ 	};
130 | /******/
131 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
132 | /******/ 	__webpack_require__.n = function(module) {
133 | /******/ 		var getter = module && module.__esModule ?
134 | /******/ 			function getDefault() { return module['default']; } :
135 | /******/ 			function getModuleExports() { return module; };
136 | /******/ 		__webpack_require__.d(getter, 'a', getter);
137 | /******/ 		return getter;
138 | /******/ 	};
139 | /******/
140 | /******/ 	// Object.prototype.hasOwnProperty.call
141 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
142 | /******/
143 | /******/ 	// __webpack_public_path__
144 | /******/ 	__webpack_require__.p = "";
145 | /******/
146 | /******/ 	// on error function for async loading
147 | /******/ 	__webpack_require__.oe = function(err) { console.error(err); throw err; };
148 | /******/ })
149 | /************************************************************************/
150 | /******/ ([]);


--------------------------------------------------------------------------------
/dist/app.86e10d14.js:
--------------------------------------------------------------------------------
   1 | webpackJsonp([0],[
   2 | /* 0 */
   3 | /***/ (function(module, exports) {
   4 | 
   5 | /*
   6 | 	MIT License http://www.opensource.org/licenses/mit-license.php
   7 | 	Author Tobias Koppers @sokra
   8 | */
   9 | // css base code, injected by the css-loader
  10 | module.exports = function(useSourceMap) {
  11 | 	var list = [];
  12 | 
  13 | 	// return the list of modules as css string
  14 | 	list.toString = function toString() {
  15 | 		return this.map(function (item) {
  16 | 			var content = cssWithMappingToString(item, useSourceMap);
  17 | 			if(item[2]) {
  18 | 				return "@media " + item[2] + "{" + content + "}";
  19 | 			} else {
  20 | 				return content;
  21 | 			}
  22 | 		}).join("");
  23 | 	};
  24 | 
  25 | 	// import a list of modules into the list
  26 | 	list.i = function(modules, mediaQuery) {
  27 | 		if(typeof modules === "string")
  28 | 			modules = [[null, modules, ""]];
  29 | 		var alreadyImportedModules = {};
  30 | 		for(var i = 0; i < this.length; i++) {
  31 | 			var id = this[i][0];
  32 | 			if(typeof id === "number")
  33 | 				alreadyImportedModules[id] = true;
  34 | 		}
  35 | 		for(i = 0; i < modules.length; i++) {
  36 | 			var item = modules[i];
  37 | 			// skip already imported module
  38 | 			// this implementation is not 100% perfect for weird media query combinations
  39 | 			//  when a module is imported multiple times with different media queries.
  40 | 			//  I hope this will never occur (Hey this way we have smaller bundles)
  41 | 			if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
  42 | 				if(mediaQuery && !item[2]) {
  43 | 					item[2] = mediaQuery;
  44 | 				} else if(mediaQuery) {
  45 | 					item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
  46 | 				}
  47 | 				list.push(item);
  48 | 			}
  49 | 		}
  50 | 	};
  51 | 	return list;
  52 | };
  53 | 
  54 | function cssWithMappingToString(item, useSourceMap) {
  55 | 	var content = item[1] || '';
  56 | 	var cssMapping = item[3];
  57 | 	if (!cssMapping) {
  58 | 		return content;
  59 | 	}
  60 | 
  61 | 	if (useSourceMap && typeof btoa === 'function') {
  62 | 		var sourceMapping = toComment(cssMapping);
  63 | 		var sourceURLs = cssMapping.sources.map(function (source) {
  64 | 			return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
  65 | 		});
  66 | 
  67 | 		return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
  68 | 	}
  69 | 
  70 | 	return [content].join('\n');
  71 | }
  72 | 
  73 | // Adapted from convert-source-map (MIT)
  74 | function toComment(sourceMap) {
  75 | 	// eslint-disable-next-line no-undef
  76 | 	var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
  77 | 	var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
  78 | 
  79 | 	return '/*# ' + data + ' */';
  80 | }
  81 | 
  82 | 
  83 | /***/ }),
  84 | /* 1 */
  85 | /***/ (function(module, exports, __webpack_require__) {
  86 | 
  87 | /*
  88 |   MIT License http://www.opensource.org/licenses/mit-license.php
  89 |   Author Tobias Koppers @sokra
  90 |   Modified by Evan You @yyx990803
  91 | */
  92 | 
  93 | var hasDocument = typeof document !== 'undefined'
  94 | 
  95 | if (typeof DEBUG !== 'undefined' && DEBUG) {
  96 |   if (!hasDocument) {
  97 |     throw new Error(
  98 |     'vue-style-loader cannot be used in a non-browser environment. ' +
  99 |     "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
 100 |   ) }
 101 | }
 102 | 
 103 | var listToStyles = __webpack_require__(16)
 104 | 
 105 | /*
 106 | type StyleObject = {
 107 |   id: number;
 108 |   parts: Array<StyleObjectPart>
 109 | }
 110 | 
 111 | type StyleObjectPart = {
 112 |   css: string;
 113 |   media: string;
 114 |   sourceMap: ?string
 115 | }
 116 | */
 117 | 
 118 | var stylesInDom = {/*
 119 |   [id: number]: {
 120 |     id: number,
 121 |     refs: number,
 122 |     parts: Array<(obj?: StyleObjectPart) => void>
 123 |   }
 124 | */}
 125 | 
 126 | var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
 127 | var singletonElement = null
 128 | var singletonCounter = 0
 129 | var isProduction = false
 130 | var noop = function () {}
 131 | var options = null
 132 | var ssrIdKey = 'data-vue-ssr-id'
 133 | 
 134 | // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
 135 | // tags it will allow on a page
 136 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
 137 | 
 138 | module.exports = function (parentId, list, _isProduction, _options) {
 139 |   isProduction = _isProduction
 140 | 
 141 |   options = _options || {}
 142 | 
 143 |   var styles = listToStyles(parentId, list)
 144 |   addStylesToDom(styles)
 145 | 
 146 |   return function update (newList) {
 147 |     var mayRemove = []
 148 |     for (var i = 0; i < styles.length; i++) {
 149 |       var item = styles[i]
 150 |       var domStyle = stylesInDom[item.id]
 151 |       domStyle.refs--
 152 |       mayRemove.push(domStyle)
 153 |     }
 154 |     if (newList) {
 155 |       styles = listToStyles(parentId, newList)
 156 |       addStylesToDom(styles)
 157 |     } else {
 158 |       styles = []
 159 |     }
 160 |     for (var i = 0; i < mayRemove.length; i++) {
 161 |       var domStyle = mayRemove[i]
 162 |       if (domStyle.refs === 0) {
 163 |         for (var j = 0; j < domStyle.parts.length; j++) {
 164 |           domStyle.parts[j]()
 165 |         }
 166 |         delete stylesInDom[domStyle.id]
 167 |       }
 168 |     }
 169 |   }
 170 | }
 171 | 
 172 | function addStylesToDom (styles /* Array<StyleObject> */) {
 173 |   for (var i = 0; i < styles.length; i++) {
 174 |     var item = styles[i]
 175 |     var domStyle = stylesInDom[item.id]
 176 |     if (domStyle) {
 177 |       domStyle.refs++
 178 |       for (var j = 0; j < domStyle.parts.length; j++) {
 179 |         domStyle.parts[j](item.parts[j])
 180 |       }
 181 |       for (; j < item.parts.length; j++) {
 182 |         domStyle.parts.push(addStyle(item.parts[j]))
 183 |       }
 184 |       if (domStyle.parts.length > item.parts.length) {
 185 |         domStyle.parts.length = item.parts.length
 186 |       }
 187 |     } else {
 188 |       var parts = []
 189 |       for (var j = 0; j < item.parts.length; j++) {
 190 |         parts.push(addStyle(item.parts[j]))
 191 |       }
 192 |       stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
 193 |     }
 194 |   }
 195 | }
 196 | 
 197 | function createStyleElement () {
 198 |   var styleElement = document.createElement('style')
 199 |   styleElement.type = 'text/css'
 200 |   head.appendChild(styleElement)
 201 |   return styleElement
 202 | }
 203 | 
 204 | function addStyle (obj /* StyleObjectPart */) {
 205 |   var update, remove
 206 |   var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
 207 | 
 208 |   if (styleElement) {
 209 |     if (isProduction) {
 210 |       // has SSR styles and in production mode.
 211 |       // simply do nothing.
 212 |       return noop
 213 |     } else {
 214 |       // has SSR styles but in dev mode.
 215 |       // for some reason Chrome can't handle source map in server-rendered
 216 |       // style tags - source maps in <style> only works if the style tag is
 217 |       // created and inserted dynamically. So we remove the server rendered
 218 |       // styles and inject new ones.
 219 |       styleElement.parentNode.removeChild(styleElement)
 220 |     }
 221 |   }
 222 | 
 223 |   if (isOldIE) {
 224 |     // use singleton mode for IE9.
 225 |     var styleIndex = singletonCounter++
 226 |     styleElement = singletonElement || (singletonElement = createStyleElement())
 227 |     update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
 228 |     remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
 229 |   } else {
 230 |     // use multi-style-tag mode in all other cases
 231 |     styleElement = createStyleElement()
 232 |     update = applyToTag.bind(null, styleElement)
 233 |     remove = function () {
 234 |       styleElement.parentNode.removeChild(styleElement)
 235 |     }
 236 |   }
 237 | 
 238 |   update(obj)
 239 | 
 240 |   return function updateStyle (newObj /* StyleObjectPart */) {
 241 |     if (newObj) {
 242 |       if (newObj.css === obj.css &&
 243 |           newObj.media === obj.media &&
 244 |           newObj.sourceMap === obj.sourceMap) {
 245 |         return
 246 |       }
 247 |       update(obj = newObj)
 248 |     } else {
 249 |       remove()
 250 |     }
 251 |   }
 252 | }
 253 | 
 254 | var replaceText = (function () {
 255 |   var textStore = []
 256 | 
 257 |   return function (index, replacement) {
 258 |     textStore[index] = replacement
 259 |     return textStore.filter(Boolean).join('\n')
 260 |   }
 261 | })()
 262 | 
 263 | function applyToSingletonTag (styleElement, index, remove, obj) {
 264 |   var css = remove ? '' : obj.css
 265 | 
 266 |   if (styleElement.styleSheet) {
 267 |     styleElement.styleSheet.cssText = replaceText(index, css)
 268 |   } else {
 269 |     var cssNode = document.createTextNode(css)
 270 |     var childNodes = styleElement.childNodes
 271 |     if (childNodes[index]) styleElement.removeChild(childNodes[index])
 272 |     if (childNodes.length) {
 273 |       styleElement.insertBefore(cssNode, childNodes[index])
 274 |     } else {
 275 |       styleElement.appendChild(cssNode)
 276 |     }
 277 |   }
 278 | }
 279 | 
 280 | function applyToTag (styleElement, obj) {
 281 |   var css = obj.css
 282 |   var media = obj.media
 283 |   var sourceMap = obj.sourceMap
 284 | 
 285 |   if (media) {
 286 |     styleElement.setAttribute('media', media)
 287 |   }
 288 |   if (options.ssrId) {
 289 |     styleElement.setAttribute(ssrIdKey, obj.id)
 290 |   }
 291 | 
 292 |   if (sourceMap) {
 293 |     // https://developer.chrome.com/devtools/docs/javascript-debugging
 294 |     // this makes source maps inside style tags work properly in Chrome
 295 |     css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
 296 |     // http://stackoverflow.com/a/26603875
 297 |     css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
 298 |   }
 299 | 
 300 |   if (styleElement.styleSheet) {
 301 |     styleElement.styleSheet.cssText = css
 302 |   } else {
 303 |     while (styleElement.firstChild) {
 304 |       styleElement.removeChild(styleElement.firstChild)
 305 |     }
 306 |     styleElement.appendChild(document.createTextNode(css))
 307 |   }
 308 | }
 309 | 
 310 | 
 311 | /***/ }),
 312 | /* 2 */
 313 | /***/ (function(module, exports) {
 314 | 
 315 | /* globals __VUE_SSR_CONTEXT__ */
 316 | 
 317 | // IMPORTANT: Do NOT use ES2015 features in this file.
 318 | // This module is a runtime utility for cleaner component module output and will
 319 | // be included in the final webpack user bundle.
 320 | 
 321 | module.exports = function normalizeComponent (
 322 |   rawScriptExports,
 323 |   compiledTemplate,
 324 |   functionalTemplate,
 325 |   injectStyles,
 326 |   scopeId,
 327 |   moduleIdentifier /* server only */
 328 | ) {
 329 |   var esModule
 330 |   var scriptExports = rawScriptExports = rawScriptExports || {}
 331 | 
 332 |   // ES6 modules interop
 333 |   var type = typeof rawScriptExports.default
 334 |   if (type === 'object' || type === 'function') {
 335 |     esModule = rawScriptExports
 336 |     scriptExports = rawScriptExports.default
 337 |   }
 338 | 
 339 |   // Vue.extend constructor export interop
 340 |   var options = typeof scriptExports === 'function'
 341 |     ? scriptExports.options
 342 |     : scriptExports
 343 | 
 344 |   // render functions
 345 |   if (compiledTemplate) {
 346 |     options.render = compiledTemplate.render
 347 |     options.staticRenderFns = compiledTemplate.staticRenderFns
 348 |     options._compiled = true
 349 |   }
 350 | 
 351 |   // functional template
 352 |   if (functionalTemplate) {
 353 |     options.functional = true
 354 |   }
 355 | 
 356 |   // scopedId
 357 |   if (scopeId) {
 358 |     options._scopeId = scopeId
 359 |   }
 360 | 
 361 |   var hook
 362 |   if (moduleIdentifier) { // server build
 363 |     hook = function (context) {
 364 |       // 2.3 injection
 365 |       context =
 366 |         context || // cached call
 367 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
 368 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
 369 |       // 2.2 with runInNewContext: true
 370 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
 371 |         context = __VUE_SSR_CONTEXT__
 372 |       }
 373 |       // inject component styles
 374 |       if (injectStyles) {
 375 |         injectStyles.call(this, context)
 376 |       }
 377 |       // register component module identifier for async chunk inferrence
 378 |       if (context && context._registeredComponents) {
 379 |         context._registeredComponents.add(moduleIdentifier)
 380 |       }
 381 |     }
 382 |     // used by ssr in case component is cached and beforeCreate
 383 |     // never gets called
 384 |     options._ssrRegister = hook
 385 |   } else if (injectStyles) {
 386 |     hook = injectStyles
 387 |   }
 388 | 
 389 |   if (hook) {
 390 |     var functional = options.functional
 391 |     var existing = functional
 392 |       ? options.render
 393 |       : options.beforeCreate
 394 | 
 395 |     if (!functional) {
 396 |       // inject component registration as beforeCreate hook
 397 |       options.beforeCreate = existing
 398 |         ? [].concat(existing, hook)
 399 |         : [hook]
 400 |     } else {
 401 |       // for template-only hot-reload because in that case the render fn doesn't
 402 |       // go through the normalizer
 403 |       options._injectStyles = hook
 404 |       // register for functioal component in vue file
 405 |       options.render = function renderWithStyleInjection (h, context) {
 406 |         hook.call(context)
 407 |         return existing(h, context)
 408 |       }
 409 |     }
 410 |   }
 411 | 
 412 |   return {
 413 |     esModule: esModule,
 414 |     exports: scriptExports,
 415 |     options: options
 416 |   }
 417 | }
 418 | 
 419 | 
 420 | /***/ }),
 421 | /* 3 */,
 422 | /* 4 */,
 423 | /* 5 */
 424 | /***/ (function(module, exports, __webpack_require__) {
 425 | 
 426 | "use strict";
 427 | 
 428 | 
 429 | Object.defineProperty(exports, "__esModule", {
 430 | 	value: true
 431 | });
 432 | 
 433 | var _header = __webpack_require__(17);
 434 | 
 435 | var _header2 = _interopRequireDefault(_header);
 436 | 
 437 | var _footer = __webpack_require__(21);
 438 | 
 439 | var _footer2 = _interopRequireDefault(_footer);
 440 | 
 441 | var _todo = __webpack_require__(23);
 442 | 
 443 | var _todo2 = _interopRequireDefault(_todo);
 444 | 
 445 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 446 | 
 447 | exports.default = {
 448 | 	// 声明引入的组件
 449 | 	components: {
 450 | 		Header: _header2.default,
 451 | 		Footer: _footer2.default,
 452 | 		Todo: _todo2.default
 453 | 	}
 454 | }; //
 455 | //
 456 | //
 457 | //
 458 | //
 459 | //
 460 | //
 461 | //
 462 | //
 463 | 
 464 | /***/ }),
 465 | /* 6 */
 466 | /***/ (function(module, exports, __webpack_require__) {
 467 | 
 468 | "use strict";
 469 | 
 470 | 
 471 | Object.defineProperty(exports, "__esModule", {
 472 | 	value: true
 473 | });
 474 | 
 475 | var _item = __webpack_require__(26);
 476 | 
 477 | var _item2 = _interopRequireDefault(_item);
 478 | 
 479 | var _tabs = __webpack_require__(33);
 480 | 
 481 | var _tabs2 = _interopRequireDefault(_tabs);
 482 | 
 483 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 484 | 
 485 | //
 486 | //
 487 | //
 488 | //
 489 | //
 490 | //
 491 | //
 492 | //
 493 | //
 494 | //
 495 | //
 496 | //
 497 | //
 498 | //
 499 | //
 500 | //
 501 | //
 502 | //
 503 | //
 504 | //
 505 | //
 506 | //
 507 | 
 508 | var id = 0;
 509 | exports.default = {
 510 | 	data: function data() {
 511 | 		return {
 512 | 			todos: [],
 513 | 			filter: 'all'
 514 | 		};
 515 | 	},
 516 | 
 517 | 	components: {
 518 | 		Item: _item2.default,
 519 | 		Tabs: _tabs2.default
 520 | 	},
 521 | 	computed: {
 522 | 		filteredTodos: function filteredTodos() {
 523 | 			if (this.filter === 'all') {
 524 | 				return this.todos;
 525 | 			}
 526 | 			var completed = this.filter === 'completed';
 527 | 			return this.todos.filter(function (todo) {
 528 | 				return completed === todo.completed;
 529 | 			});
 530 | 		}
 531 | 	},
 532 | 	methods: {
 533 | 		addTodo: function addTodo(e) {
 534 | 			this.todos.unshift({
 535 | 				id: id++,
 536 | 				content: e.target.value.trim(),
 537 | 				completed: false
 538 | 			});
 539 | 			e.target.value = '';
 540 | 		},
 541 | 		deleteTodo: function deleteTodo(id) {
 542 | 			this.todos.splice(this.todos.findIndex(function (todo) {
 543 | 				return todo.id === id;
 544 | 			}), 1);
 545 | 		},
 546 | 		toggleFilter: function toggleFilter(state) {
 547 | 			this.filter = state;
 548 | 		},
 549 | 		clearAllCompleted: function clearAllCompleted() {
 550 | 			this.todos = this.todos.filter(function (todo) {
 551 | 				return !todo.completed;
 552 | 			});
 553 | 		}
 554 | 	}
 555 | };
 556 | 
 557 | /***/ }),
 558 | /* 7 */
 559 | /***/ (function(module, exports, __webpack_require__) {
 560 | 
 561 | "use strict";
 562 | 
 563 | 
 564 | Object.defineProperty(exports, "__esModule", {
 565 | 	value: true
 566 | });
 567 | //
 568 | //
 569 | //
 570 | //
 571 | //
 572 | //
 573 | //
 574 | //
 575 | //
 576 | //
 577 | //
 578 | //
 579 | 
 580 | exports.default = {
 581 | 	props: {
 582 | 		todo: {
 583 | 			type: Object,
 584 | 			required: true
 585 | 		}
 586 | 	},
 587 | 	methods: {
 588 | 		deleteTodo: function deleteTodo() {
 589 | 			this.$emit('del', this.todo.id);
 590 | 		}
 591 | 	}
 592 | };
 593 | 
 594 | /***/ }),
 595 | /* 8 */
 596 | /***/ (function(module, exports, __webpack_require__) {
 597 | 
 598 | "use strict";
 599 | 
 600 | 
 601 | Object.defineProperty(exports, "__esModule", {
 602 | 	value: true
 603 | });
 604 | //
 605 | //
 606 | //
 607 | //
 608 | //
 609 | //
 610 | //
 611 | //
 612 | //
 613 | //
 614 | //
 615 | //
 616 | //
 617 | //
 618 | //
 619 | //
 620 | //
 621 | 
 622 | exports.default = {
 623 | 	props: {
 624 | 		filter: {
 625 | 			type: String,
 626 | 			required: true
 627 | 		},
 628 | 		todos: {
 629 | 			type: Array,
 630 | 			required: true
 631 | 		}
 632 | 	},
 633 | 	data: function data() {
 634 | 		return {
 635 | 			states: ['all', 'active', 'completed']
 636 | 		};
 637 | 	},
 638 | 
 639 | 	computed: {
 640 | 		unFinishedTodoLength: function unFinishedTodoLength() {
 641 | 			return this.todos.filter(function (todo) {
 642 | 				return !todo.completed;
 643 | 			}).length;
 644 | 		}
 645 | 	},
 646 | 	methods: {
 647 | 		clearAllCompleted: function clearAllCompleted() {
 648 | 			this.$emit('clearAllCompleted');
 649 | 		},
 650 | 		toggleFilter: function toggleFilter(state) {
 651 | 			this.$emit('toggle', state);
 652 | 		}
 653 | 	}
 654 | };
 655 | 
 656 | /***/ }),
 657 | /* 9 */
 658 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 659 | 
 660 | "use strict";
 661 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 662 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(4);
 663 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__app_vue__ = __webpack_require__(13);
 664 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__assets_styles_global_styl__ = __webpack_require__(39);
 665 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__assets_styles_global_styl___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__assets_styles_global_styl__);
 666 | 
 667 | 
 668 | 
 669 | 
 670 | 
 671 | const root = document.createElement('div')
 672 | document.body.appendChild(root)
 673 | 
 674 | 
 675 | new __WEBPACK_IMPORTED_MODULE_0_vue__["default"]({
 676 | 	render: (h) =>h(__WEBPACK_IMPORTED_MODULE_1__app_vue__["default"])
 677 | }).$mount(root)
 678 | 
 679 | /***/ }),
 680 | /* 10 */,
 681 | /* 11 */,
 682 | /* 12 */,
 683 | /* 13 */
 684 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 685 | 
 686 | "use strict";
 687 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_app_vue__ = __webpack_require__(5);
 688 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_app_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_app_vue__);
 689 | /* unused harmony namespace reexport */
 690 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_2_vue_loader_lib_template_compiler_index_id_data_v_06664707_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_template_index_0_app_vue__ = __webpack_require__(38);
 691 | function injectStyle (ssrContext) {
 692 |   __webpack_require__(14)
 693 | }
 694 | var normalizeComponent = __webpack_require__(2)
 695 | /* script */
 696 | 
 697 | 
 698 | /* template */
 699 | 
 700 | /* template functional */
 701 | var __vue_template_functional__ = false
 702 | /* styles */
 703 | var __vue_styles__ = injectStyle
 704 | /* scopeId */
 705 | var __vue_scopeId__ = "data-v-06664707"
 706 | /* moduleIdentifier (server only) */
 707 | var __vue_module_identifier__ = null
 708 | var Component = normalizeComponent(
 709 |   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_app_vue___default.a,
 710 |   __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_2_vue_loader_lib_template_compiler_index_id_data_v_06664707_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_template_index_0_app_vue__["a" /* default */],
 711 |   __vue_template_functional__,
 712 |   __vue_styles__,
 713 |   __vue_scopeId__,
 714 |   __vue_module_identifier__
 715 | )
 716 | 
 717 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
 718 | 
 719 | 
 720 | /***/ }),
 721 | /* 14 */
 722 | /***/ (function(module, exports, __webpack_require__) {
 723 | 
 724 | // style-loader: Adds some css to the DOM by adding a <style> tag
 725 | 
 726 | // load the styles
 727 | var content = __webpack_require__(15);
 728 | if(typeof content === 'string') content = [[module.i, content, '']];
 729 | if(content.locals) module.exports = content.locals;
 730 | // add the styles to the DOM
 731 | var update = __webpack_require__(1)("1021b123", content, true, {});
 732 | 
 733 | /***/ }),
 734 | /* 15 */
 735 | /***/ (function(module, exports, __webpack_require__) {
 736 | 
 737 | exports = module.exports = __webpack_require__(0)(false);
 738 | // imports
 739 | 
 740 | 
 741 | // module
 742 | exports.push([module.i, "#app #cover[data-v-06664707],#app[data-v-06664707]{position:absolute;left:0;right:0;top:0;bottom:0}#app #cover[data-v-06664707]{background-color:#999;opacity:.9;z-index:-1}", ""]);
 743 | 
 744 | // exports
 745 | 
 746 | 
 747 | /***/ }),
 748 | /* 16 */
 749 | /***/ (function(module, exports) {
 750 | 
 751 | /**
 752 |  * Translates the list format produced by css-loader into something
 753 |  * easier to manipulate.
 754 |  */
 755 | module.exports = function listToStyles (parentId, list) {
 756 |   var styles = []
 757 |   var newStyles = {}
 758 |   for (var i = 0; i < list.length; i++) {
 759 |     var item = list[i]
 760 |     var id = item[0]
 761 |     var css = item[1]
 762 |     var media = item[2]
 763 |     var sourceMap = item[3]
 764 |     var part = {
 765 |       id: parentId + ':' + i,
 766 |       css: css,
 767 |       media: media,
 768 |       sourceMap: sourceMap
 769 |     }
 770 |     if (!newStyles[id]) {
 771 |       styles.push(newStyles[id] = { id: id, parts: [part] })
 772 |     } else {
 773 |       newStyles[id].parts.push(part)
 774 |     }
 775 |   }
 776 |   return styles
 777 | }
 778 | 
 779 | 
 780 | /***/ }),
 781 | /* 17 */
 782 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 783 | 
 784 | "use strict";
 785 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 786 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_13_7_2_vue_loader_lib_template_compiler_index_id_data_v_40c1d1ee_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_template_index_0_header_vue__ = __webpack_require__(20);
 787 | function injectStyle (ssrContext) {
 788 |   __webpack_require__(18)
 789 | }
 790 | var normalizeComponent = __webpack_require__(2)
 791 | /* script */
 792 | var __vue_script__ = null
 793 | /* template */
 794 | 
 795 | /* template functional */
 796 | var __vue_template_functional__ = false
 797 | /* styles */
 798 | var __vue_styles__ = injectStyle
 799 | /* scopeId */
 800 | var __vue_scopeId__ = "data-v-40c1d1ee"
 801 | /* moduleIdentifier (server only) */
 802 | var __vue_module_identifier__ = null
 803 | var Component = normalizeComponent(
 804 |   __vue_script__,
 805 |   __WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_13_7_2_vue_loader_lib_template_compiler_index_id_data_v_40c1d1ee_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_template_index_0_header_vue__["a" /* default */],
 806 |   __vue_template_functional__,
 807 |   __vue_styles__,
 808 |   __vue_scopeId__,
 809 |   __vue_module_identifier__
 810 | )
 811 | 
 812 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
 813 | 
 814 | 
 815 | /***/ }),
 816 | /* 18 */
 817 | /***/ (function(module, exports, __webpack_require__) {
 818 | 
 819 | // style-loader: Adds some css to the DOM by adding a <style> tag
 820 | 
 821 | // load the styles
 822 | var content = __webpack_require__(19);
 823 | if(typeof content === 'string') content = [[module.i, content, '']];
 824 | if(content.locals) module.exports = content.locals;
 825 | // add the styles to the DOM
 826 | var update = __webpack_require__(1)("4498a2d8", content, true, {});
 827 | 
 828 | /***/ }),
 829 | /* 19 */
 830 | /***/ (function(module, exports, __webpack_require__) {
 831 | 
 832 | exports = module.exports = __webpack_require__(0)(false);
 833 | // imports
 834 | 
 835 | 
 836 | // module
 837 | exports.push([module.i, ".main-header[data-v-40c1d1ee]{text-align:center}.main-header h1[data-v-40c1d1ee]{font-size:100px;color:rgba(175,47,47,.4);font-weight:100;margin:20px}", ""]);
 838 | 
 839 | // exports
 840 | 
 841 | 
 842 | /***/ }),
 843 | /* 20 */
 844 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 845 | 
 846 | "use strict";
 847 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _vm._m(0)}
 848 | var staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('header',{staticClass:"main-header"},[_c('h1',[_vm._v("JTodo")])])}]
 849 | var esExports = { render: render, staticRenderFns: staticRenderFns }
 850 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
 851 | 
 852 | /***/ }),
 853 | /* 21 */
 854 | /***/ (function(module, exports, __webpack_require__) {
 855 | 
 856 | "use strict";
 857 | 
 858 | 
 859 | Object.defineProperty(exports, "__esModule", {
 860 | 	value: true
 861 | });
 862 | 
 863 | __webpack_require__(22);
 864 | 
 865 | exports.default = {
 866 | 	data: function data() {
 867 | 		return {
 868 | 			author: 'zsp'
 869 | 		};
 870 | 	},
 871 | 	render: function render() {
 872 | 		var h = arguments[0];
 873 | 
 874 | 		return h(
 875 | 			'div',
 876 | 			{
 877 | 				attrs: { id: 'footer' }
 878 | 			},
 879 | 			[h('span', ['Written by ', this.author])]
 880 | 		);
 881 | 	}
 882 | };
 883 | 
 884 | /***/ }),
 885 | /* 22 */
 886 | /***/ (function(module, exports) {
 887 | 
 888 | // removed by extract-text-webpack-plugin
 889 | 
 890 | /***/ }),
 891 | /* 23 */
 892 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 893 | 
 894 | "use strict";
 895 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 896 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_todo_vue__ = __webpack_require__(6);
 897 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_todo_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_todo_vue__);
 898 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_todo_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_todo_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
 899 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_2_vue_loader_lib_template_compiler_index_id_data_v_2a31f764_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_template_index_0_todo_vue__ = __webpack_require__(37);
 900 | function injectStyle (ssrContext) {
 901 |   __webpack_require__(24)
 902 | }
 903 | var normalizeComponent = __webpack_require__(2)
 904 | /* script */
 905 | 
 906 | 
 907 | /* template */
 908 | 
 909 | /* template functional */
 910 | var __vue_template_functional__ = false
 911 | /* styles */
 912 | var __vue_styles__ = injectStyle
 913 | /* scopeId */
 914 | var __vue_scopeId__ = "data-v-2a31f764"
 915 | /* moduleIdentifier (server only) */
 916 | var __vue_module_identifier__ = null
 917 | var Component = normalizeComponent(
 918 |   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_todo_vue___default.a,
 919 |   __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_2_vue_loader_lib_template_compiler_index_id_data_v_2a31f764_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_template_index_0_todo_vue__["a" /* default */],
 920 |   __vue_template_functional__,
 921 |   __vue_styles__,
 922 |   __vue_scopeId__,
 923 |   __vue_module_identifier__
 924 | )
 925 | 
 926 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
 927 | 
 928 | 
 929 | /***/ }),
 930 | /* 24 */
 931 | /***/ (function(module, exports, __webpack_require__) {
 932 | 
 933 | // style-loader: Adds some css to the DOM by adding a <style> tag
 934 | 
 935 | // load the styles
 936 | var content = __webpack_require__(25);
 937 | if(typeof content === 'string') content = [[module.i, content, '']];
 938 | if(content.locals) module.exports = content.locals;
 939 | // add the styles to the DOM
 940 | var update = __webpack_require__(1)("2510ca4f", content, true, {});
 941 | 
 942 | /***/ }),
 943 | /* 25 */
 944 | /***/ (function(module, exports, __webpack_require__) {
 945 | 
 946 | exports = module.exports = __webpack_require__(0)(false);
 947 | // imports
 948 | 
 949 | 
 950 | // module
 951 | exports.push([module.i, ".real-app[data-v-2a31f764]{width:600px;margin:0 auto;-webkit-box-shadow:0 0 5px #666;box-shadow:0 0 5px #666}.add-input[data-v-2a31f764]{positon:relative;margin:0;width:100%;font-size:24px;font-family:inherit;font-weight:inherit;line-height:1.4rem;border:0;outline:none;color:inherit;padding:6px;border:1px solid #999;-webkit-box-shadow:inset 0 -1px 5px 0 transparent;box-shadow:inset 0 -1px 5px 0 transparent;-webkit-box-sizing:border-box;box-sizing:border-box;font-smoothing:antialiased;padding:16px 16px 16px 60px;border:none}", ""]);
 952 | 
 953 | // exports
 954 | 
 955 | 
 956 | /***/ }),
 957 | /* 26 */
 958 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 959 | 
 960 | "use strict";
 961 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 962 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_item_vue__ = __webpack_require__(7);
 963 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_item_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_item_vue__);
 964 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_item_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_item_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
 965 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_2_vue_loader_lib_template_compiler_index_id_data_v_6d3bcb82_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_template_index_0_item_vue__ = __webpack_require__(32);
 966 | function injectStyle (ssrContext) {
 967 |   __webpack_require__(27)
 968 | }
 969 | var normalizeComponent = __webpack_require__(2)
 970 | /* script */
 971 | 
 972 | 
 973 | /* template */
 974 | 
 975 | /* template functional */
 976 | var __vue_template_functional__ = false
 977 | /* styles */
 978 | var __vue_styles__ = injectStyle
 979 | /* scopeId */
 980 | var __vue_scopeId__ = "data-v-6d3bcb82"
 981 | /* moduleIdentifier (server only) */
 982 | var __vue_module_identifier__ = null
 983 | var Component = normalizeComponent(
 984 |   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_item_vue___default.a,
 985 |   __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_2_vue_loader_lib_template_compiler_index_id_data_v_6d3bcb82_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_template_index_0_item_vue__["a" /* default */],
 986 |   __vue_template_functional__,
 987 |   __vue_styles__,
 988 |   __vue_scopeId__,
 989 |   __vue_module_identifier__
 990 | )
 991 | 
 992 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
 993 | 
 994 | 
 995 | /***/ }),
 996 | /* 27 */
 997 | /***/ (function(module, exports, __webpack_require__) {
 998 | 
 999 | // style-loader: Adds some css to the DOM by adding a <style> tag
1000 | 
1001 | // load the styles
1002 | var content = __webpack_require__(28);
1003 | if(typeof content === 'string') content = [[module.i, content, '']];
1004 | if(content.locals) module.exports = content.locals;
1005 | // add the styles to the DOM
1006 | var update = __webpack_require__(1)("32ba7f3a", content, true, {});
1007 | 
1008 | /***/ }),
1009 | /* 28 */
1010 | /***/ (function(module, exports, __webpack_require__) {
1011 | 
1012 | var escape = __webpack_require__(29);
1013 | exports = module.exports = __webpack_require__(0)(false);
1014 | // imports
1015 | 
1016 | 
1017 | // module
1018 | exports.push([module.i, ".todo-item[data-v-6d3bcb82]{position:relative;background:#fff;font-size:24px;border-bottom:1px solid rgba(0,0,0,.06)}.todo-item:hover .destroy[data-v-6d3bcb82]:after{content:\"x\"}.todo-item label[data-v-6d3bcb82]{white-space:pre-line;word-break:break-all;padding:15px 60px 15px 15px;margin-left:45px;display:block;line-height:1.2;-webkit-transition:color .4s;transition:color .4s}.completed[data-v-6d3bcb82]{label:#d9d9d9;text-decoration:line-through}.toggle[data-v-6d3bcb82]{text-align:center;width:400px;height:40px;position:absolute;top:0;bottom:0;margin:auto 0;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.toggle[data-v-6d3bcb82]:before{content:url(" + escape(__webpack_require__(30)) + ");position:absolute;left:12px;cursor:pointer}.toggle[data-v-6d3bcb82]:checked:before{content:url(" + escape(__webpack_require__(31)) + ");position:absolute;left:12px;cursor:pointer}.destroy[data-v-6d3bcb82]{position:absolute;top:50%;right:10px;bottom:0;width:40px;height:40px;margin:auto 0;font-size:30px;color:#cc9a9a;margin-bottom:11px;-webkit-transition:color east-out .2s;transition:color east-out .2s;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0;cursor:pointer;outline:none}", ""]);
1019 | 
1020 | // exports
1021 | 
1022 | 
1023 | /***/ }),
1024 | /* 29 */
1025 | /***/ (function(module, exports) {
1026 | 
1027 | module.exports = function escape(url) {
1028 |     if (typeof url !== 'string') {
1029 |         return url
1030 |     }
1031 |     // If url is already wrapped in quotes, remove them
1032 |     if (/^['"].*['"]$/.test(url)) {
1033 |         url = url.slice(1, -1);
1034 |     }
1035 |     // Should url be wrapped?
1036 |     // See https://drafts.csswg.org/css-values-3/#urls
1037 |     if (/["'() \t\n]/.test(url)) {
1038 |         return '"' + url.replace(/"/g, '\\"').replace(/\n/g, '\\n') + '"'
1039 |     }
1040 | 
1041 |     return url
1042 | }
1043 | 
1044 | 
1045 | /***/ }),
1046 | /* 30 */
1047 | /***/ (function(module, exports) {
1048 | 
1049 | module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTMwMTYzNDQyNjY3IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwNDIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTY4NS40IDM1NC44YzAtNC40LTMuNi04LTgtOGwtNjYgMC4zTDUxMiA0NjUuNmwtOTkuMy0xMTguNC02Ni4xLTAuM2MtNC40IDAtOCAzLjUtOCA4IDAgMS45IDAuNyAzLjcgMS45IDUuMmwxMzAuMSAxNTVMMzQwLjUgNjcwYy0xLjIgMS41LTEuOSAzLjMtMS45IDUuMiAwIDQuNCAzLjYgOCA4IDhsNjYuMS0wLjNMNTEyIDU2NC40bDk5LjMgMTE4LjQgNjYgMC4zYzQuNCAwIDgtMy41IDgtOCAwLTEuOS0wLjctMy43LTEuOS01LjJMNTUzLjUgNTE1bDEzMC4xLTE1NWMxLjItMS40IDEuOC0zLjMgMS44LTUuMnoiIHAtaWQ9IjYwNDMiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48cGF0aCBkPSJNNTEyIDY1QzI2NC42IDY1IDY0IDI2NS42IDY0IDUxM3MyMDAuNiA0NDggNDQ4IDQ0OCA0NDgtMjAwLjYgNDQ4LTQ0OFM3NTkuNCA2NSA1MTIgNjV6IG0wIDgyMGMtMjA1LjQgMC0zNzItMTY2LjYtMzcyLTM3MnMxNjYuNi0zNzIgMzcyLTM3MiAzNzIgMTY2LjYgMzcyIDM3Mi0xNjYuNiAzNzItMzcyIDM3MnoiIHAtaWQ9IjYwNDQiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4="
1050 | 
1051 | /***/ }),
1052 | /* 31 */
1053 | /***/ (function(module, exports) {
1054 | 
1055 | module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTMwMTYzNDA2MzE0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU4MjUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTY5OSAzNTNoLTQ2LjljLTEwLjIgMC0xOS45IDQuOS0yNS45IDEzLjNMNDY5IDU4NC4zbC03MS4yLTk4LjhjLTYtOC4zLTE1LjYtMTMuMy0yNS45LTEzLjNIMzI1Yy02LjUgMC0xMC4zIDcuNC02LjUgMTIuN2wxMjQuNiAxNzIuOGMxMi43IDE3LjcgMzkgMTcuNyA1MS43IDBsMjEwLjYtMjkyYzMuOS01LjMgMC4xLTEyLjctNi40LTEyLjd6IiBwLWlkPSI1ODI2IiBmaWxsPSIjMzMzMzMzIj48L3BhdGg+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0eiBtMCA4MjBjLTIwNS40IDAtMzcyLTE2Ni42LTM3Mi0zNzJzMTY2LjYtMzcyIDM3Mi0zNzIgMzcyIDE2Ni42IDM3MiAzNzItMTY2LjYgMzcyLTM3MiAzNzJ6IiBwLWlkPSI1ODI3IiBmaWxsPSIjMzMzMzMzIj48L3BhdGg+PC9zdmc+"
1056 | 
1057 | /***/ }),
1058 | /* 32 */
1059 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1060 | 
1061 | "use strict";
1062 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['todo-item',_vm.todo.completed ? 'completed' : '']},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.todo.completed),expression:"todo.completed"}],staticClass:"toggle",attrs:{"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.todo.completed)?_vm._i(_vm.todo.completed,null)>-1:(_vm.todo.completed)},on:{"change":function($event){var $$a=_vm.todo.completed,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.$set(_vm.todo, "completed", $$a.concat([$$v])))}else{$$i>-1&&(_vm.$set(_vm.todo, "completed", $$a.slice(0,$$i).concat($$a.slice($$i+1))))}}else{_vm.$set(_vm.todo, "completed", $$c)}}}}),_vm._v(" "),_c('label',[_vm._v(_vm._s(_vm.todo.content))]),_vm._v(" "),_c('button',{staticClass:"destroy",on:{"click":_vm.deleteTodo}})])}
1063 | var staticRenderFns = []
1064 | var esExports = { render: render, staticRenderFns: staticRenderFns }
1065 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
1066 | 
1067 | /***/ }),
1068 | /* 33 */
1069 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1070 | 
1071 | "use strict";
1072 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
1073 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_tabs_vue__ = __webpack_require__(8);
1074 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_tabs_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_tabs_vue__);
1075 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_tabs_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_tabs_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
1076 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_2_vue_loader_lib_template_compiler_index_id_data_v_2bbba208_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_template_index_0_tabs_vue__ = __webpack_require__(36);
1077 | function injectStyle (ssrContext) {
1078 |   __webpack_require__(34)
1079 | }
1080 | var normalizeComponent = __webpack_require__(2)
1081 | /* script */
1082 | 
1083 | 
1084 | /* template */
1085 | 
1086 | /* template functional */
1087 | var __vue_template_functional__ = false
1088 | /* styles */
1089 | var __vue_styles__ = injectStyle
1090 | /* scopeId */
1091 | var __vue_scopeId__ = "data-v-2bbba208"
1092 | /* moduleIdentifier (server only) */
1093 | var __vue_module_identifier__ = null
1094 | var Component = normalizeComponent(
1095 |   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_script_index_0_tabs_vue___default.a,
1096 |   __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_2_vue_loader_lib_template_compiler_index_id_data_v_2bbba208_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_2_vue_loader_lib_selector_type_template_index_0_tabs_vue__["a" /* default */],
1097 |   __vue_template_functional__,
1098 |   __vue_styles__,
1099 |   __vue_scopeId__,
1100 |   __vue_module_identifier__
1101 | )
1102 | 
1103 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
1104 | 
1105 | 
1106 | /***/ }),
1107 | /* 34 */
1108 | /***/ (function(module, exports, __webpack_require__) {
1109 | 
1110 | // style-loader: Adds some css to the DOM by adding a <style> tag
1111 | 
1112 | // load the styles
1113 | var content = __webpack_require__(35);
1114 | if(typeof content === 'string') content = [[module.i, content, '']];
1115 | if(content.locals) module.exports = content.locals;
1116 | // add the styles to the DOM
1117 | var update = __webpack_require__(1)("e5a765e8", content, true, {});
1118 | 
1119 | /***/ }),
1120 | /* 35 */
1121 | /***/ (function(module, exports, __webpack_require__) {
1122 | 
1123 | exports = module.exports = __webpack_require__(0)(false);
1124 | // imports
1125 | 
1126 | 
1127 | // module
1128 | exports.push([module.i, ".helper[data-v-2bbba208]{font-weight:100;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:5px 0;line-height:30px;background-color:#fff;font-size:14px;font-smoothing:antialiased}.clear[data-v-2bbba208],.left[data-v-2bbba208],.tabs[data-v-2bbba208]{padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box}.clear[data-v-2bbba208],.left[data-v-2bbba208]{width:150px}.left[data-v-2bbba208]{text-align:left}.clear[data-v-2bbba208]{text-align:right;cursor:pointer}.tabs[data-v-2bbba208]{width:200px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.tabs [data-v-2bbba208]{display:inline-block;padding:0 10px;cursor:pointer;border:1px solid rgba(175,47,47,0)}.tabs .actived[data-v-2bbba208]{border-color:rgba(175,47,47,.4);border-radius:5px}", ""]);
1129 | 
1130 | // exports
1131 | 
1132 | 
1133 | /***/ }),
1134 | /* 36 */
1135 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1136 | 
1137 | "use strict";
1138 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"helper"},[_c('span',{staticClass:"left"},[_vm._v(_vm._s(_vm.unFinishedTodoLength)+" items left")]),_vm._v(" "),_c('span',{staticClass:"tabs"},_vm._l((_vm.states),function(state){return _c('span',{key:state,class:[state,_vm.filter === state ? 'actived' : ''],on:{"click":function($event){_vm.toggleFilter(state)}}},[_vm._v("\n\t\t\t"+_vm._s(state)+"\n\t\t")])})),_vm._v(" "),_c('span',{staticClass:"clear",on:{"click":_vm.clearAllCompleted}},[_vm._v("Clear Completed")])])}
1139 | var staticRenderFns = []
1140 | var esExports = { render: render, staticRenderFns: staticRenderFns }
1141 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
1142 | 
1143 | /***/ }),
1144 | /* 37 */
1145 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1146 | 
1147 | "use strict";
1148 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"real-app"},[_c('input',{staticClass:"add-input",attrs:{"type":"text","autofocus":"autofocus","placeholder":"接下去要做什么？"},on:{"keyup":function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.addTodo($event)}}}),_vm._v(" "),_vm._l((_vm.filteredTodos),function(todo){return _c('item',{key:todo.id,attrs:{"todo":todo},on:{"del":_vm.deleteTodo}})}),_vm._v(" "),_c('tabs',{attrs:{"filter":_vm.filter,"todos":_vm.todos},on:{"toggle":_vm.toggleFilter,"clearAllCompleted":_vm.clearAllCompleted}})],2)}
1149 | var staticRenderFns = []
1150 | var esExports = { render: render, staticRenderFns: staticRenderFns }
1151 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
1152 | 
1153 | /***/ }),
1154 | /* 38 */
1155 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1156 | 
1157 | "use strict";
1158 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"app"}},[_c('div',{attrs:{"id":"cover"}}),_vm._v(" "),_c('Header'),_vm._v(" "),_c('todo'),_vm._v(" "),_c('Footer')],1)}
1159 | var staticRenderFns = []
1160 | var esExports = { render: render, staticRenderFns: staticRenderFns }
1161 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
1162 | 
1163 | /***/ }),
1164 | /* 39 */
1165 | /***/ (function(module, exports) {
1166 | 
1167 | // removed by extract-text-webpack-plugin
1168 | 
1169 | /***/ })
1170 | ],[9]);


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