6 years ago · a5617be9c4
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
 
				 /.idea
			
 
				+node_modules
			
 
				+/.project
			
--- a/README.md
+++ b/README.md
@@ -1,2 +1,15 @@
 
				 # VUE笔记
			
 
				 
			
 
				+模板语法
			
 
				+条件语句
			
 
				+循环语句
			
 
				+计算属性
			
 
				+监听属性
			
 
				+样式绑定
			
 
				+事件处理器
			
 
				+表单
			
 
				+组件
			
 
				+自定义指令
			
 
				+路由
			
 
				+过渡 & 动画
			
 
				+
			
--- a/docs/images/1.jpg
+++ b/docs/images/1.jpg
--- a/docs/note1.md
+++ b/docs/note1.md
@@ -0,0 +1,24 @@
 
				+# note1
			
 
				+
			
 
				+## 入门
			
 
				+* 新建index2.html，引入vue.js
			
 
				+* 添加相应的div和script:
			
 
				+'''
			
 
				+<div id="app">
			
 
				+  {{ message }}
			
 
				+</div>
			
 
				+<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
			
 
				+<script>
			
 
				+new Vue({
			
 
				+    el:'#app',
			
 
				+    data: {
			
 
				+        message:'Hello World!'
			
 
				+    }
			
 
				+});
			
 
				+</script>
			
 
				+'''
			
 
				+
			
 
				+## 项目结构
			
 
				+使用了 npm 安装项目，我们在 IDE（Eclipse、Atom等） 中打开该目录，结构如下所示：
			
 
				+
			
 
				+![](images/1.jpg)
			
--- a/docs/note3.md
+++ b/docs/note3.md
@@ -0,0 +1,33 @@
 
				+# VUE控制语句
			
 
				+
			
 
				+## 条件与循环
			
 
				+
			
 
				+
			
 
				+## 循环语句
			
 
				+循环使用 v-for 指令。
			
 
				+
			
 
				+v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
			
 
				+
			
 
				+
			
 
				+'''
			
 
				+<div id="app">
			
 
				+  <ol>
			
 
				+    <li v-for="s in sites">
			
 
				+      {{ s.name }}
			
 
				+    </li>
			
 
				+  </ol>
			
 
				+</div>
			
 
				+ 
			
 
				+<script>
			
 
				+new Vue({
			
 
				+  el: '#app',
			
 
				+  data: {
			
 
				+    sites: [
			
 
				+      { name: 'Runoob.com' },
			
 
				+      { name: 'Google.com' },
			
 
				+      { name: 'Taobao.com' }
			
 
				+    ]
			
 
				+  }
			
 
				+})
			
 
				+</script>
			
 
				+'''
			
