├── .babelrc
├── .gitignore
├── README.md
├── _config.yml
├── dist
    ├── app.762ed07e.js
    ├── bg.urloader.jpg
    ├── bundle.js
    ├── index.html
    ├── main.f61208f8.js
    ├── runtime.12b274d9.js
    ├── style.fa126bd4.css
    └── vendor.95490bef.js
├── index.html
├── package.json
├── postcss.config.js
├── src
    ├── app.vue
    ├── assets
    │   ├── img
    │   │   └── bg.jpg
    │   └── style
    │   │   ├── footer.styl
    │   │   └── global.styl
    ├── index.js
    └── todo
    │   ├── footer.jsx
    │   ├── header.vue
    │   ├── items.vue
    │   ├── tabs.vue
    │   └── todo.vue
└── webpack.config.js


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-webpack-demo
  2 | 
  3 | ## [webpack 4.0.0快速上手](https://github.com/chinadbo/webpack4-start)
  4 | ## [A Vue.js Parcel-Bundler](https://github.com/chinadbo/vue-parcel)
  5 | 
  6 | 
  7 | [前端工程化之自动构建gulp及模块打包webpack和parcel简介](https://github.com/chinadbo/web-front-end/issues/6)
  8 | 
  9 | 
 10 | ## 目录
 11 | 1. 通过webpack搭建vue工程workflow;
 12 | 2. .vue文件开发模式;
 13 | 3. vue使用jsx进行开发的方式;
 14 | 4. vue组件间通信的基本方式;
 15 | 5. webpack打包优化的基本点
 16 | 
 17 | ## 通过webpack搭建vue工程
 18 |   根目录webpack.config.js
 19 |   ```javascript
 20 |   const config = {
 21 |     entry: path.join(__dirname, 'src/index.js'),
 22 |     output: {
 23 |       filename: 'bundle.js',
 24 |       path: path.join(__dirname, 'dist'),
 25 |       module: {
 26 |         rules: [
 27 |           {
 28 |             test: /\.vue$/,
 29 |             loader: 'vue-loader'
 30 |           }
 31 |         ]
 32 |       }
 33 |     }
 34 |   }
 35 |   ```
 36 |   查看更多[webpack.config.js](https://github.com/chinadbo/vue-webpack-demo/blob/master/webpack.config.js)
 37 | 
 38 | ## .vue文件开发模式
 39 |   在入口index.js文件中，声明Vue，并且挂在到$el元素上。
 40 |   ```javascript
 41 |   new Vue({
 42 |     render: (h) => h(App)
 43 |   }).$mount($el)
 44 |   ```
 45 |   熟悉Vue之后可使用Vue官方推荐路由Vue-router
 46 |   ```javascript
 47 |   import Vue from 'vue'
 48 |   import App from './App'
 49 |   import router from './router'
 50 | 
 51 |   Vue.config.productionTip = false
 52 | 
 53 |   /* eslint-disable no-new */
 54 |   new Vue({
 55 |     el: '#app',
 56 |     router,
 57 |     template: '<App/>',
 58 |     components: { App }
 59 |   })
 60 |   ```
 61 |   组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
 62 | 
 63 |   所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
 64 | 
 65 |   ```javascript
 66 |   import Header from './todo/header.vue' // 引入组件
 67 |   export default {
 68 |     components: {
 69 |       Header,
 70 |     }
 71 |   }
 72 |   ```
 73 |   ```html
 74 |   <template>
 75 |     <div id='app'>
 76 |       <Header/>  <!-- Header组件 -->
 77 |   </template>
 78 |   ```
 79 | 
 80 | ### css预处理、后处理
 81 |   开发过程中使用Sass、Less、Stylus等css预处理
 82 |   ```javascript
 83 |   // webpack.config.js
 84 |   {
 85 |     // 基本的css loader
 86 |     test: /\.css$/,
 87 |     use: [
 88 |       'style-loader',
 89 |       'css-loader'
 90 |     ]
 91 |   },
 92 |   {
 93 |     test: /\.styl$/,
 94 |     use: [
 95 |       'style-loader',
 96 |       'css-loader',
 97 |       {
 98 |         loader: 'postcss-loader',
 99 |         options: {
100 |           sourceMap: true
101 |         }
102 |       },
103 |       'stylus-loader'
104 |     ]
105 |   }
106 |   ```
107 |   更进一步，加载postcss后处理器
108 |   ```javascript
109 |   // webpack.config.js
110 |   {
111 |     test: /\.styl$/,
112 |     use: [
113 |       'style-loader',
114 |       'css-loader',
115 |       {
116 |         loader: 'postcss-loader',
117 |         options: {
118 |           sourceMap: true
119 |         }
120 |       },
121 |       'stylus-loader'
122 |     ]
123 |   }
124 |   ```
125 |   根目录新建postcss.config.js配置文件
126 |   ```javascript
127 |   const autoprefixer = require('autoprefixer') // 加载autoprefixer（浏览器兼容前缀）
128 |   module.exports = {
129 |     plugins: [
130 |       autoprefixer()
131 |     ]
132 |   }
133 |   ```
134 | 
135 | ## JSX
136 |   > React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 
137 | 
138 |   JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
139 | 
140 |   如何在vue中使用jsx？
141 |   ```javascript
142 |   // webpack.config.js
143 |   {
144 |     test: /\.jsx$/,
145 |     loader: 'babel-loader'
146 |   }
147 | 
148 |   // 需要的package
149 |   "babel-core": "^6.26.0",
150 |   "babel-helper-vue-jsx-merge-props": "^2.0.3",
151 |   "babel-loader": "^7.1.2",
152 |   "babel-plugin-syntax-jsx": "^6.18.0",
153 |   "babel-plugin-transform-vue-jsx": "^3.5.0"
154 | 
155 |   // .babelrc
156 |   {
157 |     "presets": [
158 |       "env"
159 |     ],
160 |     "plugins":[
161 |       "transform-vue-jsx"
162 |     ]
163 |   }
164 | 
165 |   // jsx文件
166 |   import '../assets/style/footer.styl'
167 |   export default {
168 |     data() {
169 |       return {
170 |         author: 'Ioodu'
171 |       }
172 |     },
173 |     render() {
174 |       return (
175 |         <footer id="footer">
176 |           <span>Written by {this.author}</span>
177 |         </footer>
178 |       )
179 |     }
180 |   }
181 |   ```
182 |   facebook.github.io [JSX语法](http://facebook.github.io/jsx/)
183 | 
184 | ## vue组件间通信
185 |   > 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。
186 | 
187 |   父组件
188 |   ```vue
189 |    <item 
190 |       :todo="todo"
191 |       v-for="todo in filterTodos"
192 |       :key="todo.id"
193 |       @del="deleteTodo"
194 |     />    
195 |     <Tabs 
196 |       :filter="filter" 
197 |       :todos="todos"
198 |       @toggle="toggleFilter"
199 |       @clearAll="clearAllcompleted"
200 |     />
201 |   ```
202 |   父组件业务逻辑处理
203 |   ```javascript
204 |   // 引入组件
205 |   components: {
206 |     Item,
207 |     Tabs,
208 |   },
209 |   methods: {
210 |     deleteTodo(id) {
211 |       this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1)
212 |     },
213 |   }
214 |   ```
215 |   子组件
216 |   ```vue
217 |   <label for="content">{{todo.content}}</label>
218 |   <button class="delete" @click="deleteTodo"></button>
219 |   ```
220 |   ```javascript
221 |   props: {
222 |     todo: {
223 |       type: Object,
224 |       required: true
225 |     }
226 |   },
227 |   methods: {
228 |     deleteTodo(){
229 |       this.$emit('del', this.todo.id) // 触发事件 并且带参数
230 |     }
231 |   }
232 | 
233 |   ```
234 | ## webpack打包优化的基本点
235 | 
236 | 1. 优化插件
237 | - OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
238 | - UglifyJsPlugin：压缩JS代码；
239 | - ExtractTextPlugin：分离CSS和JS文件
240 | 2. 缓存
241 | 
242 | - hash
243 | 
244 | - clean-webpack-plugin
245 | 
246 | ...
247 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/dist/app.762ed07e.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 | 
 132 | // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
 133 | // tags it will allow on a page
 134 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
 135 | 
 136 | module.exports = function (parentId, list, _isProduction) {
 137 |   isProduction = _isProduction
 138 | 
 139 |   var styles = listToStyles(parentId, list)
 140 |   addStylesToDom(styles)
 141 | 
 142 |   return function update (newList) {
 143 |     var mayRemove = []
 144 |     for (var i = 0; i < styles.length; i++) {
 145 |       var item = styles[i]
 146 |       var domStyle = stylesInDom[item.id]
 147 |       domStyle.refs--
 148 |       mayRemove.push(domStyle)
 149 |     }
 150 |     if (newList) {
 151 |       styles = listToStyles(parentId, newList)
 152 |       addStylesToDom(styles)
 153 |     } else {
 154 |       styles = []
 155 |     }
 156 |     for (var i = 0; i < mayRemove.length; i++) {
 157 |       var domStyle = mayRemove[i]
 158 |       if (domStyle.refs === 0) {
 159 |         for (var j = 0; j < domStyle.parts.length; j++) {
 160 |           domStyle.parts[j]()
 161 |         }
 162 |         delete stylesInDom[domStyle.id]
 163 |       }
 164 |     }
 165 |   }
 166 | }
 167 | 
 168 | function addStylesToDom (styles /* Array<StyleObject> */) {
 169 |   for (var i = 0; i < styles.length; i++) {
 170 |     var item = styles[i]
 171 |     var domStyle = stylesInDom[item.id]
 172 |     if (domStyle) {
 173 |       domStyle.refs++
 174 |       for (var j = 0; j < domStyle.parts.length; j++) {
 175 |         domStyle.parts[j](item.parts[j])
 176 |       }
 177 |       for (; j < item.parts.length; j++) {
 178 |         domStyle.parts.push(addStyle(item.parts[j]))
 179 |       }
 180 |       if (domStyle.parts.length > item.parts.length) {
 181 |         domStyle.parts.length = item.parts.length
 182 |       }
 183 |     } else {
 184 |       var parts = []
 185 |       for (var j = 0; j < item.parts.length; j++) {
 186 |         parts.push(addStyle(item.parts[j]))
 187 |       }
 188 |       stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
 189 |     }
 190 |   }
 191 | }
 192 | 
 193 | function createStyleElement () {
 194 |   var styleElement = document.createElement('style')
 195 |   styleElement.type = 'text/css'
 196 |   head.appendChild(styleElement)
 197 |   return styleElement
 198 | }
 199 | 
 200 | function addStyle (obj /* StyleObjectPart */) {
 201 |   var update, remove
 202 |   var styleElement = document.querySelector('style[data-vue-ssr-id~="' + obj.id + '"]')
 203 | 
 204 |   if (styleElement) {
 205 |     if (isProduction) {
 206 |       // has SSR styles and in production mode.
 207 |       // simply do nothing.
 208 |       return noop
 209 |     } else {
 210 |       // has SSR styles but in dev mode.
 211 |       // for some reason Chrome can't handle source map in server-rendered
 212 |       // style tags - source maps in <style> only works if the style tag is
 213 |       // created and inserted dynamically. So we remove the server rendered
 214 |       // styles and inject new ones.
 215 |       styleElement.parentNode.removeChild(styleElement)
 216 |     }
 217 |   }
 218 | 
 219 |   if (isOldIE) {
 220 |     // use singleton mode for IE9.
 221 |     var styleIndex = singletonCounter++
 222 |     styleElement = singletonElement || (singletonElement = createStyleElement())
 223 |     update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
 224 |     remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
 225 |   } else {
 226 |     // use multi-style-tag mode in all other cases
 227 |     styleElement = createStyleElement()
 228 |     update = applyToTag.bind(null, styleElement)
 229 |     remove = function () {
 230 |       styleElement.parentNode.removeChild(styleElement)
 231 |     }
 232 |   }
 233 | 
 234 |   update(obj)
 235 | 
 236 |   return function updateStyle (newObj /* StyleObjectPart */) {
 237 |     if (newObj) {
 238 |       if (newObj.css === obj.css &&
 239 |           newObj.media === obj.media &&
 240 |           newObj.sourceMap === obj.sourceMap) {
 241 |         return
 242 |       }
 243 |       update(obj = newObj)
 244 |     } else {
 245 |       remove()
 246 |     }
 247 |   }
 248 | }
 249 | 
 250 | var replaceText = (function () {
 251 |   var textStore = []
 252 | 
 253 |   return function (index, replacement) {
 254 |     textStore[index] = replacement
 255 |     return textStore.filter(Boolean).join('\n')
 256 |   }
 257 | })()
 258 | 
 259 | function applyToSingletonTag (styleElement, index, remove, obj) {
 260 |   var css = remove ? '' : obj.css
 261 | 
 262 |   if (styleElement.styleSheet) {
 263 |     styleElement.styleSheet.cssText = replaceText(index, css)
 264 |   } else {
 265 |     var cssNode = document.createTextNode(css)
 266 |     var childNodes = styleElement.childNodes
 267 |     if (childNodes[index]) styleElement.removeChild(childNodes[index])
 268 |     if (childNodes.length) {
 269 |       styleElement.insertBefore(cssNode, childNodes[index])
 270 |     } else {
 271 |       styleElement.appendChild(cssNode)
 272 |     }
 273 |   }
 274 | }
 275 | 
 276 | function applyToTag (styleElement, obj) {
 277 |   var css = obj.css
 278 |   var media = obj.media
 279 |   var sourceMap = obj.sourceMap
 280 | 
 281 |   if (media) {
 282 |     styleElement.setAttribute('media', media)
 283 |   }
 284 | 
 285 |   if (sourceMap) {
 286 |     // https://developer.chrome.com/devtools/docs/javascript-debugging
 287 |     // this makes source maps inside style tags work properly in Chrome
 288 |     css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
 289 |     // http://stackoverflow.com/a/26603875
 290 |     css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
 291 |   }
 292 | 
 293 |   if (styleElement.styleSheet) {
 294 |     styleElement.styleSheet.cssText = css
 295 |   } else {
 296 |     while (styleElement.firstChild) {
 297 |       styleElement.removeChild(styleElement.firstChild)
 298 |     }
 299 |     styleElement.appendChild(document.createTextNode(css))
 300 |   }
 301 | }
 302 | 
 303 | 
 304 | /***/ }),
 305 | /* 2 */
 306 | /***/ (function(module, exports) {
 307 | 
 308 | /* globals __VUE_SSR_CONTEXT__ */
 309 | 
 310 | // IMPORTANT: Do NOT use ES2015 features in this file.
 311 | // This module is a runtime utility for cleaner component module output and will
 312 | // be included in the final webpack user bundle.
 313 | 
 314 | module.exports = function normalizeComponent (
 315 |   rawScriptExports,
 316 |   compiledTemplate,
 317 |   functionalTemplate,
 318 |   injectStyles,
 319 |   scopeId,
 320 |   moduleIdentifier /* server only */
 321 | ) {
 322 |   var esModule
 323 |   var scriptExports = rawScriptExports = rawScriptExports || {}
 324 | 
 325 |   // ES6 modules interop
 326 |   var type = typeof rawScriptExports.default
 327 |   if (type === 'object' || type === 'function') {
 328 |     esModule = rawScriptExports
 329 |     scriptExports = rawScriptExports.default
 330 |   }
 331 | 
 332 |   // Vue.extend constructor export interop
 333 |   var options = typeof scriptExports === 'function'
 334 |     ? scriptExports.options
 335 |     : scriptExports
 336 | 
 337 |   // render functions
 338 |   if (compiledTemplate) {
 339 |     options.render = compiledTemplate.render
 340 |     options.staticRenderFns = compiledTemplate.staticRenderFns
 341 |     options._compiled = true
 342 |   }
 343 | 
 344 |   // functional template
 345 |   if (functionalTemplate) {
 346 |     options.functional = true
 347 |   }
 348 | 
 349 |   // scopedId
 350 |   if (scopeId) {
 351 |     options._scopeId = scopeId
 352 |   }
 353 | 
 354 |   var hook
 355 |   if (moduleIdentifier) { // server build
 356 |     hook = function (context) {
 357 |       // 2.3 injection
 358 |       context =
 359 |         context || // cached call
 360 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
 361 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
 362 |       // 2.2 with runInNewContext: true
 363 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
 364 |         context = __VUE_SSR_CONTEXT__
 365 |       }
 366 |       // inject component styles
 367 |       if (injectStyles) {
 368 |         injectStyles.call(this, context)
 369 |       }
 370 |       // register component module identifier for async chunk inferrence
 371 |       if (context && context._registeredComponents) {
 372 |         context._registeredComponents.add(moduleIdentifier)
 373 |       }
 374 |     }
 375 |     // used by ssr in case component is cached and beforeCreate
 376 |     // never gets called
 377 |     options._ssrRegister = hook
 378 |   } else if (injectStyles) {
 379 |     hook = injectStyles
 380 |   }
 381 | 
 382 |   if (hook) {
 383 |     var functional = options.functional
 384 |     var existing = functional
 385 |       ? options.render
 386 |       : options.beforeCreate
 387 | 
 388 |     if (!functional) {
 389 |       // inject component registration as beforeCreate hook
 390 |       options.beforeCreate = existing
 391 |         ? [].concat(existing, hook)
 392 |         : [hook]
 393 |     } else {
 394 |       // for template-only hot-reload because in that case the render fn doesn't
 395 |       // go through the normalizer
 396 |       options._injectStyles = hook
 397 |       // register for functioal component in vue file
 398 |       options.render = function renderWithStyleInjection (h, context) {
 399 |         hook.call(context)
 400 |         return existing(h, context)
 401 |       }
 402 |     }
 403 |   }
 404 | 
 405 |   return {
 406 |     esModule: esModule,
 407 |     exports: scriptExports,
 408 |     options: options
 409 |   }
 410 | }
 411 | 
 412 | 
 413 | /***/ }),
 414 | /* 3 */,
 415 | /* 4 */,
 416 | /* 5 */
 417 | /***/ (function(module, exports, __webpack_require__) {
 418 | 
 419 | "use strict";
 420 | 
 421 | 
 422 | Object.defineProperty(exports, "__esModule", {
 423 |   value: true
 424 | });
 425 | 
 426 | var _header = __webpack_require__(17);
 427 | 
 428 | var _header2 = _interopRequireDefault(_header);
 429 | 
 430 | var _footer = __webpack_require__(21);
 431 | 
 432 | var _footer2 = _interopRequireDefault(_footer);
 433 | 
 434 | var _todo = __webpack_require__(23);
 435 | 
 436 | var _todo2 = _interopRequireDefault(_todo);
 437 | 
 438 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 439 | 
 440 | exports.default = {
 441 |   // data () {
 442 |   //   return {
 443 |   //     msg: 'welcome to vue and webpack'
 444 |   //   }
 445 |   // }
 446 |   components: {
 447 |     Header: _header2.default,
 448 |     Todo: _todo2.default,
 449 |     Footer: _footer2.default
 450 |   }
 451 | }; //
 452 | //
 453 | //
 454 | //
 455 | //
 456 | //
 457 | //
 458 | //
 459 | //
 460 | 
 461 | /***/ }),
 462 | /* 6 */
 463 | /***/ (function(module, exports, __webpack_require__) {
 464 | 
 465 | "use strict";
 466 | 
 467 | 
 468 | Object.defineProperty(exports, "__esModule", {
 469 |   value: true
 470 | });
 471 | 
 472 | var _items = __webpack_require__(26);
 473 | 
 474 | var _items2 = _interopRequireDefault(_items);
 475 | 
 476 | var _tabs = __webpack_require__(30);
 477 | 
 478 | var _tabs2 = _interopRequireDefault(_tabs);
 479 | 
 480 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 481 | 
 482 | //
 483 | //
 484 | //
 485 | //
 486 | //
 487 | //
 488 | //
 489 | //
 490 | //
 491 | //
 492 | //
 493 | //
 494 | //
 495 | //
 496 | //
 497 | //
 498 | //
 499 | //
 500 | //
 501 | //
 502 | //
 503 | //
 504 | //
 505 | 
 506 | var id = 0;
 507 | exports.default = {
 508 |   data: function data() {
 509 |     return {
 510 |       todos: [],
 511 |       filter: 'all'
 512 |     };
 513 |   },
 514 | 
 515 |   components: {
 516 |     Item: _items2.default,
 517 |     Tabs: _tabs2.default
 518 |   },
 519 |   computed: {
 520 |     filterTodos: function filterTodos() {
 521 |       if (this.filter === 'all') {
 522 |         return this.todos;
 523 |       }
 524 |       var completed = this.filter === 'completed';
 525 |       return this.todos.filter(function (todo) {
 526 |         return completed === todo.completed;
 527 |       });
 528 |     }
 529 |   },
 530 |   methods: {
 531 |     addTodo: function addTodo(e) {
 532 |       this.todos.unshift({
 533 |         id: id++,
 534 |         content: e.target.value.trim(),
 535 |         completed: false
 536 |       });
 537 |       e.target.value = '';
 538 |     },
 539 |     deleteTodo: function deleteTodo(id) {
 540 |       this.todos.splice(this.todos.findIndex(function (todo) {
 541 |         return todo.id === id;
 542 |       }), 1);
 543 |     },
 544 |     toggleFilter: function toggleFilter(state) {
 545 |       this.filter = state;
 546 |     },
 547 |     clearAllcompleted: function clearAllcompleted() {
 548 |       this.todos = this.todos.filter(function (todo) {
 549 |         return !todo.completed;
 550 |       });
 551 |     }
 552 |   }
 553 | };
 554 | 
 555 | /***/ }),
 556 | /* 7 */
 557 | /***/ (function(module, exports, __webpack_require__) {
 558 | 
 559 | "use strict";
 560 | 
 561 | 
 562 | Object.defineProperty(exports, "__esModule", {
 563 |   value: true
 564 | });
 565 | //
 566 | //
 567 | //
 568 | //
 569 | //
 570 | //
 571 | //
 572 | //
 573 | //
 574 | //
 575 | //
 576 | 
 577 | exports.default = {
 578 |   props: {
 579 |     todo: {
 580 |       type: Object,
 581 |       required: true
 582 |     }
 583 |   },
 584 |   methods: {
 585 |     deleteTodo: function deleteTodo() {
 586 |       this.$emit('del', this.todo.id);
 587 |     }
 588 |   }
 589 | };
 590 | 
 591 | /***/ }),
 592 | /* 8 */
 593 | /***/ (function(module, exports, __webpack_require__) {
 594 | 
 595 | "use strict";
 596 | 
 597 | 
 598 | Object.defineProperty(exports, "__esModule", {
 599 |   value: true
 600 | });
 601 | //
 602 | //
 603 | //
 604 | //
 605 | //
 606 | //
 607 | //
 608 | //
 609 | //
 610 | //
 611 | //
 612 | //
 613 | //
 614 | //
 615 | 
 616 | exports.default = {
 617 |   props: {
 618 |     filter: {
 619 |       type: String,
 620 |       required: true
 621 |     },
 622 |     todos: {
 623 |       type: Array,
 624 |       required: true
 625 |     }
 626 |   },
 627 |   data: function data() {
 628 |     return {
 629 |       states: ['all', 'active', 'completed']
 630 |     };
 631 |   },
 632 | 
 633 |   computed: {
 634 |     unFinishedTodoLength: function unFinishedTodoLength() {
 635 |       return this.todos.filter(function (todo) {
 636 |         return !todo.completed;
 637 |       }).length;
 638 |     }
 639 |   },
 640 |   methods: {
 641 |     toggleFilter: function toggleFilter(state) {
 642 |       this.$emit('toggle', state);
 643 |     },
 644 |     clearAll: function clearAll() {
 645 |       this.$emit('clearAll');
 646 |     }
 647 |   }
 648 | };
 649 | 
 650 | /***/ }),
 651 | /* 9 */
 652 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 653 | 
 654 | "use strict";
 655 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 656 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(3);
 657 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__app_vue__ = __webpack_require__(13);
 658 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__assets_style_global_styl__ = __webpack_require__(36);
 659 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__assets_style_global_styl___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__assets_style_global_styl__);
 660 | 
 661 | 
 662 | 
 663 | 
 664 | 
 665 | const root = document.createElement('div')
 666 | document.body.appendChild(root)
 667 | 
 668 | new __WEBPACK_IMPORTED_MODULE_0_vue__["default"]({
 669 |   render: (h) => h(__WEBPACK_IMPORTED_MODULE_1__app_vue__["default"])
 670 | }).$mount(root)
 671 | 
 672 | /***/ }),
 673 | /* 10 */,
 674 | /* 11 */,
 675 | /* 12 */,
 676 | /* 13 */
 677 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 678 | 
 679 | "use strict";
 680 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_app_vue__ = __webpack_require__(5);
 681 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_app_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_app_vue__);
 682 | /* unused harmony namespace reexport */
 683 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_13_7_0_vue_loader_lib_template_compiler_index_id_data_v_5ef48958_hasScoped_true_buble_transforms_node_modules_13_7_0_vue_loader_lib_selector_type_template_index_0_app_vue__ = __webpack_require__(35);
 684 | var disposed = false
 685 | function injectStyle (ssrContext) {
 686 |   if (disposed) return
 687 |   __webpack_require__(14)
 688 | }
 689 | var normalizeComponent = __webpack_require__(2)
 690 | /* script */
 691 | 
 692 | 
 693 | /* template */
 694 | 
 695 | /* template functional */
 696 | var __vue_template_functional__ = false
 697 | /* styles */
 698 | var __vue_styles__ = injectStyle
 699 | /* scopeId */
 700 | var __vue_scopeId__ = "data-v-5ef48958"
 701 | /* moduleIdentifier (server only) */
 702 | var __vue_module_identifier__ = null
 703 | var Component = normalizeComponent(
 704 |   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_app_vue___default.a,
 705 |   __WEBPACK_IMPORTED_MODULE_1__node_modules_13_7_0_vue_loader_lib_template_compiler_index_id_data_v_5ef48958_hasScoped_true_buble_transforms_node_modules_13_7_0_vue_loader_lib_selector_type_template_index_0_app_vue__["a" /* default */],
 706 |   __vue_template_functional__,
 707 |   __vue_styles__,
 708 |   __vue_scopeId__,
 709 |   __vue_module_identifier__
 710 | )
 711 | Component.options.__file = "src/app.vue"
 712 | 
 713 | /* hot reload */
 714 | if (false) {(function () {
 715 |   var hotAPI = require("vue-loader/node_modules/vue-hot-reload-api")
 716 |   hotAPI.install(require("vue"), false)
 717 |   if (!hotAPI.compatible) return
 718 |   module.hot.accept()
 719 |   if (!module.hot.data) {
 720 |     hotAPI.createRecord("data-v-5ef48958", Component.options)
 721 |   } else {
 722 |     hotAPI.reload("data-v-5ef48958", Component.options)
 723 |   }
 724 |   module.hot.dispose(function (data) {
 725 |     disposed = true
 726 |   })
 727 | })()}
 728 | 
 729 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
 730 | 
 731 | 
 732 | /***/ }),
 733 | /* 14 */
 734 | /***/ (function(module, exports, __webpack_require__) {
 735 | 
 736 | // style-loader: Adds some css to the DOM by adding a <style> tag
 737 | 
 738 | // load the styles
 739 | var content = __webpack_require__(15);
 740 | if(typeof content === 'string') content = [[module.i, content, '']];
 741 | if(content.locals) module.exports = content.locals;
 742 | // add the styles to the DOM
 743 | var update = __webpack_require__(1)("74b8ae24", content, false);
 744 | // Hot Module Replacement
 745 | if(false) {
 746 |  // When the styles change, update the <style> tags
 747 |  if(!content.locals) {
 748 |    module.hot.accept("!!../node_modules/.0.28.9@css-loader/index.js!../node_modules/.13.7.0@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-5ef48958\",\"scoped\":true,\"hasInlineConfig\":false}!../node_modules/.3.0.1@stylus-loader/index.js!../node_modules/.13.7.0@vue-loader/lib/selector.js?type=styles&index=0!./app.vue", function() {
 749 |      var newContent = require("!!../node_modules/.0.28.9@css-loader/index.js!../node_modules/.13.7.0@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-5ef48958\",\"scoped\":true,\"hasInlineConfig\":false}!../node_modules/.3.0.1@stylus-loader/index.js!../node_modules/.13.7.0@vue-loader/lib/selector.js?type=styles&index=0!./app.vue");
 750 |      if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
 751 |      update(newContent);
 752 |    });
 753 |  }
 754 |  // When the module is disposed, remove the <style> tags
 755 |  module.hot.dispose(function() { update(); });
 756 | }
 757 | 
 758 | /***/ }),
 759 | /* 15 */
 760 | /***/ (function(module, exports, __webpack_require__) {
 761 | 
 762 | exports = module.exports = __webpack_require__(0)(false);
 763 | // imports
 764 | 
 765 | 
 766 | // module
 767 | exports.push([module.i, "\n#app[data-v-5ef48958] {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n#cover[data-v-5ef48958] {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: #999;\n  z-index: -1;\n  opacity: 0.2;\n}\n", ""]);
 768 | 
 769 | // exports
 770 | 
 771 | 
 772 | /***/ }),
 773 | /* 16 */
 774 | /***/ (function(module, exports) {
 775 | 
 776 | /**
 777 |  * Translates the list format produced by css-loader into something
 778 |  * easier to manipulate.
 779 |  */
 780 | module.exports = function listToStyles (parentId, list) {
 781 |   var styles = []
 782 |   var newStyles = {}
 783 |   for (var i = 0; i < list.length; i++) {
 784 |     var item = list[i]
 785 |     var id = item[0]
 786 |     var css = item[1]
 787 |     var media = item[2]
 788 |     var sourceMap = item[3]
 789 |     var part = {
 790 |       id: parentId + ':' + i,
 791 |       css: css,
 792 |       media: media,
 793 |       sourceMap: sourceMap
 794 |     }
 795 |     if (!newStyles[id]) {
 796 |       styles.push(newStyles[id] = { id: id, parts: [part] })
 797 |     } else {
 798 |       newStyles[id].parts.push(part)
 799 |     }
 800 |   }
 801 |   return styles
 802 | }
 803 | 
 804 | 
 805 | /***/ }),
 806 | /* 17 */
 807 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 808 | 
 809 | "use strict";
 810 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 811 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_13_7_0_vue_loader_lib_template_compiler_index_id_data_v_5712ee2d_hasScoped_true_buble_transforms_node_modules_13_7_0_vue_loader_lib_selector_type_template_index_0_header_vue__ = __webpack_require__(20);
 812 | var disposed = false
 813 | function injectStyle (ssrContext) {
 814 |   if (disposed) return
 815 |   __webpack_require__(18)
 816 | }
 817 | var normalizeComponent = __webpack_require__(2)
 818 | /* script */
 819 | var __vue_script__ = null
 820 | /* template */
 821 | 
 822 | /* template functional */
 823 | var __vue_template_functional__ = false
 824 | /* styles */
 825 | var __vue_styles__ = injectStyle
 826 | /* scopeId */
 827 | var __vue_scopeId__ = "data-v-5712ee2d"
 828 | /* moduleIdentifier (server only) */
 829 | var __vue_module_identifier__ = null
 830 | var Component = normalizeComponent(
 831 |   __vue_script__,
 832 |   __WEBPACK_IMPORTED_MODULE_0__node_modules_13_7_0_vue_loader_lib_template_compiler_index_id_data_v_5712ee2d_hasScoped_true_buble_transforms_node_modules_13_7_0_vue_loader_lib_selector_type_template_index_0_header_vue__["a" /* default */],
 833 |   __vue_template_functional__,
 834 |   __vue_styles__,
 835 |   __vue_scopeId__,
 836 |   __vue_module_identifier__
 837 | )
 838 | Component.options.__file = "src/todo/header.vue"
 839 | 
 840 | /* hot reload */
 841 | if (false) {(function () {
 842 |   var hotAPI = require("vue-loader/node_modules/vue-hot-reload-api")
 843 |   hotAPI.install(require("vue"), false)
 844 |   if (!hotAPI.compatible) return
 845 |   module.hot.accept()
 846 |   if (!module.hot.data) {
 847 |     hotAPI.createRecord("data-v-5712ee2d", Component.options)
 848 |   } else {
 849 |     hotAPI.reload("data-v-5712ee2d", Component.options)
 850 |   }
 851 |   module.hot.dispose(function (data) {
 852 |     disposed = true
 853 |   })
 854 | })()}
 855 | 
 856 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
 857 | 
 858 | 
 859 | /***/ }),
 860 | /* 18 */
 861 | /***/ (function(module, exports, __webpack_require__) {
 862 | 
 863 | // style-loader: Adds some css to the DOM by adding a <style> tag
 864 | 
 865 | // load the styles
 866 | var content = __webpack_require__(19);
 867 | if(typeof content === 'string') content = [[module.i, content, '']];
 868 | if(content.locals) module.exports = content.locals;
 869 | // add the styles to the DOM
 870 | var update = __webpack_require__(1)("be3fa28a", content, false);
 871 | // Hot Module Replacement
 872 | if(false) {
 873 |  // When the styles change, update the <style> tags
 874 |  if(!content.locals) {
 875 |    module.hot.accept("!!../../node_modules/.0.28.9@css-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-5712ee2d\",\"scoped\":true,\"hasInlineConfig\":false}!../../node_modules/.3.0.1@stylus-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/selector.js?type=styles&index=0!./header.vue", function() {
 876 |      var newContent = require("!!../../node_modules/.0.28.9@css-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-5712ee2d\",\"scoped\":true,\"hasInlineConfig\":false}!../../node_modules/.3.0.1@stylus-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/selector.js?type=styles&index=0!./header.vue");
 877 |      if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
 878 |      update(newContent);
 879 |    });
 880 |  }
 881 |  // When the module is disposed, remove the <style> tags
 882 |  module.hot.dispose(function() { update(); });
 883 | }
 884 | 
 885 | /***/ }),
 886 | /* 19 */
 887 | /***/ (function(module, exports, __webpack_require__) {
 888 | 
 889 | exports = module.exports = __webpack_require__(0)(false);
 890 | // imports
 891 | 
 892 | 
 893 | // module
 894 | exports.push([module.i, "\n.main-header[data-v-5712ee2d] {\n  text-align: center;\n}\n.main-header h1[data-v-5712ee2d] {\n  font-size: 100px;\n  color: rgba(175,47,47,0.4);\n  font-weight: 300;\n  margin: 20px;\n}\n", ""]);
 895 | 
 896 | // exports
 897 | 
 898 | 
 899 | /***/ }),
 900 | /* 20 */
 901 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 902 | 
 903 | "use strict";
 904 | var render = function() {
 905 |   var _vm = this
 906 |   var _h = _vm.$createElement
 907 |   var _c = _vm._self._c || _h
 908 |   return _vm._m(0)
 909 | }
 910 | var staticRenderFns = [
 911 |   function() {
 912 |     var _vm = this
 913 |     var _h = _vm.$createElement
 914 |     var _c = _vm._self._c || _h
 915 |     return _c("header", { staticClass: "main-header" }, [
 916 |       _c("h1", [_vm._v("Todo")])
 917 |     ])
 918 |   }
 919 | ]
 920 | render._withStripped = true
 921 | var esExports = { render: render, staticRenderFns: staticRenderFns }
 922 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
 923 | if (false) {
 924 |   module.hot.accept()
 925 |   if (module.hot.data) {
 926 |     require("vue-loader/node_modules/vue-hot-reload-api")      .rerender("data-v-5712ee2d", esExports)
 927 |   }
 928 | }
 929 | 
 930 | /***/ }),
 931 | /* 21 */
 932 | /***/ (function(module, exports, __webpack_require__) {
 933 | 
 934 | "use strict";
 935 | 
 936 | 
 937 | Object.defineProperty(exports, "__esModule", {
 938 |   value: true
 939 | });
 940 | 
 941 | __webpack_require__(22);
 942 | 
 943 | exports.default = {
 944 |   data: function data() {
 945 |     return {
 946 |       author: 'Ioodu'
 947 |     };
 948 |   },
 949 |   render: function render() {
 950 |     var h = arguments[0];
 951 | 
 952 |     return h(
 953 |       'footer',
 954 |       {
 955 |         attrs: { id: 'footer' }
 956 |       },
 957 |       [h(
 958 |         'span',
 959 |         null,
 960 |         ['Written by ', this.author]
 961 |       )]
 962 |     );
 963 |   }
 964 | };
 965 | 
 966 | /***/ }),
 967 | /* 22 */
 968 | /***/ (function(module, exports) {
 969 | 
 970 | // removed by extract-text-webpack-plugin
 971 | 
 972 | /***/ }),
 973 | /* 23 */
 974 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 975 | 
 976 | "use strict";
 977 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 978 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_todo_vue__ = __webpack_require__(6);
 979 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_todo_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_todo_vue__);
 980 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_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_13_7_0_vue_loader_lib_selector_type_script_index_0_todo_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
 981 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_13_7_0_vue_loader_lib_template_compiler_index_id_data_v_a0859d34_hasScoped_true_buble_transforms_node_modules_13_7_0_vue_loader_lib_selector_type_template_index_0_todo_vue__ = __webpack_require__(34);
 982 | var disposed = false
 983 | function injectStyle (ssrContext) {
 984 |   if (disposed) return
 985 |   __webpack_require__(24)
 986 | }
 987 | var normalizeComponent = __webpack_require__(2)
 988 | /* script */
 989 | 
 990 | 
 991 | /* template */
 992 | 
 993 | /* template functional */
 994 | var __vue_template_functional__ = false
 995 | /* styles */
 996 | var __vue_styles__ = injectStyle
 997 | /* scopeId */
 998 | var __vue_scopeId__ = "data-v-a0859d34"
 999 | /* moduleIdentifier (server only) */
1000 | var __vue_module_identifier__ = null
1001 | var Component = normalizeComponent(
1002 |   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_todo_vue___default.a,
1003 |   __WEBPACK_IMPORTED_MODULE_1__node_modules_13_7_0_vue_loader_lib_template_compiler_index_id_data_v_a0859d34_hasScoped_true_buble_transforms_node_modules_13_7_0_vue_loader_lib_selector_type_template_index_0_todo_vue__["a" /* default */],
1004 |   __vue_template_functional__,
1005 |   __vue_styles__,
1006 |   __vue_scopeId__,
1007 |   __vue_module_identifier__
1008 | )
1009 | Component.options.__file = "src/todo/todo.vue"
1010 | 
1011 | /* hot reload */
1012 | if (false) {(function () {
1013 |   var hotAPI = require("vue-loader/node_modules/vue-hot-reload-api")
1014 |   hotAPI.install(require("vue"), false)
1015 |   if (!hotAPI.compatible) return
1016 |   module.hot.accept()
1017 |   if (!module.hot.data) {
1018 |     hotAPI.createRecord("data-v-a0859d34", Component.options)
1019 |   } else {
1020 |     hotAPI.reload("data-v-a0859d34", Component.options)
1021 |   }
1022 |   module.hot.dispose(function (data) {
1023 |     disposed = true
1024 |   })
1025 | })()}
1026 | 
1027 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
1028 | 
1029 | 
1030 | /***/ }),
1031 | /* 24 */
1032 | /***/ (function(module, exports, __webpack_require__) {
1033 | 
1034 | // style-loader: Adds some css to the DOM by adding a <style> tag
1035 | 
1036 | // load the styles
1037 | var content = __webpack_require__(25);
1038 | if(typeof content === 'string') content = [[module.i, content, '']];
1039 | if(content.locals) module.exports = content.locals;
1040 | // add the styles to the DOM
1041 | var update = __webpack_require__(1)("0d872236", content, false);
1042 | // Hot Module Replacement
1043 | if(false) {
1044 |  // When the styles change, update the <style> tags
1045 |  if(!content.locals) {
1046 |    module.hot.accept("!!../../node_modules/.0.28.9@css-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-a0859d34\",\"scoped\":true,\"hasInlineConfig\":false}!../../node_modules/.3.0.1@stylus-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/selector.js?type=styles&index=0!./todo.vue", function() {
1047 |      var newContent = require("!!../../node_modules/.0.28.9@css-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-a0859d34\",\"scoped\":true,\"hasInlineConfig\":false}!../../node_modules/.3.0.1@stylus-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/selector.js?type=styles&index=0!./todo.vue");
1048 |      if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
1049 |      update(newContent);
1050 |    });
1051 |  }
1052 |  // When the module is disposed, remove the <style> tags
1053 |  module.hot.dispose(function() { update(); });
1054 | }
1055 | 
1056 | /***/ }),
1057 | /* 25 */
1058 | /***/ (function(module, exports, __webpack_require__) {
1059 | 
1060 | exports = module.exports = __webpack_require__(0)(false);
1061 | // imports
1062 | 
1063 | 
1064 | // module
1065 | exports.push([module.i, "\n.rel-app[data-v-a0859d34] {\n  width: 600px;\n  margin: 0 auto;\n  -webkit-box-shadow: 0 0 5px #666;\n          box-shadow: 0 0 5px #666;\n}\n.add-input[data-v-a0859d34] {\n  position: relative;\n  width: 100%;\n  font-size: 24px;\n  font-family: inherit;\n  font-weight: inherit;\n  line-height: 1.4em;\n  outline: none;\n  color: inherit;\n  padding: 6px;\n  border: 1px solid #999;\n  -webkit-box-shadow: inset 0 -1px 5px 0 rgba(0,0,0,0.5);\n          box-shadow: inset 0 -1px 5px 0 rgba(0,0,0,0.5);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  padding: 16px 16px 16px 60px;\n}\n", ""]);
1066 | 
1067 | // exports
1068 | 
1069 | 
1070 | /***/ }),
1071 | /* 26 */
1072 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1073 | 
1074 | "use strict";
1075 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
1076 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_items_vue__ = __webpack_require__(7);
1077 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_items_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_items_vue__);
1078 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_items_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_items_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
1079 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_13_7_0_vue_loader_lib_template_compiler_index_id_data_v_258641d0_hasScoped_true_buble_transforms_node_modules_13_7_0_vue_loader_lib_selector_type_template_index_0_items_vue__ = __webpack_require__(29);
1080 | var disposed = false
1081 | function injectStyle (ssrContext) {
1082 |   if (disposed) return
1083 |   __webpack_require__(27)
1084 | }
1085 | var normalizeComponent = __webpack_require__(2)
1086 | /* script */
1087 | 
1088 | 
1089 | /* template */
1090 | 
1091 | /* template functional */
1092 | var __vue_template_functional__ = false
1093 | /* styles */
1094 | var __vue_styles__ = injectStyle
1095 | /* scopeId */
1096 | var __vue_scopeId__ = "data-v-258641d0"
1097 | /* moduleIdentifier (server only) */
1098 | var __vue_module_identifier__ = null
1099 | var Component = normalizeComponent(
1100 |   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_items_vue___default.a,
1101 |   __WEBPACK_IMPORTED_MODULE_1__node_modules_13_7_0_vue_loader_lib_template_compiler_index_id_data_v_258641d0_hasScoped_true_buble_transforms_node_modules_13_7_0_vue_loader_lib_selector_type_template_index_0_items_vue__["a" /* default */],
1102 |   __vue_template_functional__,
1103 |   __vue_styles__,
1104 |   __vue_scopeId__,
1105 |   __vue_module_identifier__
1106 | )
1107 | Component.options.__file = "src/todo/items.vue"
1108 | 
1109 | /* hot reload */
1110 | if (false) {(function () {
1111 |   var hotAPI = require("vue-loader/node_modules/vue-hot-reload-api")
1112 |   hotAPI.install(require("vue"), false)
1113 |   if (!hotAPI.compatible) return
1114 |   module.hot.accept()
1115 |   if (!module.hot.data) {
1116 |     hotAPI.createRecord("data-v-258641d0", Component.options)
1117 |   } else {
1118 |     hotAPI.reload("data-v-258641d0", Component.options)
1119 |   }
1120 |   module.hot.dispose(function (data) {
1121 |     disposed = true
1122 |   })
1123 | })()}
1124 | 
1125 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
1126 | 
1127 | 
1128 | /***/ }),
1129 | /* 27 */
1130 | /***/ (function(module, exports, __webpack_require__) {
1131 | 
1132 | // style-loader: Adds some css to the DOM by adding a <style> tag
1133 | 
1134 | // load the styles
1135 | var content = __webpack_require__(28);
1136 | if(typeof content === 'string') content = [[module.i, content, '']];
1137 | if(content.locals) module.exports = content.locals;
1138 | // add the styles to the DOM
1139 | var update = __webpack_require__(1)("690d5c52", content, false);
1140 | // Hot Module Replacement
1141 | if(false) {
1142 |  // When the styles change, update the <style> tags
1143 |  if(!content.locals) {
1144 |    module.hot.accept("!!../../node_modules/.0.28.9@css-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-258641d0\",\"scoped\":true,\"hasInlineConfig\":false}!../../node_modules/.3.0.1@stylus-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/selector.js?type=styles&index=0!./items.vue", function() {
1145 |      var newContent = require("!!../../node_modules/.0.28.9@css-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-258641d0\",\"scoped\":true,\"hasInlineConfig\":false}!../../node_modules/.3.0.1@stylus-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/selector.js?type=styles&index=0!./items.vue");
1146 |      if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
1147 |      update(newContent);
1148 |    });
1149 |  }
1150 |  // When the module is disposed, remove the <style> tags
1151 |  module.hot.dispose(function() { update(); });
1152 | }
1153 | 
1154 | /***/ }),
1155 | /* 28 */
1156 | /***/ (function(module, exports, __webpack_require__) {
1157 | 
1158 | exports = module.exports = __webpack_require__(0)(false);
1159 | // imports
1160 | 
1161 | 
1162 | // module
1163 | exports.push([module.i, "\n.todo-item[data-v-258641d0] {\n  position: relative;\n  background: #fff;\n  font-size: 24px;\n  border-bottom: 1px solid rgba(0,0,0,0.06);\n}\n.todo-item:hover .delete[data-v-258641d0]:after {\n  content: 'x';\n}\n.todo-item label[data-v-258641d0] {\n  white-space: pre-line;\n  word-break: break-all;\n  padding: 15px 60px 15px 15px;\n  margin-left: 45px;\n  display: block;\n  line-height: 1.2;\n  -webkit-transition: color 0.4s;\n  transition: color 0.4s;\n}\n.completed label[data-v-258641d0] {\n  color: #d9d9d9;\n  text-decoration: line-through;\n}\n.toggle[data-v-258641d0] {\n  text-align: center;\n  width: 400px;\n  height: 40px;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  margin: auto 0;\n  border: none;\n  outline: none;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n.delete[data-v-258641d0] {\n  position: absolute;\n  top: 50%;\n  right: 10px;\n}\n", ""]);
1164 | 
1165 | // exports
1166 | 
1167 | 
1168 | /***/ }),
1169 | /* 29 */
1170 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1171 | 
1172 | "use strict";
1173 | var render = function() {
1174 |   var _vm = this
1175 |   var _h = _vm.$createElement
1176 |   var _c = _vm._self._c || _h
1177 |   return _c(
1178 |     "div",
1179 |     { class: ["todo-item", _vm.todo.completed ? "completed" : ""] },
1180 |     [
1181 |       _c("input", {
1182 |         directives: [
1183 |           {
1184 |             name: "model",
1185 |             rawName: "v-model",
1186 |             value: _vm.todo.completed,
1187 |             expression: "todo.completed"
1188 |           }
1189 |         ],
1190 |         staticClass: "toggle",
1191 |         attrs: { type: "checkbox" },
1192 |         domProps: {
1193 |           checked: Array.isArray(_vm.todo.completed)
1194 |             ? _vm._i(_vm.todo.completed, null) > -1
1195 |             : _vm.todo.completed
1196 |         },
1197 |         on: {
1198 |           change: function($event) {
1199 |             var $$a = _vm.todo.completed,
1200 |               $$el = $event.target,
1201 |               $$c = $$el.checked ? true : false
1202 |             if (Array.isArray($$a)) {
1203 |               var $$v = null,
1204 |                 $$i = _vm._i($$a, $$v)
1205 |               if ($$el.checked) {
1206 |                 $$i < 0 && (_vm.todo.completed = $$a.concat([$$v]))
1207 |               } else {
1208 |                 $$i > -1 &&
1209 |                   (_vm.todo.completed = $$a
1210 |                     .slice(0, $$i)
1211 |                     .concat($$a.slice($$i + 1)))
1212 |               }
1213 |             } else {
1214 |               _vm.$set(_vm.todo, "completed", $$c)
1215 |             }
1216 |           }
1217 |         }
1218 |       }),
1219 |       _vm._v(" "),
1220 |       _c("label", { attrs: { for: "" } }, [_vm._v(_vm._s(_vm.todo.content))]),
1221 |       _vm._v(" "),
1222 |       _c("button", { staticClass: "delete", on: { click: _vm.deleteTodo } })
1223 |     ]
1224 |   )
1225 | }
1226 | var staticRenderFns = []
1227 | render._withStripped = true
1228 | var esExports = { render: render, staticRenderFns: staticRenderFns }
1229 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
1230 | if (false) {
1231 |   module.hot.accept()
1232 |   if (module.hot.data) {
1233 |     require("vue-loader/node_modules/vue-hot-reload-api")      .rerender("data-v-258641d0", esExports)
1234 |   }
1235 | }
1236 | 
1237 | /***/ }),
1238 | /* 30 */
1239 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1240 | 
1241 | "use strict";
1242 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
1243 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_tabs_vue__ = __webpack_require__(8);
1244 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_tabs_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_tabs_vue__);
1245 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_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_13_7_0_vue_loader_lib_selector_type_script_index_0_tabs_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
1246 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_13_7_0_vue_loader_lib_template_compiler_index_id_data_v_7016bec4_hasScoped_true_buble_transforms_node_modules_13_7_0_vue_loader_lib_selector_type_template_index_0_tabs_vue__ = __webpack_require__(33);
1247 | var disposed = false
1248 | function injectStyle (ssrContext) {
1249 |   if (disposed) return
1250 |   __webpack_require__(31)
1251 | }
1252 | var normalizeComponent = __webpack_require__(2)
1253 | /* script */
1254 | 
1255 | 
1256 | /* template */
1257 | 
1258 | /* template functional */
1259 | var __vue_template_functional__ = false
1260 | /* styles */
1261 | var __vue_styles__ = injectStyle
1262 | /* scopeId */
1263 | var __vue_scopeId__ = "data-v-7016bec4"
1264 | /* moduleIdentifier (server only) */
1265 | var __vue_module_identifier__ = null
1266 | var Component = normalizeComponent(
1267 |   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_13_7_0_vue_loader_lib_selector_type_script_index_0_tabs_vue___default.a,
1268 |   __WEBPACK_IMPORTED_MODULE_1__node_modules_13_7_0_vue_loader_lib_template_compiler_index_id_data_v_7016bec4_hasScoped_true_buble_transforms_node_modules_13_7_0_vue_loader_lib_selector_type_template_index_0_tabs_vue__["a" /* default */],
1269 |   __vue_template_functional__,
1270 |   __vue_styles__,
1271 |   __vue_scopeId__,
1272 |   __vue_module_identifier__
1273 | )
1274 | Component.options.__file = "src/todo/tabs.vue"
1275 | 
1276 | /* hot reload */
1277 | if (false) {(function () {
1278 |   var hotAPI = require("vue-loader/node_modules/vue-hot-reload-api")
1279 |   hotAPI.install(require("vue"), false)
1280 |   if (!hotAPI.compatible) return
1281 |   module.hot.accept()
1282 |   if (!module.hot.data) {
1283 |     hotAPI.createRecord("data-v-7016bec4", Component.options)
1284 |   } else {
1285 |     hotAPI.reload("data-v-7016bec4", Component.options)
1286 |   }
1287 |   module.hot.dispose(function (data) {
1288 |     disposed = true
1289 |   })
1290 | })()}
1291 | 
1292 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
1293 | 
1294 | 
1295 | /***/ }),
1296 | /* 31 */
1297 | /***/ (function(module, exports, __webpack_require__) {
1298 | 
1299 | // style-loader: Adds some css to the DOM by adding a <style> tag
1300 | 
1301 | // load the styles
1302 | var content = __webpack_require__(32);
1303 | if(typeof content === 'string') content = [[module.i, content, '']];
1304 | if(content.locals) module.exports = content.locals;
1305 | // add the styles to the DOM
1306 | var update = __webpack_require__(1)("1f9ba907", content, false);
1307 | // Hot Module Replacement
1308 | if(false) {
1309 |  // When the styles change, update the <style> tags
1310 |  if(!content.locals) {
1311 |    module.hot.accept("!!../../node_modules/.0.28.9@css-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-7016bec4\",\"scoped\":true,\"hasInlineConfig\":false}!../../node_modules/.3.0.1@stylus-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/selector.js?type=styles&index=0!./tabs.vue", function() {
1312 |      var newContent = require("!!../../node_modules/.0.28.9@css-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-7016bec4\",\"scoped\":true,\"hasInlineConfig\":false}!../../node_modules/.3.0.1@stylus-loader/index.js!../../node_modules/.13.7.0@vue-loader/lib/selector.js?type=styles&index=0!./tabs.vue");
1313 |      if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
1314 |      update(newContent);
1315 |    });
1316 |  }
1317 |  // When the module is disposed, remove the <style> tags
1318 |  module.hot.dispose(function() { update(); });
1319 | }
1320 | 
1321 | /***/ }),
1322 | /* 32 */
1323 | /***/ (function(module, exports, __webpack_require__) {
1324 | 
1325 | exports = module.exports = __webpack_require__(0)(false);
1326 | // imports
1327 | 
1328 | 
1329 | // module
1330 | exports.push([module.i, "\n.helper[data-v-7016bec4] {\n  font-weight: 100;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: distribute;\n      justify-content: space-around;\n  padding: 5px 0;\n  line-height: 30px;\n  background-color: #fff;\n  font-size: 14px;\n  font-smoothing: antialiased;\n}\n.left[data-v-7016bec4],\n.clear[data-v-7016bec4],\n.tabs[data-v-7016bec4] {\n  padding: 0 10px;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n.left[data-v-7016bec4],\n.clear[data-v-7016bec4] {\n  width: 150px;\n}\n.left[data-v-7016bec4] {\n  text-align: left;\n}\n.clear[data-v-7016bec4] {\n  text-align: right;\n  cursor: pointer;\n}\n.tabs[data-v-7016bec4] {\n  width: 200px;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: distribute;\n      justify-content: space-around;\n}\n.tabs *[data-v-7016bec4] {\n  display: inline-block;\n  padding: 0 10px;\n  cursor: pointer;\n  border: 1px solid rgba(175,47,47,0);\n}\n.tabs *.actived[data-v-7016bec4] {\n  border-color: rgba(175,47,47,0.4);\n  border-radius: 5px;\n}\n", ""]);
1331 | 
1332 | // exports
1333 | 
1334 | 
1335 | /***/ }),
1336 | /* 33 */
1337 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1338 | 
1339 | "use strict";
1340 | var render = function() {
1341 |   var _vm = this
1342 |   var _h = _vm.$createElement
1343 |   var _c = _vm._self._c || _h
1344 |   return _c("div", { staticClass: "helper" }, [
1345 |     _c("span", { staticClass: "left" }, [
1346 |       _vm._v(_vm._s(_vm.unFinishedTodoLength) + " items left")
1347 |     ]),
1348 |     _vm._v(" "),
1349 |     _c(
1350 |       "span",
1351 |       { staticClass: "tabs" },
1352 |       _vm._l(_vm.states, function(state) {
1353 |         return _c(
1354 |           "span",
1355 |           {
1356 |             key: state,
1357 |             class: [state, _vm.filter === state ? "actived" : ""],
1358 |             on: {
1359 |               click: function($event) {
1360 |                 _vm.toggleFilter(state)
1361 |               }
1362 |             }
1363 |           },
1364 |           [_vm._v(_vm._s(state))]
1365 |         )
1366 |       })
1367 |     ),
1368 |     _vm._v(" "),
1369 |     _c("span", { staticClass: "clear", on: { click: _vm.clearAll } }, [
1370 |       _vm._v("Clear All completed")
1371 |     ])
1372 |   ])
1373 | }
1374 | var staticRenderFns = []
1375 | render._withStripped = true
1376 | var esExports = { render: render, staticRenderFns: staticRenderFns }
1377 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
1378 | if (false) {
1379 |   module.hot.accept()
1380 |   if (module.hot.data) {
1381 |     require("vue-loader/node_modules/vue-hot-reload-api")      .rerender("data-v-7016bec4", esExports)
1382 |   }
1383 | }
1384 | 
1385 | /***/ }),
1386 | /* 34 */
1387 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1388 | 
1389 | "use strict";
1390 | var render = function() {
1391 |   var _vm = this
1392 |   var _h = _vm.$createElement
1393 |   var _c = _vm._self._c || _h
1394 |   return _c(
1395 |     "section",
1396 |     { staticClass: "rel-app" },
1397 |     [
1398 |       _c("input", {
1399 |         staticClass: "add-input",
1400 |         attrs: {
1401 |           type: "text",
1402 |           autofocus: "autofocus",
1403 |           placeholder: "What's to do next? "
1404 |         },
1405 |         on: {
1406 |           keyup: function($event) {
1407 |             if (
1408 |               !("button" in $event) &&
1409 |               _vm._k($event.keyCode, "enter", 13, $event.key)
1410 |             ) {
1411 |               return null
1412 |             }
1413 |             _vm.addTodo($event)
1414 |           }
1415 |         }
1416 |       }),
1417 |       _vm._v(" "),
1418 |       _vm._l(_vm.filterTodos, function(todo) {
1419 |         return _c("item", {
1420 |           key: todo.id,
1421 |           attrs: { todo: todo },
1422 |           on: { del: _vm.deleteTodo }
1423 |         })
1424 |       }),
1425 |       _vm._v(" "),
1426 |       _c("Tabs", {
1427 |         attrs: { filter: _vm.filter, todos: _vm.todos },
1428 |         on: { toggle: _vm.toggleFilter, clearAll: _vm.clearAllcompleted }
1429 |       })
1430 |     ],
1431 |     2
1432 |   )
1433 | }
1434 | var staticRenderFns = []
1435 | render._withStripped = true
1436 | var esExports = { render: render, staticRenderFns: staticRenderFns }
1437 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
1438 | if (false) {
1439 |   module.hot.accept()
1440 |   if (module.hot.data) {
1441 |     require("vue-loader/node_modules/vue-hot-reload-api")      .rerender("data-v-a0859d34", esExports)
1442 |   }
1443 | }
1444 | 
1445 | /***/ }),
1446 | /* 35 */
1447 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
1448 | 
1449 | "use strict";
1450 | var render = function() {
1451 |   var _vm = this
1452 |   var _h = _vm.$createElement
1453 |   var _c = _vm._self._c || _h
1454 |   return _c(
1455 |     "div",
1456 |     { attrs: { id: "app" } },
1457 |     [
1458 |       _c("div", { attrs: { id: "cover" } }),
1459 |       _vm._v(" "),
1460 |       _c("Header"),
1461 |       _vm._v(" "),
1462 |       _c("Todo"),
1463 |       _vm._v(" "),
1464 |       _c("Footer")
1465 |     ],
1466 |     1
1467 |   )
1468 | }
1469 | var staticRenderFns = []
1470 | render._withStripped = true
1471 | var esExports = { render: render, staticRenderFns: staticRenderFns }
1472 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
1473 | if (false) {
1474 |   module.hot.accept()
1475 |   if (module.hot.data) {
1476 |     require("vue-loader/node_modules/vue-hot-reload-api")      .rerender("data-v-5ef48958", esExports)
1477 |   }
1478 | }
1479 | 
1480 | /***/ }),
1481 | /* 36 */
1482 | /***/ (function(module, exports) {
1483 | 
1484 | // removed by extract-text-webpack-plugin
1485 | 
1486 | /***/ })
1487 | ],[9]);