--- a/note1/index2.html
+++ b/note1/index2.html
@@ -0,0 +1,22 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>测试</title>
			
 
				+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="app">
			
 
				+  {{ message }}
			
 
				+</div>
			
 
				+<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
			
 
				+<script>
			
 
				+new Vue({
			
 
				+    el:'#app',
			
 
				+    data: {
			
 
				+        message:'Hello World!'
			
 
				+    }
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/note1/router/index.html
+++ b/note1/router/index.html
@@ -0,0 +1,58 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
			
 
				+<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
			
 
				+<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="app">
			
 
				+  <h1>Hello App!</h1>
			
 
				+  <p>
			
 
				+    <!-- 使用 router-link 组件来导航. -->
			
 
				+    <!-- 通过传入 `to` 属性指定链接. -->
			
 
				+    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			
 
				+    <router-link to="/foo">Go to Foo</router-link>
			
 
				+    <router-link to="/bar">Go to Bar</router-link>
			
 
				+  </p>
			
 
				+  <!-- 路由出口 -->
			
 
				+  <!-- 路由匹配到的组件将渲染在这里 -->
			
 
				+  <router-view></router-view>
			
 
				+</div>
			
 
				+
			
 
				+<script>
			
 
				+// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
			
 
				+
			
 
				+// 1. 定义（路由）组件。
			
 
				+// 可以从其他文件 import 进来
			
 
				+const Foo = { template: '<div>foo</div>' }
			
 
				+const Bar = { template: '<div>bar</div>' }
			
 
				+
			
 
				+// 2. 定义路由
			
 
				+// 每个路由应该映射一个组件。 其中"component" 可以是
			
 
				+// 通过 Vue.extend() 创建的组件构造器，
			
 
				+// 或者，只是一个组件配置对象。
			
 
				+// 我们晚点再讨论嵌套路由。
			
 
				+const routes = [
			
 
				+  { path: '/foo', component: Foo },
			
 
				+  { path: '/bar', component: Bar }
			
 
				+]
			
 
				+
			
 
				+// 3. 创建 router 实例，然后传 `routes` 配置
			
 
				+// 你还可以传别的配置参数, 不过先这么简单着吧。
			
 
				+const router = new VueRouter({
			
 
				+  routes // （缩写）相当于 routes: routes
			
 
				+})
			
 
				+
			
 
				+// 4. 创建和挂载根实例。
			
 
				+// 记得要通过 router 配置参数注入路由，
			
 
				+// 从而让整个应用都有路由功能
			
 
				+const app = new Vue({
			
 
				+  router
			
 
				+}).$mount('#app')
			
 
				+
			
 
				+// 现在，应用已经启动了！
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/note1/transition/index.html
+++ b/note1/transition/index.html
@@ -0,0 +1,40 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
			
 
				+<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
			
 
				+<style>
			
 
				+/* 可以设置不同的进入和离开动画 */
			
 
				+/* 设置持续时间和动画函数 */
			
 
				+.fade-enter-active, .fade-leave-active {
			
 
				+    transition: opacity 2s
			
 
				+}
			
 
				+.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
			
 
				+    opacity: 0
			
 
				+}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id = "databinding">
			
 
				+<button v-on:click = "show = !show">点我</button>
			
 
				+<transition name = "fade">
			
 
				+    <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
			
 
				+</transition>
			
 
				+</div>
			
 
				+<script type = "text/javascript">
			
 
				+var vm = new Vue({
			
 
				+el: '#databinding',
			
 
				+    data: {
			
 
				+        show:true,
			
 
				+        styleobj :{
			
 
				+            fontSize:'30px',
			
 
				+            color:'red'
			
 
				+        }
			
 
				+    },
			
 
				+    methods : {
			
 
				+    }
			
 
				+});
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/note1/transition/index2.html
+++ b/note1/transition/index2.html
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
			
 
				+<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
			
 
				+<style>
			
 
				+.bounce-enter-active {
			
 
				+  animation: bounce-in .5s;
			
 
				+}
			
 
				+.bounce-leave-active {
			
 
				+  animation: bounce-in .5s reverse;
			
 
				+}
			
 
				+@keyframes bounce-in {
			
 
				+  0% {
			
 
				+    transform: scale(0);
			
 
				+  }
			
 
				+  50% {
			
 
				+    transform: scale(1.5);
			
 
				+  }
			
 
				+  100% {
			
 
				+    transform: scale(1);
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id = "databinding">
			
 
				+<button v-on:click = "show = !show">点我</button>
			
 
				+<transition name="bounce">
			
 
				+    <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
			
 
				+</transition>
			
 
				+</div>
			
 
				+<script type = "text/javascript">
			
 
				+new Vue({
			
 
				+    el: '#databinding',
			
 
				+    data: {
			
 
				+        show: true
			
 
				+    }
			
 
				+})
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/note1/v-for/index3.html
+++ b/note1/v-for/index3.html
@@ -0,0 +1,30 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>json数组遍历</title>
			
 
				+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="app">
			
 
				+  <ol>
			
 
				+    <li v-for="s in sites">
			
 
				+      {{ s.name }}
			
 
				+    </li>
			
 
				+  </ol>
			
 
				+</div>
			
 
				+<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） --> 
			
 
				+<script>
			
 
				+new Vue({
			
 
				+  el: '#app',
			
 
				+  data: {
			
 
				+    sites: [
			
 
				+      { name: 'Runoob.com' },
			
 
				+      { name: 'Google.com' },
			
 
				+      { name: 'Taobao.com' }
			
 
				+    ]
			
 
				+  }
			
 
				+})
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/note1/v-for/index4.html
+++ b/note1/v-for/index4.html
@@ -0,0 +1,30 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>json对象遍历</title>
			
 
				+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="app">
			
 
				+  <ul>
			
 
				+    <li v-for="(value, key, index) in object">
			
 
				+      {{ value }}
			
 
				+    </li>
			
 
				+  </ul>
			
 
				+</div>
			
 
				+<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） --> 
			
 
				+<script>
			
 
				+new Vue({
			
 
				+  el: '#app',
			
 
				+  data: {
			
 
				+	  object: {
			
 
				+      name: '菜鸟教程',
			
 
				+      url: 'http://www.runoob.com',
			
 
				+      slogan: '学的不仅是技术，更是梦想！'
			
 
				+    }
			
 
				+  }
			
 
				+})
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/note1/v-for/index5.html
+++ b/note1/v-for/index5.html
@@ -0,0 +1,30 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>json对象遍历</title>
			
 
				+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="app">
			
 
				+  <ul>
			
 
				+    <li v-for="(value, key) in object">
			
 
				+    {{ key }} : {{ value }}
			
 
				+    </li>
			
 
				+  </ul>
			
 
				+</div>
			
 
				+<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） --> 
			
 
				+<script>
			
 
				+new Vue({
			
 
				+  el: '#app',
			
 
				+  data: {
			
 
				+	  object: {
			
 
				+      name: '菜鸟教程',
			
 
				+      url: 'http://www.runoob.com',
			
 
				+      slogan: '学的不仅是技术，更是梦想！'
			
 
				+    }
			
 
				+  }
			
 
				+})
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/note1/v-for/index6.html
+++ b/note1/v-for/index6.html
@@ -0,0 +1,30 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>json对象遍历</title>
			
 
				+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="app">
			
 
				+  <ul>
			
 
				+    <li v-for="(value, key, index) in object">
			
 
				+     {{ index }}. {{ key }} : {{ value }}
			
 
				+    </li>
			
 
				+  </ul>
			
 
				+</div>
			
 
				+<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） --> 
			
 
				+<script>
			
 
				+new Vue({
			
 
				+  el: '#app',
			
 
				+  data: {
			
 
				+	  object: {
			
 
				+      name: '菜鸟教程',
			
 
				+      url: 'http://www.runoob.com',
			
 
				+      slogan: '学的不仅是技术，更是梦想！'
			
 
				+    }
			
 
				+  }
			
 
				+})
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/note1/v-for/index7.html
+++ b/note1/v-for/index7.html
@@ -0,0 +1,23 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="utf-8">
			
 
				+<title>整数遍历</title>
			
 
				+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+<div id="app">
			
 
				+  <ul>
			
 
				+    <li v-for="n in 10">
			
 
				+     {{ n }}
			
 
				+    </li>
			
 
				+  </ul>
			
 
				+</div>
			
 
				+<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） --> 
			
 
				+<script>
			
 
				+new Vue({
			
 
				+  el: '#app',
			
 
				+})
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/note1/watch/index.html
+++ b/note1/watch/index.html
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+	<meta charset="utf-8">
			
 
				+	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
			
 
				+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
			
 
				+</head>
			
 
				+   <body>
			
 
				+      <div id = "app">
			
 
				+		         千米 : <input type = "text" v-model = "kilometers">
			
 
				+		         米 : <input type = "text" v-model = "meters">
			
 
				+      </div>
			
 
				+	   <p id="info"></p>
			
 
				+      <script type = "text/javascript">
			
 
				+         var vm = new Vue({
			
 
				+            el: '#app',
			
 
				+            data: {
			
 
				+               kilometers : 0,
			
 
				+               meters:0
			
 
				+            },
			
 
				+            methods: {
			
 
				+            },
			
 
				+            computed :{
			
 
				+            },
			
 
				+            watch : {
			
 
				+               kilometers:function(val) {
			
 
				+                  this.kilometers = val;
			
 
				+                  this.meters = val * 1000;
			
 
				+               },
			
 
				+               meters : function (val) {
			
 
				+                  this.kilometers = val/ 1000;
			
 
				+                  this.meters = val;
			
 
				+               }
			
 
				+            }
			
 
				+         });
			
 
				+         // $watch 是一个实例方法
			
 
				+		vm.$watch('kilometers', function (newValue, oldValue) {
			
 
				+			// 这个回调将在 vm.kilometers 改变后调用
			
 
				+		    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
			
 
				+		})
			
 
				+      </script>
			
 
				+   </body>
			
 
				+</html>
			
--- a/note2/README.md
+++ b/note2/README.md
@@ -0,0 +1,16 @@
 
				+# vue-notes
			
 
				+
			
 
				+> A Vue.js project
			
 
				+
			
 
				+## Build Setup
			
 
				+
			
 
				+``` bash
			
 
				+# install dependencies
			
 
				+npm install
			
 
				+
			
 
				+# serve with hot reload at localhost:8080
			
 
				+npm run dev
			
 
				+
			
 
				+# build for production with minification
			
 
				+npm run build
			
 
				+```
			
--- a/note2/index.html
+++ b/note2/index.html
@@ -0,0 +1,11 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <title>vue-notes</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app">你好VUE</div>
			
 
				+    <script src="/dist/build.js"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/note2/package.json
+++ b/note2/package.json
@@ -0,0 +1,35 @@
 
				+{
			
 
				+  "name": "vue-notes",
			
 
				+  "description": "A Vue.js 笔记项目，不断完善中。。。。",
			
 
				+  "version": "1.0.0",
			
 
				+  "author": "liuyuqi-dellpc <liuyuqi.gov@msn.cn>",
			
 
				+  "license": "Apache2.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
			
 
				+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "vue": "^2.5.11"
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not ie <= 8"
			
 
				+  ],
			
 
				+  "devDependencies": {
			
 
				+    "babel-core": "^6.26.0",
			
 
				+    "babel-loader": "^7.1.2",
			
 
				+    "babel-preset-env": "^1.6.0",
			
 
				+    "babel-preset-stage-3": "^6.24.1",
			
 
				+    "cross-env": "^5.0.5",
			
 
				+    "css-loader": "^0.28.7",
			
 
				+    "file-loader": "^1.1.4",
			
 
				+    "node-sass": "^4.5.3",
			
 
				+    "sass-loader": "^6.0.6",
			
 
				+    "vue-loader": "^13.0.5",
			
 
				+    "vue-template-compiler": "^2.4.4",
			
 
				+    "webpack": "^3.6.0",
			
 
				+    "webpack-dev-server": "^2.9.1"
			
 
				+  }
			
 
				+}
			
--- a/note2/src/App.vue
+++ b/note2/src/App.vue
@@ -0,0 +1,56 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <h1>{{ msg }}</h1>
			
 
				+    <h3>{{ url }}</h3>
			
 
				+    <h2>Essential Links</h2>  
			
 
				+    <div class="main">
			
 
				+    	<h1>测试</h1>
			
 
				+    	<h2>测试水水水水</h2>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'app',
			
 
				+  data () {
			
 
				+    return {
			
 
				+    	url:"img",
			
 
				+      msg: 'Welcome to Your Vue.js App'
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+#app {
			
 
				+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+  text-align: center;
			
 
				+  color: #2c3e50;
			
 
				+  margin-top: 60px;
			
 
				+  .main{
			
 
				+  		font-feature-settings: inherit;
			
 
				+			font-size: large;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+h1, h2 {
			
 
				+  font-weight: normal;
			
 
				+}
			
 
				+
			
 
				+ul {
			
 
				+  list-style-type: none;
			
 
				+  padding: 0;
			
 
				+}
			
 
				+
			
 
				+li {
			
 
				+  display: inline-block;
			
 
				+  margin: 0 10px;
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+  color: #42b983;
			
 
				+}
			
 
				+</style>
			
--- a/note2/src/assets/logo.png
+++ b/note2/src/assets/logo.png
--- a/note2/src/main.js
+++ b/note2/src/main.js
@@ -0,0 +1,7 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+
			
 
				+new Vue({
			
 
				+  el: '#app',
			
 
				+  render: h => h(App)
			
 
				+})
			
--- a/note2/webpack.config.js
+++ b/note2/webpack.config.js
@@ -0,0 +1,108 @@
 
				+var path = require('path')
			
 
				+var webpack = require('webpack')
			
 
				+
			
 
				+module.exports = {
			
 
				+  entry: './src/main.js',
			
 
				+  output: {
			
 
				+    path: path.resolve(__dirname, './dist'),
			
 
				+    publicPath: '/dist/',
			
 
				+    filename: 'build.js'
			
 
				+  },
			
 
				+  module: {
			
 
				+    rules: [
			
 
				+      {
			
 
				+        test: /\.css$/,
			
 
				+        use: [
			
 
				+          'vue-style-loader',
			
 
				+          'css-loader'
			
 
				+        ],
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.scss$/,
			
 
				+        use: [
			
 
				+          'vue-style-loader',
			
 
				+          'css-loader',
			
 
				+          'sass-loader'
			
 
				+        ],
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.sass$/,
			
 
				+        use: [
			
 
				+          'vue-style-loader',
			
 
				+          'css-loader',
			
 
				+          'sass-loader?indentedSyntax'
			
 
				+        ],
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.vue$/,
			
 
				+        loader: 'vue-loader',
			
 
				+        options: {
			
 
				+          loaders: {
			
 
				+            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
			
 
				+            // the "scss" and "sass" values for the lang attribute to the right configs here.
			
 
				+            // other preprocessors should work out of the box, no loader config like this necessary.
			
 
				+            'scss': [
			
 
				+              'vue-style-loader',
			
 
				+              'css-loader',
			
 
				+              'sass-loader'
			
 
				+            ],
			
 
				+            'sass': [
			
 
				+              'vue-style-loader',
			
 
				+              'css-loader',
			
 
				+              'sass-loader?indentedSyntax'
			
 
				+            ]
			
 
				+          }
			
 
				+          // other vue-loader options go here
			
 
				+        }
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.js$/,
			
 
				+        loader: 'babel-loader',
			
 
				+        exclude: /node_modules/
			
 
				+      },
			
 
				+      {
			
 
				+        test: /\.(png|jpg|gif|svg)$/,
			
 
				+        loader: 'file-loader',
			
 
				+        options: {
			
 
				+          name: '[name].[ext]?[hash]'
			
 
				+        }
			
 
				+      }
			
 
				+    ]
			
 
				+  },
			
 
				+  resolve: {
			
 
				+    alias: {
			
 
				+      'vue$': 'vue/dist/vue.esm.js'
			
 
				+    },
			
 
				+    extensions: ['*', '.js', '.vue', '.json']
			
 
				+  },
			
 
				+  devServer: {
			
 
				+    historyApiFallback: true,
			
 
				+    noInfo: true,
			
 
				+    overlay: true
			
 
				+  },
			
 
				+  performance: {
			
 
				+    hints: false
			
 
				+  },
			
 
				+  devtool: '#eval-source-map'
			
 
				+}
			
 
				+
			
 
				+if (process.env.NODE_ENV === 'production') {
			
 
				+  module.exports.devtool = '#source-map'
			
 
				+  // http://vue-loader.vuejs.org/en/workflow/production.html
			
 
				+  module.exports.plugins = (module.exports.plugins || []).concat([
			
 
				+    new webpack.DefinePlugin({
			
 
				+      'process.env': {
			
 
				+        NODE_ENV: '"production"'
			
 
				+      }
			
 
				+    }),
			
 
				+    new webpack.optimize.UglifyJsPlugin({
			
 
				+      sourceMap: true,
			
 
				+      compress: {
			
 
				+        warnings: false
			
 
				+      }
			
 
				+    }),
			
 
				+    new webpack.LoaderOptionsPlugin({
			
 
				+      minimize: true
			
 
				+    })
			
 
				+  ])
			
 
				+}