--------------------------------------------------------------------------------
/dist/bg.urloader.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chinadbo/vue-webpack-start/506e48c37c479e27d48986aef8568207b1a8b3b5/dist/bg.urloader.jpg


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 |   <head>
4 |     <meta charset="UTF-8">
5 |     <title>Webpack App</title>
6 |   <link href="style.fa126bd4.css" rel="stylesheet"></head>
7 |   <body>
8 |   <script type="text/javascript" src="runtime.12b274d9.js"></script><script type="text/javascript" src="vendor.95490bef.js"></script><script type="text/javascript" src="app.762ed07e.js"></script></body>
9 | </html>


--------------------------------------------------------------------------------
/dist/runtime.12b274d9.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":"762ed07e","1":"95490bef"}[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/style.fa126bd4.css:
--------------------------------------------------------------------------------
 1 | #footer {
 2 |   text-align: center;
 3 |   margin-top: 40px;
 4 |   color: #000;
 5 |   font-size: 10;
 6 |   text-shadow: 0 1px 0 #bfbfbf;
 7 | }
 8 | html,
 9 | body {
10 |   margin: 0;
11 |   padding: 0;
12 |   width: 100%;
13 |   height: 100%;
14 | }
15 | body {
16 |   background-image: url(bg.urloader.jpg);
17 |   background-size: cover;
18 |   background-position: center center;
19 |   font-size: 14px;
20 |   color: #4d4d4d;
21 |   font-weight: 300;
22 |   font-smoothing: antialiased;
23 | }
24 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Document</title>
 6 | </head>
 7 | <body>
 8 |   <script src="dist/bundle.js"></script>
 9 | </body>
10 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-webpack-demo",
 3 |   "version": "1.0.0",
 4 |   "description": "vue webpack",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "cross-env NODE_ENV=roduction webpack --config webpack.config.js",
 9 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/chinadbo/vue-webpack-start.git"
14 |   },
15 |   "keywords": [],
16 |   "author": "Ioodu <chinadbo@gmail.com>",
17 |   "license": "ISC",
18 |   "bugs": {
19 |     "url": "https://github.com/chinadbo/vue-webpack-start/issues"
20 |   },
21 |   "homepage": "https://github.com/chinadbo/vue-webpack-start#readme",
22 |   "dependencies": {
23 |     "autoprefixer": "^7.2.5",
24 |     "babel-core": "^6.26.0",
25 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
26 |     "babel-loader": "^7.1.2",
27 |     "babel-plugin-syntax-jsx": "^6.18.0",
28 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
29 |     "babel-preset-env": "^1.6.1",
30 |     "css-loader": "^0.28.9",
31 |     "extract-text-webpack-plugin": "^3.0.2",
32 |     "file-loader": "^1.1.6",
33 |     "html-webpack-plugin": "^2.30.1",
34 |     "postcss": "^6.0.16",
35 |     "postcss-loader": "^2.0.10",
36 |     "style-loader": "^0.19.1",
37 |     "stylus": "^0.54.5",
38 |     "stylus-loader": "^3.0.1",
39 |     "url-loader": "^0.6.2",
40 |     "vue": "^2.5.13",
41 |     "vue-loader": "^13.7.0",
42 |     "vue-template-compiler": "^2.5.13",
43 |     "webpack": "^3.10.0"
44 |   },
45 |   "devDependencies": {
46 |     "cross-env": "^5.1.3",
47 |     "webpack-dev-server": "^2.11.0"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | const autoprefixer = require('autoprefixer')
2 | 
3 | module.exports = {
4 |   plugins: [
5 |     autoprefixer()
6 |   ]
7 | }


--------------------------------------------------------------------------------
/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 | 
15 | export default {
16 |   // data () {
17 |   //   return {
18 |   //     msg: 'welcome to vue and webpack'
19 |   //   }
20 |   // }
21 |   components: {
22 |     Header,
23 |     Todo,
24 |     Footer,
25 |   }
26 | }
27 | </script>
28 | 
29 | <style lang="stylus" scoped>
30 |   #app
31 |     position absolute
32 |     left 0
33 |     right 0
34 |     top 0
35 |     bottom 0
36 |   #cover
37 |     position absolute
38 |     left 0
39 |     right 0
40 |     top 0
41 |     bottom 0
42 |     background-color #999
43 |     z-index -1
44 |     opacity .2
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/assets/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chinadbo/vue-webpack-start/506e48c37c479e27d48986aef8568207b1a8b3b5/src/assets/img/bg.jpg


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


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


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


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


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


--------------------------------------------------------------------------------
/src/todo/items.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="['todo-item', todo.completed ? 'completed' : '']">
 3 |     <input 
 4 |       type="checkbox" 
 5 |       v-model="todo.completed" 
 6 |       class="toggle"
 7 |     >
 8 |     <label for="">{{todo.content}}</label>
 9 |     <button class="delete" @click="deleteTodo"></button>
10 |   </div>
11 | </template>
12 | <script>
13 | export default {
14 |   props: {
15 |     todo: {
16 |       type: Object,
17 |       required: true
18 |     }
19 |   },
20 |   methods: {
21 |     deleteTodo(){
22 |       this.$emit('del', this.todo.id)
23 |     }
24 |   }
25 | }
26 | </script>
27 | 
28 | <style lang="stylus" scoped>
29 | .todo-item  
30 |   position relative
31 |   background #ffffff
32 |   font-size 24px
33 |   border-bottom 1px solid rgba(0,0,0,.06)
34 |   &:hover
35 |     .delete:after 
36 |       content: 'x'
37 |   label  
38 |     white-space pre-line
39 |     word-break break-all
40 |     padding 15px 60px 15px 15px
41 |     margin-left 45px
42 |     display block 
43 |     line-height 1.2
44 |     transition color 0.4s
45 | &.completed
46 |   label 
47 |     color #d9d9d9
48 |     text-decoration line-through
49 | .toggle
50 |   text-align center 
51 |   width 400px
52 |   height 40px
53 |   position absolute
54 |   top 0
55 |   bottom 0
56 |   margin auto 0
57 |   border none 
58 |   outline none 
59 |   appearance none
60 | .delete
61 |   position absolute
62 |   top 50%
63 |   right 10px
64 | </style>
65 | 


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


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


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path')
  2 | const isDev = process.env.NODE_ENV === 'development'
  3 | const HTMLPlugin = require('html-webpack-plugin')
  4 | const ExtractPlugin = require('extract-text-webpack-plugin')
  5 | 
  6 | const webpack = require('webpack')
  7 | const config = {
  8 |   target: '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 |       // {
 17 |       //   test: /\.css$/,
 18 |       //   use: [
 19 |       //     'style-loader',
 20 |       //     'css-loader'
 21 |       //   ]
 22 |       // },
 23 |       {
 24 |         test: /\.vue$/,
 25 |         loader: 'vue-loader'
 26 |       },
 27 |       {
 28 |         test: /\.jsx$/,
 29 |         loader: 'babel-loader'
 30 |       },
 31 |       {
 32 |         test: /\.(gif|png|jpe?g|svg)$/,
 33 |         use: [
 34 |           {
 35 |             loader: 'url-loader',
 36 |             options: {
 37 |               limit: 1024,
 38 |               name: '[name].urloader.[ext]'
 39 |             }
 40 |           }
 41 |         ]
 42 |       }
 43 |     ]
 44 |   },
 45 |   plugins: [
 46 |     new webpack.DefinePlugin({
 47 |       'process.env': {
 48 |         NODE_ENV: isDev ? '"development"' : '"production"'
 49 |       }
 50 |     }),
 51 |     new HTMLPlugin()
 52 |   ]
 53 | }
 54 | 
 55 | if (isDev) {
 56 |   config.module.rules.push({
 57 |     test: /\.styl$/,
 58 |     use: [
 59 |       'style-loader',
 60 |       'css-loader',
 61 |       {
 62 |         loader: 'postcss-loader',
 63 |         options: {
 64 |           sourceMap: true
 65 |         }
 66 |       },
 67 |       'stylus-loader'
 68 |     ]
 69 |   })
 70 |   config.devtool = '#cheap-module-eval-source-map'
 71 |   config.devServer = {
 72 |     port: 8000,
 73 |     host: '0.0.0.0',
 74 |     overlay: {
 75 |       errors: true
 76 |     },
 77 |     hot: true,
 78 |   }
 79 |   config.plugins.push(
 80 |     new webpack.HotModuleReplacementPlugin(),
 81 |     new webpack.NoEmitOnErrorsPlugin()
 82 |   )
 83 | } else {
 84 |   config.entry = {
 85 |     app: path.join(__dirname, 'src/index.js'),
 86 |     vendor: ['vue']
 87 |   }
 88 |   config.output.filename = '[name].[chunkhash:8].js'
 89 |   config.module.rules.push({
 90 |     test: /\.styl$/,
 91 |     use: ExtractPlugin.extract({
 92 |       fallback: 'style-loader',
 93 |       use: [
 94 |         'css-loader',
 95 |         {
 96 |           loader: 'postcss-loader',
 97 |           options: {
 98 |             sourceMap: true
 99 |           }
100 |         },
101 |         'stylus-loader'
102 |       ]
103 |     })
104 |   })
105 |   config.plugins.push(
106 |     new ExtractPlugin('style.[contentHash:8].css'),
107 |     new webpack.optimize.CommonsChunkPlugin({
108 |       name: 'vendor'
109 |     }),
110 |     new webpack.optimize.CommonsChunkPlugin({
111 |       name: 'runtime'
112 |     })
113 |   )
114 | }
115 | 
116 | module.exports = config


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