[
  {
    "path": ".gitignore",
    "content": "node_modules/\nbuild/\nd.html\nnpm-debug.log\n"
  },
  {
    "path": "Vue教程.md",
    "content": "#Vue教程\n\n[细节与最佳实践](http://vuejs.org/guide/best-practices.html)\n\n[Vue1.0.x文档](http://vuejs.org/)\n\n[Vue1.0.x绑定语法参考](https://github.com/vuejs/vue/issues/1325)\n\n[每次更新的变化](https://github.com/vuejs/vue/releases)\n\n与webpack 一起使用所需插件\n\n[vue-loader-example](https://github.com/vuejs/vue-loader-example)\n\n[vue-html-loader](https://github.com/vuejs/vue-html-loader)\n\n####文章\n`尤小右`\n\n[Vue.js：轻量高效的前端组件化方案](http://www.csdn.net/article/1970-01-01/2825439)\n\n`勾三股四`\n\n[Vue + webpack 项目实践](http://jiongks.name/blog/just-vue/)\n\n[Vue.js 源码学习笔记](http://jiongks.name/blog/vue-code-review/)\n\n`稀土掘金`\n\n[Vue 组件化开发实践](http://ftandy.github.io/2015/09/05/vue/)\n\n`Randy`\n\n[Vue.js 和 Webpack（一）为什么使用Vue](http://djyde.github.io/2015/08/29/vuejs-and-webpack-1.html)\n\n[Vue.js 和 Webpack（二）使用webpack](http://djyde.github.io/2015/08/30/vuejs-and-webpack-2.html)\n\n[Vue.js 和 Webpack（三）Vue.js + Webpack](http://djyde.github.io/2015/08/31/vuejs-and-webpack-3.html)\n\n#webpack教程\n[learn-webpack](http://vingojw.github.io/2015/08/19/learn-webpack/)\n\n#Vue-router教程\n[中文文档](http://vuejs.github.io/vue-router/zh-cn/index.html) - [英文文档](http://vuejs.github.io/vue-router/en/index.html)\n[学习笔记](https://github.com/vingojw/learn-vue-router)\n\n#技术交流\n\n[Vue技术论坛](http://forum.vuejs.org/)\n\n[Vue的聊天室，很多人在里面讨论并解决问题](https://gitter.im/vuejs/vue)\n\n#demo\n\n[qingcheng](https://github.com/zerqu/qingcheng)\n\n[vue-strap 用vue实现bootstrap](https://github.com/yuche/vue-strap)\n\n[vue-mui](https://github.com/mennghao/vue-mui)\n\n[通过学习（copy）以上两个demo，使用 Vue1.0 + VueRouter + webpack](https://github.com/vingojw/vue-vueRoute-webpack)\n\n[Chat by Vue + Webpack](https://github.com/Coffcer/vue-chat)\n\n[用Vue实现的拖拽效果](http://jsfiddle.net/lain8dono/mrnyf79e/)"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui\" />\n    <title></title>\n  <link href=\"/build/style.css\" rel=\"stylesheet\"></head>\n  <body>\n    <div id=\"app\"></div>\n  <script src=\"/build/vendor.js\"></script><script src=\"/build/build.js\"></script></body>\n</html>\n"
  },
  {
    "path": "index.tpl",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui\" />\n    <title></title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"learn-webpack\",\n  \"version\": \"1.0.0\",\n  \"main\": \"index.js\",\n  \"dependencies\": {\n    \"extract-text-webpack-plugin\": \"^0.8.2\"\n  },\n  \"devDependencies\": {\n    \"babel-core\": \"^6.3.17\",\n    \"babel-loader\": \"^6.2.0\",\n    \"babel-plugin-transform-runtime\": \"^6.3.13\",\n    \"babel-preset-es2015\": \"^6.3.13\",\n    \"babel-runtime\": \"^5.8.34\",\n    \"css-loader\": \"^0.23.0\",\n    \"cssnext-loader\": \"^1.0.1\",\n    \"fastclick\": \"^1.0.6\",\n    \"file-loader\": \"^0.8.4\",\n    \"hammerjs\": \"^2.0.6\",\n    \"html-loader\": \"^0.3.0\",\n    \"html-webpack-plugin\": \"^1.6.2\",\n    \"jshint-loader\": \"^0.8.3\",\n    \"style-loader\": \"^0.13.0\",\n    \"swiper\": \"^3.2.0\",\n    \"url-loader\": \"^0.5.6\",\n    \"vue\": \"^1.0.20\",\n    \"vue-hot-reload-api\": \"^1.2.2\",\n    \"vue-html-loader\": \"^1.1.0\",\n    \"vue-loader\": \"^8.2.0\",\n    \"vue-router\": \"^0.7.11\",\n    \"vue-style-loader\": \"^1.0.0\",\n    \"webpack\": \"^1.12.9\",\n    \"webpack-dev-server\": \"^1.14.0\",\n    \"webpack-zepto\": \"0.0.1\"\n  },\n  \"scripts\": {\n    \"mb\": \"export PRODUCTION=1 && webpack --progress --hide-modules\",\n    \"wb\": \"set PRODUCTION=1 && webpack --progress --hide-modules\",\n    \"dev\": \"webpack-dev-server --progress --profile --colors --inline \",\n    \"port\": \"webpack-dev-server --progress --colors --inline --port 9090 \",\n    \"hot\": \"webpack-dev-server --progress --colors --inline --hot\",\n    \"cp\": \"cp -r index.html ./build/ d:/wamp/www/vue\",\n    \"ip\": \"webpack-dev-server  --progress --colors --hot --host=0.0.0.0  --port 9000\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\"\n}\n"
  },
  {
    "path": "readme.md",
    "content": "## Setup\n``` bash\nnpm install\nnpm run dev\n```\n访问 localhost:8080\n\n如果想在手机上查看\n\n```\nnpm run ip\n```\n访问 你本地的ip:9000\n\n## 版本控制，打包压缩\nMAC\n\n```\nnpm run mb\n```\n\nwindows\n\n```\nnpm run wb\n```\n\n## 目录结构\n<pre>\n│  .gitignore          # 忽略无需git控制的文件  比如 node_modules\n│  package.json        # 项目配置\n│  readme.md           # 项目说明\n│  index.html          # 首页\n│  index.tpl           # 首页模板  在发布的时候 执行 PRODUCTION=1 webpack 会生成一个d.html并注入脚本，样式，达到版本控制的目的\n│  webpack.config.js   # webpack 配置文件\n│\n├─node_modules\n└─src\n    │  app.js          # 启动配置，配置路由，过滤器\n    │  app.vue         # 主vue\n    │  filters.js      # 过滤器\n    │  routers.js      # 路由\n    │\n    ├─components       # 组件\n    │      my-component.vue\n    │\n    ├─css              # 公用样式\n    │      common.css\n    │\n    └─views            # 页面\n            about.vue\n            home.vue\n            not-found.vue\n</pre>\n\n##学习参考：\n[qingcheng](https://github.com/zerqu/qingcheng)\n\n[vue-strap](https://github.com/yuche/vue-strap)\n\n##项目\n[m.yaomaiche.com](http://m.yaomaiche.com)\n\n"
  },
  {
    "path": "src/app.js",
    "content": "\nrequire('./css/common.css');//加载公共样式\nrequire('./css/animate.css');//加载公共样式\n\nvar Vue = require('vue');\nvar VueTouch = require('./vtouch');\nvar VueRouter = require('vue-router');\nvar fastclick = require('fastclick');\nfastclick.attach(document.body);\n\n// register filters 自定义过滤器  金额格式化，\nvar filters = require('./filters');\n\nObject.keys(filters).forEach(function(k) {\n  Vue.filter(k, filters[k]);\n});\n\nvar App = Vue.extend(require('./app.vue'));\n\n\n/*\n    如果还想声明一个vue实例\n\t要放在 Vue.use(VueRouter); 之前\n\t因为当使用了 Vue.use(VueRouter)后，改写了 Vue 的实例化方法。\n */\n//var newV = new Vue();//注意看上面说明\n\nVue.use(VueTouch);\nVue.use(VueRouter);\n\nvar router = new VueRouter(\n\t{\n\t  hashbang: true,  //为true的时候 example.com/#!/foo/bar ， false的时候 example.com/#/foo/bar\n\t  //abstract:true,  //地址栏不会有变化\n\t  //以下设置需要服务端设置\n\t  //history: false,   //当使用 HTML5 history 模式时，服务器需要被正确配置 以防用户在直接访问链接时会遇到404页面。\n\t  //saveScrollPosition: false\n\t  linkActiveClass:'custom-active-class' //全局设置连接匹配时的类名 参考http://vuejs.github.io/vue-router/en/link.html\n\t}\n);\n\nrequire('./routers')(router);\n\nrouter.start(App,'#app');"
  },
  {
    "path": "src/app.vue",
    "content": "<style>\n\n\n\n/*\n关于 v-cloak 参考： http://vuejs.org/api/#v-cloak\n\n*/\n[v-cloak] {\n  display: none;\n}\n\n\n.view {\n  transition: all .3s ease;\n  border:2px solid #000;\n  margin-top:20px;\n  padding:1em;\n}\n\n\n/*.fade-enter, .fade-leave {\n  opacity: 0;\n  transform: translate3d(0, -5px, 0);\n}*/\n.fade-enter{\n  opacity: 1;\n  transform: translate3d(100%, 0, 0);\n}\n\n.fade-leave {\n  opacity: 0;\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n\n}\n\n.back-enter {\n  opacity: 1;\n  -webkit-transform: translate3d(-110%, 0, 0);\n          transform: translate3d(-110%, 0, 0);\n\n}\n.back-leave{\n  opacity: 0;\n  /*transform: translate3d(100%, 0, 0);*/\n  -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n}\n\n\n.v-link-active {\n  color: red;\n}\n\n.custom-active-class {\n  color: #f60;\n}\n\n/*css next 测试*/\n  @keyframes testloading {\n    0% {\n      opacity: 0.2;\n    }\n    65% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0.1;\n    }\n  }\n\n.testa {\n    display: flex;\n}\n/*css next 测试*/\n\nnav > a,button{\n  color: #000;\n  padding: 3px 5px;\n  margin: 2px;\n  display: inline-block;\n  border: 2px solid #000;\n  text-decoration: none;\n}\n::-webkit-scrollbar {\n  display: none;\n}\n</style>\n\n<template>\n  <div class=\"app\">\n    <p v-if=\"authenticating\" style=\"color:red\">Authenticating...</p>\n    <h1 v-text=\"header\">App Header</h1>\n    <p>当前路径: {{$route.path}}</p>\n    <nav>\n    <a v-link=\"{ name: 'home', exact: true }\">首页</a>\n    <a v-link=\"{ name: 'my_views', exact: true }\">组件生命周期</a>\n    <a v-link=\"{ name: 'my_views_detail', params: { viewId:vvv } }\">url传值</a>\n<!--     <a v-link=\"{ path: '/my_views?viewId='+vvv}\">修改为原来/foo?user=1 的方式（变量）</a>\n    <a v-link=\"{ path: '/my_views?viewId=vvv'}\">修改为原来/foo?user=1 的方式（字符串）</a> -->\n    <a v-link=\"{ name: 'about' }\">about</a>\n    <!-- 如果是一个不存在的页面，那么用name 属性 -->\n    <a v-link=\"{ name: 'forbidden' }\">在路由全局设置终止</a>\n    <a v-link=\"{ path: '/nofound' }\">404</a> <!--这里不能使用 具名路径-->\n    <a v-link=\"{ name: 'modal_view' }\">modal弹窗</a>\n    <a v-link=\"{ name: 'select_view' }\">select</a>\n    <a v-link=\"{ name: 'radio_view' }\">radio</a>\n    <a v-link=\"{ name: 'tab_view' }\">tab选项卡</a>\n    <a v-link=\"{ name: 'slider_view' }\">slider with swiper</a>\n    <a v-link=\"{ name: 'test_view' }\">test.vue 测试字符,压缩后</a>\n    <a v-link=\"{ name: 'async' }\">动态组件载入 lazy load</a>\n    <a v-link=\"{ name: 'async_loading' }\">动态组件载入 lazy load(阻塞)，点击先请求数据，请求完毕后(3s)切换</a>\n    <a v-link=\"{ name: 'touch' }\">touch事件</a>\n    </nav>\n    <p>\n    <button @click=\"showModal = !showModal\">全局弹窗</button>\n    <button @click=\"showGlobalModal\">全局弹窗自定义</button>\n    <button @click=\"showToast\">Toast 默认 2.5s</button>\n    <button @click=\"customShowToast\">Toast自定义时长 4s</button>\n    <button @click=\"showLeftAside = true\">Aside left</button>\n    <button @click=\"showRightAside = true\">Aside right</button>\n    <button @click=\"showTopAside = true\">Aside top</button>\n    <button @click=\"showBottomAside = true\">Aside bottom</button>\n    <button @click=\"renderLinks=!renderLinks\">循环生成的链接</button>\n    </p>\n    <nav v-show=\"renderLinks\">\n      <a v-for=\"item in items\" v-link=\"item\" v-text=\"item.name\"></a>\n    </nav>\n    <router-view class=\"view\" id=\"view\" keep-alive :transition=\"effect\" transition-mode=\"out-in\"></router-view>\n\n    <modal :show.sync=\"showModal\" v-ref:index-modal > <!--此种写法详情 https://github.com/yyx990803/vue/issues/1325 搜 Shorthands -->\n      <!--\n\n        你可以添加自定义的内容\n        比如：可以通过\n\n          <h3 slot=\"body\">自定义内容</h3>\n\n        然后在组件模板（modal.vue）中\n        ···                                          ···\n        <div class=\"modal-body\">                     <div class=\"modal-body\">\n          <slot name=\"body\">\n            default body           最终会生成 =>        <h3 slot=\"body\">自定义内容</h3>\n          </slot>\n        </div>                                       </div>\n        ···                                          ···\n\n        如果不定义 <h3 slot=\"body\">自定义内容</h3> ，那么就是\n        ···\n        <div class=\"modal-body\">\n            default body\n        </div>\n        ···\n\n      -->\n\n      <h3 slot=\"body\"><span v-text=\"modalbody\"></span></h3>\n      <h3 slot=\"header\">内容</h3>\n    </modal>\n    <!--globalmodal-->\n    <globalmodal :globalmodal.sync=\"globalModal\"></globalmodal>\n\n    <!--右-->\n    <asidebar v-ref:asideR  :show.sync=\"showRightAside\"  :placement.sync=\"right\"  :header.sync=\"asideLeftTit\"  :width.sync=\"asidewidth\">\n      <div slot=\"body\">\n      <!--自定义内容-->\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea praesentium repudiandae accusantium nostrum doloribus voluptas accusamus consectetur quod inventore provident magni id sit, dolor harum totam. Odio ducimus error architecto.\n        <div class=\"aside-footer\">\n          <button type=\"button\" class=\"btn btn-default\" @click=\"showRightAside=false\">在组件声明的时候定义的close事件</button>\n        </div>\n      </div>\n    </asidebar>\n    <!--左-->\n    <asidebar v-ref:asideL  :show.sync=\"showLeftAside\"  :placement.sync=\"left\"  :header.sync=\"asideRightTit\"  :width.sync=\"asidewidth\">\n      <div slot=\"body\">\n        <!--自定义内容-->\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea praesentium repudiandae accusantium nostrum doloribus voluptas accusamus consectetur quod inventore provident magni id sit, dolor harum totam. Odio ducimus error architecto.\n        <div class=\"aside-footer\">\n          <button type=\"button\" class=\"btn btn-default\" @click=\"showLeftAside=false\">在组件声明的时候定义的close事件</button>\n        </div>\n      </div>\n    </asidebar>\n    <!--上-->\n    <asidebar v-ref:asideL  :show.sync=\"showTopAside\"  :placement.sync=\"top\"  :header.sync=\"asideTopTit\" >\n      <div slot=\"body\">\n        <!--自定义内容-->\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea praesentium repudiandae accusantium nostrum doloribus voluptas accusamus consectetur quod inventore provident magni id sit, dolor harum totam. Odio ducimus error architecto.\n        <div class=\"aside-footer\">\n          <button type=\"button\" class=\"btn btn-default\" @click=\"showTopAside=false\">在组件声明的时候定义的close事件</button>\n        </div>\n      </div>\n    </asidebar>\n    <!--下-->\n    <asidebar v-ref:asideL  :show.sync=\"showBottomAside\"  :placement.sync=\"bottom\"  :header.sync=\"asideBottomTit\" >\n      <div slot=\"body\">\n        <!--自定义内容-->\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea praesentium repudiandae accusantium nostrum doloribus voluptas accusamus consectetur quod inventore provident magni id sit, dolor harum totam. Odio ducimus error architecto.\n        <div class=\"aside-footer\">\n          <button type=\"button\" class=\"btn btn-default\" @click=\"showBottomAside=false\">在组件声明的时候定义的close事件</button>\n        </div>\n      </div>\n    </asidebar>\n\n    <p>页面状态 <pre style=\"width:100%;overflow: auto;\">{{$data | json}}</pre></p>\n\n    <!--toast-->\n    <toast v-ref:toast :toast.sync=\"toast\">\n       <div slot = \"content\" >{{toast.content}}</div>\n    </toast>\n\n\n\n\n\n\n\n  </div>\n</template>\n<script>\n\nmodule.exports = {\n    data: function() {\n      return {\n        renderLinks:false,\n        items:{\n          '/':{\n            name:'home'\n          },\n          '/my_views': {\n            name:'my_views'\n          },\n          '/my_views/:viewId': {\n            name:'my_views_detail'\n          },\n          '/about':{\n            name:'about'\n          },\n          '/forbidden':{\n            name:'forbidden'\n          },\n          '/modal_view': {\n            name:'modal_view'\n          },\n          '/select_view': {\n            name:'select_view'\n          },\n          '/radio_view': {\n            name:'radio_view'\n          },\n          '/tab_view': {\n            name:'tab_view'\n          },\n          '/slider_view': {\n            name:'slider_view'\n          },\n          '/test':{\n            name:'test_view'\n          },\n          'async':{\n            //http://forum.vuejs.org/topic/114/vue-router-异步加载的例子\n            name:'async'\n          },\n          'async_loading':{\n            //http://forum.vuejs.org/topic/114/vue-router-异步加载的例子\n            name:'async_loading'\n          },\n          //触摸事件\n          'touch':{\n            name:'touch'\n          }\n        },\n        effect          : 'fade',\n        vvv             : '参数',        //用于 传参\n        header          : '首页',\n        showModal       : false,         //用于 modal\n        authenticating  : false,         //用于 forbidden\n        showAside       : false,         //用于 aside\n        right           : 'right',       //用于 aside\n        left            : 'left',        //用于 aside\n        top             : 'top',         //用于 aside\n        bottom          : 'bottom',      //用于 aside\n        showRightAside  : false,         //用于 asideaside 方向\n        showLeftAside   : false,         //用于 asideaside 方向\n        showTopAside    : false,         //用于 asideaside 方向\n        showBottomAside : false,         //用于 asideaside 方向\n        asideLeftTit    : 'left-title',  //用于 aside\n        asideRightTit   : 'right-title', //用于 aside\n        asideTopTit     : 'right-title', //用于 aside\n        asideBottomTit  : 'right-title', //用于 aside\n        title           : 'title',       //用于 aside\n        asidewidth      : 350,           //用于 aside\n        toast           : {content:'正在加载。。。'},         //用于 toast\n        modalbody       : \"可以通过在组件中调用 this.$parent.modalbody='' 来修改这里的内容\",\n        myViewsData     : null, //列表页\n        myViewDetail    : null, //详情页\n        modalView       : null, //弹窗页\n        splittingView   : null, //按需加载\n        routeList       : [],    //访问周期中所访问了那些路径,在route.js中设置\n        eventLog        : '',    //触摸事件的时候log\n        globalModal     :{ //自定义弹层\n          title:'',\n          content:'',\n          confirmFn:function(){},\n          cancelFn:function(){},\n          rd:0\n        }\n      };\n    },\n    components:{\n      modal:require('./components/modal.vue'),\n      globalmodal:require('./components/globalmodal.vue'),\n      asidebar:require('./components/aside.vue'),\n      toast:require('./components/toast.vue')\n    },\n    created:function(){\n\n    },\n    //组件事件通信\n    //子组件可以通过 this.$dispatch('confirmCallback',this); 来触发父组件events中声明的事件\n    events:{\n      confirmCallback:function(child){\n        //设置元素的值\n        //child.$els.inp.$set('value','1');\n        console.log(child);\n        //获取dom元素  child.$els.inp\n        console.log(child.$els.inp.value);\n        console.log('confirmCallback');\n        console.log('1秒钟后跳转到 my-views');\n        setTimeout(function(){\n           this.$root.$route.router.go('/my_views');\n           child.show = false;\n        }.bind(this),1000);\n\n        //debugger;\n      },\n      cancelCallback:function(child){\n        console.log('modal-cancelCallback');\n      }\n    },\n    methods:{\n      nonBreaking:function(){\n        console.log('nonBreaking');\n      },\n      showToast:function(){\n        //直接设置，默认2.5秒后自动消失\n        this.toast.content = 'toast  2.5s...';\n        //如果同时设置多个，则只会显示最后一个\n        // this.toast.content = 'toast  2.6s...';\n        // this.toast.content = 'toast  2.7s...';\n        // this.toast.content = 'toast  2.8s...';\n      },\n      //自定义时长\n      customShowToast:function(){\n        this.toast = { content : '自定义时长4s...', timer : 4000};\n      },\n      //有时候想要自定义弹窗事件\n      showGlobalModal:function(){\n        this.globalModal = {\n          rd:Math.random(),\n          title:'title',\n          content:'content',\n          confirmFn:function(){\n            console.log('自定义confirmFn'+Math.random());\n          },\n          cancelFn:function(){\n            console.log('自定义cancelFn'+Math.random());\n          }\n        }\n      }\n    },\n    ready:function(){\n      //this.$set('as',new AwesomeSheet({ touchDismiss: false }));\n    }\n}\n\n</script>\n"
  },
  {
    "path": "src/components/aside.vue",
    "content": "<template>\n  <div class=\"aside_components_mask\" v-if=\"show\" transition=\"modal\" @click.stop=\"show=false\"></div>\n  <div class=\"aside\"\n    :style=\"{width : width ? width+'px' : ''}\"\n    :class=\"placement\"\n    v-if=\"show\"\n    :transition=\"slideTransition\"> <!--这里 相当于 v-bind:transition=\"slideTransition\"  -->\n    <div class=\"aside-dialog\">\n      <div class=\"aside-content\">\n        <div class=\"aside-header\">\n          <button  class=\"close\" @click='close'><span>&times;</span></button>  在aside中定义的close事件\n          <h4 class=\"aside-title\">{{header}}</h4>\n          <dl>\n            <dt>props参数：</dt>\n            <dt>width:{{width}} </dt>\n            <dt>placement:{{placement}}</dt>\n            <dt>header:{{header}}</dt>\n          </dl>\n        </div>\n        <div class=\"aside-body\">\n          <slot name=\"body\">\n            default body\n          </slot>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tprops: {\n      show: {\n        type: Boolean,\n        require: true\n      },\n      placement: {\n        type:String\n      },\n      header: {\n        type: String,\n        default:''\n      },\n      width: {\n        type:Number\n      }\n    },\n    computed:{\n      slideTransition:function(){\n        console.log('slide' + this.placement);\n        return 'slide' + this.placement;\n      }\n    },\n\t\tmethods:{\n\t\t\tclose:function(item,index){\n\t\t\t\tthis.show = false\n\t\t\t}\n\t\t},\n\t\tready:function(){\n      //测试，如果在父元素绑定一个el，在这里在绑定事件\n\n      //document.body.addEventListener('click',this.hideWrap,false);\n\t\t},\n    destroyed:function(){\n      // document.body.removeEventListener('click',this.hideWrap,false);\n      // console.log('组件销毁');\n    }\n\t}\n</script>\n\n<style>\n  .aside_components_mask{\n    position: fixed;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    background: rgba(0,0,0,.5);\n    transition: opacity .3s ease;\n  }\n  .aside-open {\n    transition: transform 0.3s;\n  }\n  .aside-open.has-push-right {\n    transform: translateX(-300px);\n  }\n  .aside {\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      z-index: 1049;\n      overflow: auto;\n      background: #fff;\n  }\n  .aside.left {\n    left: 0;\n    right: auto;\n  }\n  .aside.right {\n    left: auto;\n    right: 0;\n  }\n  .aside.top{\n    top:0;\n    bottom:auto;\n  }\n  .aside.bottom{\n    bottom:0;\n    top:auto;\n  }\n \n\n\n\n  .aside:focus {\n      outline: 0\n  }\n  .aside .aside-dialog .aside-header {\n      border-bottom: 1px solid #e5e5e5;\n      min-height: 16.43px;\n      padding: 6px 15px;\n      background: #337ab7;\n      color: #fff\n  }\n\n  .aside .aside-dialog .aside-header .close {\n      margin-right: -8px;\n      padding: 4px 8px;\n      color: #fff;\n      font-size: 25px;\n      opacity: .8\n  }\n\n  .aside .aside-dialog .aside-body {\n      position: relative;\n      padding: 15px\n  }\n\n  .aside .aside-dialog .aside-footer {\n      padding: 15px;\n      text-align: right;\n      border-top: 1px solid #e5e5e5\n  }\n\n  .aside .aside-dialog .aside-footer .btn+.btn {\n      margin-left: 5px;\n      margin-bottom: 0\n  }\n\n  .aside .aside-dialog .aside-footer .btn-group .btn+.btn {\n      margin-left: -1px\n  }\n\n  .aside .aside-dialog .aside-footer .btn-block+.btn-block {\n      margin-left: 0\n  }\n\n  .aside-backdrop {\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: 1040;\n      opacity: 0;\n      transition: opacity .3s ease;\n      background-color: #000\n  }\n\n\n  .aside-backdrop.in {\n      opacity: .5;\n  }\n\n\n</style>"
  },
  {
    "path": "src/components/globalmodal.vue",
    "content": "<template>\n\t\t<div class=\"modal-mask\" v-show=\"show\" transition=\"modal\" transition-mode=\"out-in\">\n\t\t\t<div class=\"modal-wrapper\" v-el:overlay @click.self.stop=\"show=false\" >\n\t\t\t\t<div class=\"modal-container\">\n\t\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t\t<span class=\"modal-close\"  @click=\"show=false\"></span>\n\t\t\t\t\t\t{{globalmodal.title}}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"modal-body\">\n\t\t\t\t\t\t {{globalmodal.content}}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"modal-footer\">\n\t\t\t\t\t\t <button @click=\"confirmCallback\">确定</button>\n\t\t\t\t\t\t <button @click=\"cancelCallback\">取消</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\tshow:false\n\t\t\t}\n\t\t},\n\t\tprops: {\n\t\t\tglobalmodal: {\n\t\t\t\ttype: Object\n\t\t\t}\n\t\t},\n\t\twatch:{\n\t\t\t'globalmodal.rd':function(val){\n\t\t\t\tthis.show = true;\n\t\t\t}\n\t\t},\n\t\tmethods:{\n\t\t\tcancelCallback:function(){\n\t\t\t\tthis.globalmodal.cancelFn();\n\t\t\t\tthis.globalmodal.cancelFn = function(){};\n\t\t\t\tthis.show = false;\n\t\t\t},\n\t\t\tconfirmCallback: function(){\n\t\t\t\tthis.globalmodal.confirmFn();\n\t\t\t\tthis.globalmodal.confirmFn = function(){};\n\t\t\t\tthis.show = false;\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style>\n.modal-mask {\n  position: fixed;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, .5);\n  display: table;\n  transition: opacity .3s ease;\n}\n\n.modal-wrapper {\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.modal-container {\n  width: 300px;\n  margin: 0px auto;\n  padding: 20px 30px;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);\n  transition: all .3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n}\n\n.modal-header h3 {\n  margin-top: 0;\n  color: #42b983;\n}\n\n.modal-body {\n  margin: 20px 0;\n}\n\n.modal-default-button {\n  float: right;\n}\n.modal-header .modal-close {\n    display: inline-block;\n    float: right;\n    width: 12px;\n    height: 12px;\n    margin-top: 4px;\n    background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MUIxODc5OTVCNTgxMUU1ODAzNkYzMTAwN0RDOEU0OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MUIxODc5QTVCNTgxMUU1ODAzNkYzMTAwN0RDOEU0OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQxN0U4Rjc0NUI1ODExRTU4MDM2RjMxMDA3REM4RTQ4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQxN0U4Rjc1NUI1ODExRTU4MDM2RjMxMDA3REM4RTQ4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+HUcKGgAAAQFJREFUeNpi/P//PwMlgImBQkCxASzInIlTthoCqUYgPpqf492JJM4IpNKB2AuIpwPltuNyQTsQ+wJxOVBTJpJ4HBA3QeXqcLoACA4BsQ0QCwJxA9Tm91CDRYH4G8h1+AzoA+LPQAxyvhgQt0E1SQLxRyDuB+IJyBoY0aMRaCsbkIoB4rlIwiDNrVD/f8EbC0AFv4DUVyD+jSb1GV0zVgOALogEUUDMChX6DsT8QFwLlMvCawBQQQY0HMShGluAuArqBSlQFAPV1OFzQSgQSwDxDyDugBowE5o2QIErAo1KnLHQDMQcQHwMZAA0PEAumw2keIDYE4gn4Y2FoZeZAAIMALyUTmwPR6yCAAAAAElFTkSuQmCC\") no-repeat center;\n    cursor: pointer;\n}\n.modal-header .modal-close:hover {\n    background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RThBQjBFNzVCNTgxMUU1QTIzNzgyRTJBQjExRTk1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RThBQjBFODVCNTgxMUU1QTIzNzgyRTJBQjExRTk1MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlFNjE3RDAyNUI1ODExRTVBMjM3ODJFMkFCMTFFOTUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlFNjE3RDAzNUI1ODExRTVBMjM3ODJFMkFCMTFFOTUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+thqe1wAAAPhJREFUeNpi/P//PwMlgImBQkBdA37//m0IxJuAuBxNnBGIM6BynigmgMIAhn/9+rUDiP8D8TsgzkQSjwfiV1C548h6WNBcdAiIbYBYEIgbQDYD6fdA3A7EokD8DYiP4nMBBxDnAvE3qG0fgPgZErseiPmR9aAYADWEDYiToJr+I2kuBWIedPUYscDKyvoLSH0FhR2a1Geg3BeMaMDigkggfoFkO8w7T4E4C109uuYMIH6OpLEZiAugXgCJvQbiOnwG7IUq/A5SCMTsQMwJxIVA/AkqdxpfNDYDMQcQHwPiDmh4gBLSbCDFA8SgRDQJWQPj0M9MAAEGACTic2YzEZkcAAAAAElFTkSuQmCC\") no-repeat center;\n}\n\n\n\n/*\n * the following styles are auto-applied to elements with\n * v-transition=\"modal\" when their visibility is toggled\n * by Vue.js.\n *\n * You can easily play with the modal transition by editing\n * these styles.\n */\n\n.modal-enter, .modal-leave {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\n.modal-leave .modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}\n\n</style>"
  },
  {
    "path": "src/components/modal.vue",
    "content": "<template>\n\t\t<div class=\"modal-mask\" v-if=\"show\" transition=\"modal\" transition-mode=\"out-in\">\n\t\t\t<div class=\"modal-wrapper\" v-el:overlay @click.self.stop=\"show=false\" >\n\t\t\t\t<div class=\"modal-container\">\n\t\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t\t<span class=\"modal-close\"  @click=\"show=false\"></span>\n\t\t\t\t\t\t<slot name=\"header\">\n\t\t\t\t\t\tdefault header\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"modal-body\">\n\t\t\t\t\t\t<slot name=\"body\">\n\t\t\t\t\t\tdefault body\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"modal-footer\">\n\t\t\t\t\t\t<slot name=\"footer\">\n\t\t\t\t\t\t\t试试在input里面输入一些文字\n\t\t\t\t\t\t\t<input type=\"text\" v-el:inp @keyup=\"modalkeyup\">\n\t\t\t\t\t\t\t<button class=\"modal-default-button\" @click=\"confirmCallback\">\n\t\t\t\t\t\t\t\tOK\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t<button class=\"modal-default-button\" v-on:click=\"cancelCallback\">\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tprops: {\n\t\t\tshow:{\n\t\t\t\trequire:true,\n\t\t\t\ttype:Boolean\n\t\t\t},\n\t\t\tcancelfn: {\n\t\t\t\ttype: Function,\n\t\t\t\tdefault: function(){}\n\t\t\t},\n\t\t\tconfirmfn: {\n\t\t\t\ttype: Function,\n\t\t\t\tdefault: function(){}\n\t\t\t}\n\t\t},\n\t\tmethods:{\n\t\t\tcancelCallback:function(){\n\t\t\t\tthis.cancelfn();\n\t\t\t\tthis.cancelfn = function(){};\n\t\t\t\tthis.show = false;\n\t\t\t},\n\t\t\tconfirmCallback: function(){\n\t\t\t\tthis.confirmfn();\n\t\t\t\tthis.confirmfn = function(){};\n\t\t\t\tthis.show = false;\n\t\t\t},\n\t\t\tkeyupcallback:function(){\n\t\t\t\tconsole.log('duang~');\n\t\t\t},\n\t\t\tmodalkeyup:function(e){\n\t\t\t\tthis.$root.modalbody = e.target.value;\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style>\n.modal-mask {\n  position: fixed;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, .5);\n  display: table;\n  transition: opacity .3s ease;\n}\n\n.modal-wrapper {\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.modal-container {\n  width: 300px;\n  margin: 0px auto;\n  padding: 20px 30px;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);\n  transition: all .3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n}\n\n.modal-header h3 {\n  margin-top: 0;\n  color: #42b983;\n}\n\n.modal-body {\n  margin: 20px 0;\n}\n\n.modal-default-button {\n  float: right;\n}\n.modal-header .modal-close {\n    display: inline-block;\n    float: right;\n    width: 12px;\n    height: 12px;\n    margin-top: 4px;\n    background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MUIxODc5OTVCNTgxMUU1ODAzNkYzMTAwN0RDOEU0OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MUIxODc5QTVCNTgxMUU1ODAzNkYzMTAwN0RDOEU0OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQxN0U4Rjc0NUI1ODExRTU4MDM2RjMxMDA3REM4RTQ4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQxN0U4Rjc1NUI1ODExRTU4MDM2RjMxMDA3REM4RTQ4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+HUcKGgAAAQFJREFUeNpi/P//PwMlgImBQkCxASzInIlTthoCqUYgPpqf492JJM4IpNKB2AuIpwPltuNyQTsQ+wJxOVBTJpJ4HBA3QeXqcLoACA4BsQ0QCwJxA9Tm91CDRYH4G8h1+AzoA+LPQAxyvhgQt0E1SQLxRyDuB+IJyBoY0aMRaCsbkIoB4rlIwiDNrVD/f8EbC0AFv4DUVyD+jSb1GV0zVgOALogEUUDMChX6DsT8QFwLlMvCawBQQQY0HMShGluAuArqBSlQFAPV1OFzQSgQSwDxDyDugBowE5o2QIErAo1KnLHQDMQcQHwMZAA0PEAumw2keIDYE4gn4Y2FoZeZAAIMALyUTmwPR6yCAAAAAElFTkSuQmCC\") no-repeat center;\n    cursor: pointer;\n}\n.modal-header .modal-close:hover {\n    background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RThBQjBFNzVCNTgxMUU1QTIzNzgyRTJBQjExRTk1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RThBQjBFODVCNTgxMUU1QTIzNzgyRTJBQjExRTk1MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlFNjE3RDAyNUI1ODExRTVBMjM3ODJFMkFCMTFFOTUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlFNjE3RDAzNUI1ODExRTVBMjM3ODJFMkFCMTFFOTUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+thqe1wAAAPhJREFUeNpi/P//PwMlgImBQkBdA37//m0IxJuAuBxNnBGIM6BynigmgMIAhn/9+rUDiP8D8TsgzkQSjwfiV1C548h6WNBcdAiIbYBYEIgbQDYD6fdA3A7EokD8DYiP4nMBBxDnAvE3qG0fgPgZErseiPmR9aAYADWEDYiToJr+I2kuBWIedPUYscDKyvoLSH0FhR2a1Geg3BeMaMDigkggfoFkO8w7T4E4C109uuYMIH6OpLEZiAugXgCJvQbiOnwG7IUq/A5SCMTsQMwJxIVA/AkqdxpfNDYDMQcQHwPiDmh4gBLSbCDFA8SgRDQJWQPj0M9MAAEGACTic2YzEZkcAAAAAElFTkSuQmCC\") no-repeat center;\n}\n\n\n\n/*\n * the following styles are auto-applied to elements with\n * v-transition=\"modal\" when their visibility is toggled\n * by Vue.js.\n *\n * You can easily play with the modal transition by editing\n * these styles.\n */\n\n.modal-enter, .modal-leave {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\n.modal-leave .modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}\n\n</style>"
  },
  {
    "path": "src/components/radio.vue",
    "content": "<template>\n<slot name=\"title\"></slot>\n<div v-for=\"item in items\">\n\t<div  class=\"switch_box switch_box-txt \"\n\t\t:class=\"{'switch_box-on':item.checked}\"\n\t\t@click = \"clickHandler($index)\"\n\t>\n\t\t<div class=\"switch_scroll\"></div>\n\t</div><span v-text=\"item.text\"></span>\n\t{{item.checked}}\n</div>\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tprops: ['items','mutilCheck'],\n\t\tmethods:{\n\t\t\tclickHandler:function(index){\n\t\t\t\t//多选\n\t\t\t\tif(this.mutilCheck){\n\t\t\t\t\tthis.items[index].checked = !this.items[index].checked;\n\t\t\t\t} else {\n\t\t\t\t\t//单选\n\t\t\t\t\tfor (var i = this.items.length - 1; i >= 0; i--) {\n\t\t\t\t\t\tthis.items[i].checked = (i === index)\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style>\n.switch_box {\n    position: relative;\n    width: 72px;\n    height: 28px;\n    display: inline-block;\n    vertical-align: middle;\n    border-radius: 14px;\n    background-color: #ccc;\n    cursor: pointer;\n    -webkit-transition: 200ms background-color ease-in;\n    -moz-transition: 200ms background-color ease-in;\n    transition: 200ms background-color ease-in;\n}\n\n.switch_box.switch_box-on {\n    background-color: #37d28e;\n}\n.switch_box:before,\n.switch_box.switch_box-on:before{\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    line-height: 28px;\n    font-size: 14px;\n    color: #fff;\n}\n.switch_box:before {\n    content: \"无\";\n    right: 27px;\n    text-indent: 0;\n}\n.switch_box.switch_box-on:before {\n    content: \"有\";\n    left: 27px;\n    text-align: left;\n}\n.switch_box .switch_scroll {\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 24px;\n    height: 24px;\n    border-radius: 12px;\n    background-color: #fff;\n    -webkit-transition: 200ms left ease-in;\n    -ms-transition: 200ms left ease-in;\n    -moz-transition: 200ms left ease-in;\n    transition: 200ms left ease-in;\n}\n.switch_box.switch_box-on .switch_scroll {\n    left: 46px;\n}\n.switch_box-txt{\n    line-height: 28px;\n    text-indent: 80px;\n    color: #b2b2b2;\n}\n.switch_box-txt.switch_box-on{\n    color: #595959;\n}\n</style>"
  },
  {
    "path": "src/components/select.vue",
    "content": "<template>\n<div>\n<!-- div.select_components_mask 类根据堆叠关系 不用设置z-index -->\n<div class=\"select_components_mask\" v-show=\"show\" @click.stop=\"show=false\"></div>\n  <slot name=\"title\">default title</slot>\n   <div class=\"select\" @click.stop=\"show=!show\">\n    <div class=\"select-content\">{{chooseval}}</div>\n    <div class=\"select_arrow\">\n      <span></span>\n    </div>\n    <ul class=\"select_wrap\" :class=\"{ 'hide': !show }\">\n        <li v-for=\"d in items\" :class=\"{ 'hover': d.hover }\" @mouseout=\"mouseout(d,$index)\" @mouseover=\"mouseover(d,$index)\" @click=\"choose\"> {{ d.text }} </li>\n    </ul>\n  </div>\n</div>\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tprops: ['items'],\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\tshow : false,\n\t\t\t\tishover:false,\n\t\t\t\tchooseval:'请选择'\n\t\t\t}\n\t\t},\n\t\tmethods:{\n\t\t\tmouseover:function(item,index){\n\t\t\t\titem.hover = true;\n\t\t\t},\n\t\t\tmouseout:function(item,index){\n\t\t\t\titem.hover = false;\n\t\t\t},\n\t\t\tchoose:function(e){\n\t\t\t\tthis.chooseval = e.target.innerHTML;\n\t\t\t},\n      hideWrap:function(){\n        this.show = false;\n        console.log('隐藏hideWrap');\n      }\n\t\t}\n\t}\n</script>\n\n<style>\n    .select_components_mask{\n      position: fixed;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      background: transparent;\n    }\n    .select{\n      width:325px;\n      height:40px;\n      position: relative;\n      border:1px solid #000;\n      background:#fff;\n      color:#949494;\n    }\n    .select-content{\n      margin-top:12px;\n      margin-left: 20px;\n      cursor:default;\n    }\n\n    .select_arrow{\n      width:38px;\n      height:38px;\n      position: absolute;\n      right:1px;\n      top:1px;\n      background:#000;\n    }\n    .select_arrow span{\n      position:absolute;\n      margin:13px;\n      width: 0;\n      height: 0;\n      border-left: 7px solid transparent;\n      border-right: 7px solid transparent;\n      border-top: 14px solid #fff;\n    }\n    .select_wrap{\n      margin: 0 0 0 -1px;;\n      padding: 0;\n      position: absolute;\n      z-index: 2;\n      width: 100%;\n      top: 100%;\n      border:1px solid #000;\n      background:#fff;\n    }\n    .select_wrap li{\n      height:40px;\n      line-height: 40px;\n      padding-left:18px;\n      color:#000;\n      list-style: none;\n    }\n    .select_wrap li.hover{\n      background:#949494;\n    }\n    .select_wrap.hide{\n      display: none;\n    }\n\n</style>"
  },
  {
    "path": "src/components/tab.vue",
    "content": "<template>\n\t<div class=\"tab-panel\" :class=\"{hide:!show}\" v-show=\"show\" :index=\"index\" :transition=\"transiton\" >\n\t{{$index}}\n\t\t<slot name=\"tab-panel\"></slot>\n\t</div>\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\tshow:false,\n\t\t\t\tindex:0\n\t\t\t}\n\t\t},\n\t\tprops: {\n\t\t\theader: {\n\t\t\t\ttype: String\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\ttype: Boolean,\n\t\t\t\tdefault: false\n\t\t\t}\n\t\t},\n\t\tcomputed:{\n\t\t\tshow:function(){\n\t\t\t\treturn this.$parent.activeIndex === this.index;\n\t\t\t},\n\t\t\ttransiton:function() {\n        \t\treturn this.$parent.effect;\n      \t\t}\n\t\t},\n\t\tcreated:function(){\n\t\t\tthis.$parent.renderData.push({\n\t\t\t\theader: this.header,\n\t\t\t\tdisabled: this.disabled\n\t\t\t});\n\t\t\t//因为这里每次index都是0，所以要在ready的时候设置一下它的index\n\t\t\tthis.index = this.$parent.renderData.length - 1;\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>"
  },
  {
    "path": "src/components/tabset.vue",
    "content": "<template>\n<div class=\"tab\">\n\t<ul class=\"tab-nav\">\n\t\t<li v-for=\"(index,item) in renderData\">\n\t\t\t<a href=\"#\"\n\t\t\t@click.prevent.stop = \"handleTablistClick($event,index,this)\"\n\t\t\t:class=\"{\n\t\t\t\tactive:$index === activeIndex,\n\t\t\t\tdisabled:item.disabled\n\t\t\t}\"\n\t\t\t>{{item.header}}</a>\n\t\t</li>\n\t</ul>\n\t<slot name=\"tab-content\"></slot>\n</div>\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tprops: {\n\t\t\teffect: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: 'fadein'\n\t\t\t}\n\t\t},\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\trenderData:[],\n\t\t\t\tactiveIndex: 0\n\t\t\t}\n\t\t},\n\t\tmethods:{\n\t\t\thandleTablistClick:function(e,index,el){\n\n\t\t\t\tif (!this.renderData[index].disabled) this.activeIndex = index\n\t\t\t}\n\t\t},\n\t\tready:function(){\n\n\t\t}\n\t}\n</script>\n\n<style>\n\n.tab .active{\n\tcolor:#fff;\n\tbackground:#369;\n}\n\n.tab .tab-content{\n\tposition:relative;\n}\n.tab .tab-panel{\n\tpadding-top: 1px;\n}\n.tab .tab-panel.hide{\n\tposition: absolute;\n\ttop:0;\n}\n\n\n\n\n</style>"
  },
  {
    "path": "src/components/toast.vue",
    "content": "<template>\n<div>\n\t<div class=\"mask_transparent\" v-if=\"show\"></div>\n\t<div class=\"toast\" transition=\"toast\" v-if=\"show\">\n\t\t<slot name=\"content\"></slot>\n\t</div>\n</div>\n</template>\n<script>\n\tmodule.exports = {\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\tshow : false\n\t\t\t}\n\t\t},\n\t\tprops: ['toast'],\n\t\twatch:{\n\t\t\t//当给toast设置内容的时候就显示，如果没有定义时间，那么2.5秒后渐隐\n\t\t\t'toast.content':function(val,oldVal){\n\n\t\t\t\tif(val == ''){\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tvar _this = this;\n\t\t\t\t_this.show = true;\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t_this.show = false;\n\n\t\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t\t_this.toast.content = '';\n\t\t\t\t\t\tdelete _this.toast.timer ;\n\t\t\t\t\t},310);//这里的300是动画的延迟，故意多设置10毫秒\n\n\t\t\t\t},_this.toast.timer || 2500);\n\t\t\t}\n\t\t},\n\t\tcreated:function(){\n\t\t\tconsole.log('created');\n\t\t},\n\t\tbeforeCompile:function(){\n\t\t\tconsole.log('beforeCompile');\n\t\t},\n\t\tcompiled:function(){\n\t\t\tconsole.log('compiled');\n\t\t},\n\t\tready:function(){\n\t\t\tconsole.log('ready');\n\t\t},\n\t\tattached:function(){\n\t\t\tconsole.log('attached');\n\t\t},\n\t\tdetached:function(){\n\t\t\tconsole.log('detached');\n\t\t},\n\t\tbeforeDestroy:function(){\n\t\t\tconsole.log('beforeDestroy');\n\t\t},\n\t\tdestroyed:function(){\n\t\t\tconsole.log('destroyed');\n\t\t}\n\t}\n</script>\n\n<style>\n.mask_transparent {\n    position: fixed;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n}\n.toast{\n\tposition: absolute;\n\ttop:50%;\n\tleft:50%;\n\tbackground: rgba(40, 40, 40, 0.75);\n\ttransform:translateX(-50%) translateY(-50%);\n\tcolor:#FFFFFF;\n    text-align: center;\n    border-radius: 5px;\n    padding:15px;\n    opacity:1;\n    transition:opacity .3s linear;\n}\n\n\n.toast-leave{\n\topacity:0;\n}\n\n</style>"
  },
  {
    "path": "src/css/a.css",
    "content": ".aaa{\n\tbackground:red;\n}"
  },
  {
    "path": "src/css/animate.css",
    "content": "/*所有的动画*/\n .slideleft-enter {\n    animation:slideleft-in .3s;\n  }\n  .slideleft-leave {\n    animation:slideleft-out .3s;\n  }\n  .slideright-enter {\n    animation:slideright-in .3s;\n  }\n  .slideright-leave {\n    animation:slideright-out .3s;\n  }\n  .slidetop-enter {\n    animation:slidetop-in .3s;\n  }\n  .slidetop-leave {\n    animation:slidetop-out .3s;\n  }\n  .slidebottom-enter {\n    animation:slidebottom-in .3s;\n  }\n  .slidebottom-leave {\n    animation:slidebottom-out .3s;\n  }\n  @keyframes slideleft-in {\n    0% {\n      transform: translateX(-100%);\n      opacity: 0;\n    }\n    100% {\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes slideleft-out {\n    0% {\n      transform: translateX(0);\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(-100%);\n      opacity: 0;\n    }\n  }\n\n  @keyframes slideright-in {\n    0% {\n      transform: translateX(100%);\n      opacity: 0;\n    }\n    100% {\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes slideright-out {\n    0% {\n      transform: translateX(0);\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(100%);\n      opacity: 0;\n    }\n  }\n  @keyframes slidetop-in {\n    0% {\n      transform: translateY(-100%);\n      opacity: 0;\n    }\n    100% {\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes slidetop-out {\n    0% {\n      transform: translateX(0);\n      opacity: 1;\n    }\n    100% {\n      transform: translateY(-100%);\n      opacity: 0;\n    }\n  }\n  @keyframes slidebottom-in {\n    0% {\n      transform: translateY(100%);\n      opacity: 0;\n    }\n    100% {\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slidebottom-out {\n    0% {\n      transform: translateX(0);\n      opacity: 1;\n    }\n    100% {\n      transform: translateY(100%);\n      opacity: 0;\n    }\n  }\n\n\n/*切换效果 -- 渐隐*/\n.fadein-enter{\n  animation:fadein-in 0.3s ease;\n}\n.fadein-leave{\n  animation:fadein-out 0.3s ease;\n}\n\n/*切换效果 -- 从右渐入*/\n.fadeInRight-enter {\n  animation:fadeInRight-in 0.3s ease;\n}\n.fadeInRight-leave{\n  animation:fadeInRight-out 0.3s ease;\n}\n\n@keyframes fadein-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes fadein-out {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes fadeInRight-in {\n    0% {\n        opacity: 0;\n        transform: translate3d(2000px,0,0)\n    }\n\n    100% {\n        opacity: 1;\n        transform: none\n    }\n}\n@keyframes fadeInRight-out {\n    0% {\n    \topacity: 1;\n    \ttransform: none\n    }\n\n    100% {\n        opacity: 0;\n        transform: translate3d(-2000px,0,0)\n    }\n}   \n"
  },
  {
    "path": "src/css/b.css",
    "content": ".bbb{\n\tbackground:black;\n}"
  },
  {
    "path": "src/css/common.css",
    "content": "@charset \"utf-8\";\n\n\n\n@font-face {font-family: \"iconfont\";\n  src: require('iconfont.woff') format('woff'),\n  require('iconfont.ttf') format('truetype'),\n  require('iconfont.svg#iconfont') format('svg');\n}\n\n.iconfont {\n  font-family:\"iconfont\" !important;\n  font-style:normal;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke-width: 0.2px;\n  -moz-osx-font-smoothing: grayscale;\n}\n.icf-user:before { content: \"\\e61b\"; }\n.icf-arrow-right:before { content: \"\\e61c\"; }\n.icf-change:before { content: \"\\e626\"; }\n.icf-male:before { content: \"\\e616\"; }\n.icf-sales:before { content: \"\\e600\"; }\n.icf-stars:before { content: \"\\e624\"; }\n.icf-brand:before { content: \"\\e602\"; }\n.icf-shop:before { content: \"\\e612\"; }\n.icf-time:before { content: \"\\e603\"; }\n.icf-pay:before { content: \"\\e604\"; }\n.icf-path:before { content: \"\\e61d\"; }\n.icf-gengduo:before { content: \"\\e61e\"; }\n.icf-like:before { content: \"\\e605\"; }\n.icf-area:before { content: \"\\e606\"; }\n.icf-addr:before { content: \"\\e607\"; }\n.icf-add:before { content: \"\\e60d\"; }\n.icf-checked:before { content: \"\\e609\"; }\n.icf-home:before { content: \"\\e60a\"; }\n.icf-add1:before { content: \"\\e601\"; }\n.icf-repair:before { content: \"\\e608\"; }\n.icf-share:before { content: \"\\e629\"; }\n.icf-calendar:before { content: \"\\e60b\"; }\n.icf-star:before { content: \"\\e614\"; }\n.icf-weixin:before { content: \"\\e618\"; }\n.icf-message:before { content: \"\\e60c\"; }\n.icf-edit:before { content: \"\\e615\"; }\n.icf-mianfeibaojia:before { content: \"\\e62a\"; }\n.icf-xie:before { content: \"\\e62b\"; }\n.icf-shield:before { content: \"\\e619\"; }\n.icf-change1:before { content: \"\\e627\"; }\n.icf-pengyouquan:before { content: \"\\e62e\"; }\n.icf-sad:before { content: \"\\e620\"; }\n.icf-tel:before { content: \"\\e60e\"; }\n.icf-gift:before { content: \"\\e625\"; }\n.icf-radio-active:before { content: \"\\e621\"; }\n.icf-info:before { content: \"\\e60f\"; }\n.icf-female:before { content: \"\\e617\"; }\n.icf-radio:before { content: \"\\e622\"; }\n.icf-location:before { content: \"\\e61f\"; }\n.icf-filter:before { content: \"\\e610\"; }\n.icf-coupon:before { content: \"\\e61a\"; }\n.icf-complete:before { content: \"\\e611\"; }\n.icf-scan:before { content: \"\\e628\"; }\n.icf-map:before { content: \"\\e613\"; }\n.icf-right:before { content: \"\\e623\"; }\n.icf-xphoto:before { content: \"\\e62c\"; }\n.icf-add2:before { content: \"\\e62d\"; }\n \n\nbody{\n\tmargin:0;\n}"
  },
  {
    "path": "src/filters.js",
    "content": "\n\nfunction timeago(time) {\n  time = new Date(time);\n  var delta = parseInt((new Date() - time) / 1000, 10);\n  if (delta <= 0) return 'just now';\n\n  var minutes = delta / 60;\n  if (minutes < 1) return 'less than a minute ago';\n  if (minutes < 2) return 'about a minute ago';\n\n  var hours = minutes / 60;\n  if (hours < 1) return parseInt(minutes, 10) + ' minutes ago';\n  if (hours < 1.5) return 'about an hour ago';\n\n  var days = hours / 24;\n  if (days < 1) return Math.round(hours) + ' hours ago';\n  if (days < 7) return parseInt(days, 10) + ' days ago';\n\n  var month = time.getMonth();\n  if (month < 10) month = '0' + month;\n  var date = time.getDate();\n  if (date < 10) date = '0' + date;\n  return [time.getFullYear(), month, date].join('-');\n}\n\n\nfunction urlize(text) {\n  if (!text) return '';\n  var pattern = /https?:\\/\\/[^\\s<]+[^<.,:;\"')\\]\\s]/g;\n  return text.replace(pattern, function(u) {\n    var t = u.replace('http://', '');\n    return '<a href=\"' + u + '\">' + t + '</a>';\n  });\n}\n\n//获取图片地址，如果地址带有 http://那么就认为是绝对地址，然后直接返回\nfunction imgUrl(url){\n    if(url.match(/http:\\/\\//)){\n        return url;\n    }\n\n    //全站统一配置，页面首先会引用\n    if(window.abp){\n        return window.abp.imageDomain + url;\n    }\n    var testUrl  = 'http://img.yaomaiche.com';  //此url到时候走配置\n\n    if(this.isTest){\n        testUrl = 'http://img.test.yaomaiche.com';\n    }\n    return testUrl + url;\n}\n\n\n//显示价格\nfunction price(value,currency){\nvar digitsRE = /(\\d{3})(?=\\d)/g\n  value = parseFloat(value)\n  if (!isFinite(value) || (!value && value !== 0)) return ''\n  currency = currency != null ? currency : '¥'\n  var stringified = Math.abs(value).toFixed(2)\n  var _int = stringified.slice(0, -3)\n  var i = _int.length % 3\n  var head = i > 0\n    ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))\n    : ''\n  var _float = stringified.slice(-3)\n  var sign = value < 0 ? '-' : ''\n  return currency + sign + head +\n    _int.slice(i).replace(digitsRE, '$1,') +\n    _float\n}\n\nexports.imgUrl = imgUrl;\nexports.price = price;\nexports.timeago = timeago;\nexports.urlize = urlize;\n"
  },
  {
    "path": "src/routers.js",
    "content": "module.exports = function(router){\n\trouter.map({\n\t\t'/':{\n\t\t\tname:'home',\n\t\t\tcomponent: require('./views/home.vue')\n\t\t},\n\t\t'/about':{\n\t\t\tname:'about',\n\t\t\tcomponent: function(reslove){\n\t\t\t\treturn require(['./views/about.vue'],reslove)\n\t\t\t}\n\t\t},\n\t\t'/my_views': {\n\t\t\tname:'my_views',\n\t\t\tcomponent: require('./views/my_views.vue')\n\t\t},\n\t\t'/my_views/:viewId': {\n\t\t\tname:'my_views_detail',\n\t\t\tcomponent: require('./views/my_views_detail.vue'),\n\t\t\tauth: true // 此页面需要用户登录\n\t\t},\n\t\t'/modal_view': {\n\t\t\tname:'modal_view',\n\t\t\tcomponent: require('./views/modal_view.vue')\n\t\t},\n\t\t'/select_view': {\n\t\t\tname:'select_view',\n\t\t\tcomponent: require('./views/select_view.vue')\n\t\t},\n\t\t'/radio_view': {\n\t\t\tname:'radio_view',\n\t\t\tcomponent: require('./views/radio_view.vue')\n\t\t},\n\t\t'/tab_view': {\n\t\t\tname:'tab_view',\n\t\t\tcomponent: require('./views/tab_view.vue')\n\t\t},\n\t\t'/slider_view': {\n\t\t\tname:'slider_view',\n\t\t\tcomponent: require('./views/slider_view.vue')\n\t\t},\n\t\t'/forbidden':{\n\t\t\tname:'forbidden',\n\t\t\tcomponent: require('./views/forbidden.vue')\n\t\t},\n\t\t'/test':{\n\t\t\tname:'test_view',\n\t\t\tcomponent: require('./views/test.vue')\n\t\t},\n\t\t'async':{\n\t\t\t//http://forum.vuejs.org/topic/114/vue-router-异步加载的例子\n\t\t\t//http://vuejs.github.io/vue-router/zh-cn/lazy.html\n\t\t\tname:'async',\n\t\t\tcomponent: function(reslove){\n\t\t\t\t//异步加载，\n\t\t\t\t//例子\n\t\t\t\treturn require(['./views/async.vue'],reslove)\n\t\t\t}\n\t\t},\n\t\t'async_loading':{\n\t\t\t//http://forum.vuejs.org/topic/114/vue-router-异步加载的例子\n\t\t\tname:'async_loading',\n\t\t\tcomponent: function(reslove){\n\t\t\t\t//异步加载，\n\t\t\t\t//例子\n\t\t\t\treturn require(['./views/async_loading.vue'],reslove)\n\t\t\t}\n\t\t},\n\n\t\t//触摸事件\n\t\t'touch':{\n\t\t\tname:'touch',\n\t\t\tcomponent:function(reslove){\n\t\t\t\treturn require(['./views/touch.vue'],reslove)\n\t\t\t}\n\t\t},\n\t\t// not found handler\n\t    '*': {\n\t      component: require('./views/not_found.vue')\n\t    }\n\t});\n\n\twindow.routeList=[];\n\trouter.beforeEach(function(transition){\n\t\tconsole.log('before---------------');\n\t\t//可以通过在路由中的自定义字段来验证用户是否需要登陆\n\t\t// if(transition.to.auth){\n\t\t// \tconsole.log('通过配置路由中自定义的字段验证是否需要登陆');\n\t\t// }\n\n\t\t// //如果是中止，这里可以判断用户登录\n\t\t// //if(transition.to.path === '/forbidden'){\n\t\tif(transition.to.name == 'forbidden'){\n\t\t\trouter.app.authenticating = true\n\t\t\tsetTimeout(function(){\n\t\t\t\trouter.app.authenticating = false\n\t\t\t\talert('此路由在全局中设置为中止');\n\t\t\t\ttransition.abort();\n\t\t\t},1500);\n\t\t}\n\n\t\tif(routeList.length > 1 && transition.to.name==routeList[routeList.length-2]['name']){\n\t\t\trouter.app.effect='back';\n\t\t\trouteList.splice(routeList.length-1,1);\n\t\t\tconsole.log(routeList);\n\t\t} else {\n\t\t\trouter.app.effect='fade';\n\t\t\trouteList.push({\n\t\t\t\tname : transition.to.name,\n\t\t\t\tpath : transition.to.path,\n\t\t\t\tquery : transition.to.query,\n\t\t\t\tparams : transition.to.params,\n\t\t\t\ttimer: +new Date\n\t\t\t});\n\t\t}\n\n\t\t//setTimeout(function(){\n\t\t\ttransition.next();\n\t\t//},1000);\n\t});\n\n\n\t//可以记录访问路径\n\trouter.afterEach(function(transition){\n\t\tconsole.log('-----------------after');\n\t\tfor (var i = 0; i < routeList.length; i++) {\n\t\t\tconsole.log(routeList[i].name);\n\t\t};\n\t});\n}"
  },
  {
    "path": "src/views/about.vue",
    "content": "<template>\n<div>\n  <p>about-{{msg}}</p>\n  测试图片\n  <!-- <img src='{{imageSrc}}'> 绑定图片的时候使用 :src，如果直接用src 会有如下告警，会出现一个404请求-->\n  <!-- [Vue warn]: src=\"{{imageSrc}}\": interpolation in \"src\" attribute will cause a 404 request. Use v-bind:src instead. -->\n  <img v-bind:src=\"imageSrc\">\n  <div class=\"img_holder\"></div>\n </div>\n</template>\n\n<script>\nrequire('../css/a.css');\nmodule.exports = {\n\tdata:function(){\n\t\treturn {\n\t\t\timageSrc:require('../images/logo.png'),\n\t\t\tmsg:'aboutMessage',\n\t\t\ttitle:'about'\n\t\t}\n\t},\n\troute:{\n\t\tactivate:function(transition){\n\t\t\tthis.$root.$set('header',this.title);\n\t\t\ttransition.next();\n\t\t}\n\t}\n};\n</script>\n\n<style>\n\t.img_holder{\n\t\twidth:100%;\n\t\tpadding-bottom: 100%;\n\t\tbackground: url(../images/logo.png) no-repeat;\n\t\tbackground-size:cover;\n\t}\n</style>\n"
  },
  {
    "path": "src/views/async.vue",
    "content": "<template>\n<p>\n\t<a href=\"http://vuejs.github.io/vue-router/zh-cn/lazy.html\" target=\"_blank\">动态组件载入 lazy load</a>\n</p>\n</template>\n\n<script>\n\trequire('../css/b.css');\n\tmodule.exports = {\n\t\t//props: ['父组建传的值'],\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\ttitle:'async'\n\t\t\t}\n\t\t},\n\t\tready:function(){\n\t\t\tthis.$root.$set('header',this.title)\n\t\t}\n\t}\n</script>"
  },
  {
    "path": "src/views/async_loading.vue",
    "content": "<template>\n<p>\n\t在此router的配置中加上 waitForData:true 。 <a target=\"_blank\" href=\"http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html\">详情</a>\n</p>\n\n</template>\n\n<script>\n\trequire('../css/b.css');\n\tmodule.exports = {\n\n\t\t//props: ['父组建传的值'],\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\ttitle:'async'\n\t\t\t}\n\t\t},\n\t\troute:{\n\t\t\twaitForData:true,\n\t\t\tdata:function(transition){\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\ttransition.next();\n\t\t\t\t},3000);\n\t\t\t}\n\t\t},\n\t\tready:function(){\n\t\t\tthis.$root.$set('header',this.title)\n\t\t}\n\t}\n</script>"
  },
  {
    "path": "src/views/forbidden.vue",
    "content": ""
  },
  {
    "path": "src/views/home.vue",
    "content": "<template>\n  <div>首屏</div>\n</template>\n<script>\nmodule.exports = {\n\tdata:function(){\n\t\treturn {\n\t\t\tmsg:'aboutMessage',\n\t\t\ttitle:'home'\n\t\t}\n\t},\n\troute:{\n\t\tactivate:function(transition){\n\t\t\tthis.$root.$set('header',this.title);\n\t\t\ttransition.next();\n\t\t}\n\t},\n};\n</script>"
  },
  {
    "path": "src/views/modal_view.vue",
    "content": "<template>\n<div>\n\t  <button type=\"text\" @click = \"showModal=true\"> 显示该页面modal </button>\n\t  <!--此种写法详情 https://github.com/yyx990803/vue/issues/1325-->\n\t  <modal :show.sync=\"showModal\" :confirmfn.sync=\"confirmfn\"  :cancelfn.sync=\"cancelfn\" v-ref:index-modal>\n      <!--\n        you can use custom content here to overwrite\n        default content\n      -->\n      <h3 slot=\"header\">这是嵌入到页面中单独的modal</h3>\n      <h3 slot=\"body\">\n      \t通过设置，以下属性传值\n      \t\t:confirmfn.sync=\"confirmfn\"  :cancelfn.sync=\"cancelfn\"\n      </h3>\n      <slot slot=\"footer\">\n      \t<p>覆盖掉原来的footer</p>\n      </slot>\n    </modal>\n</div>\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\tshowModal:false,\n\t\t\t\tmodalbody:'body内容'\n\t\t\t}\n\t\t},\n\t\tcomponents:{\n\t\t\tmodal:require('../components/modal.vue')\n\t\t},\n\t\troute:{\n\t\t\tactivate:function(transition){\n\t\t\t\tthis.$root.$set('header',this.modalbody);\n\t\t\t\ttransition.next();\n\t\t\t}\n\t\t},\n\t\tmethods:{\n\t\t\tconfirmfn:function(){\n\t\t\t\tthis.showModal = false;\n\t\t\t},\n\t\t\tcancelfn:function(){\n\t\t\t\tthis.showModal = false;\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>"
  },
  {
    "path": "src/views/my_views.vue",
    "content": "<style>\n .my-views h2 {\n\tcolor:red;\n }\n</style>\n<template>\n<div> <!--要使用 $loadingRouteData 过渡效果的时候 不能用作片段，必须要在最外层包一层div-->\n\t<p>在模板中使用 $loadingRouteData ：</p>\n\t<div v-if=\"$loadingRouteData\" >Loading ...这里是在data钩子切换的时候获取的$loadingRouteData的元素属性，此操作必须是在一个延迟方法中进行的</div>\n\t<div v-if=\"!$loadingRouteData\" class=\"my-views\">\n\t\t<div v-show=\"a\" >这里是data 获取完数据过渡之后获取的值 {{a}}</div>\n\t\t<h2>{{msg}}</h2>\n\t</div>\n\n\t<h3>获取的query : {{$route.query|json}} <a v-link=\"{name:'my_views',query:{a:1}}\">修改query</a></h3>\n\n\n\t<p>触发顺序</p>\n\t<pre style=\"line-height:1.5\">\n\t<div v-for=\"(k, val) in lifecycle\" track-by=\"$index\">{{k}} --> {{{val}}}</div>\n\t</pre>\n\t<p>注意：第一次进入 和 再次进入（试着切换到其他路径，再回来） </p>\n</div>\n</template>\n\n<script>\n\n\tvar lifecycle = []; //为了描述生命周期， 在 canActivate 阶段 还没有 this.lifecycle\n\n\t module.exports = {\n\t \t//props: ['父组建传的值'],\n\t \tdata:function(){\n\t \t\tlifecycle.push(\"data\");\n\t \t\treturn {\n\t \t\t\tmsg: '各个阶段，可以查看控制台输出，message from my-views',\n\t \t\t\ttitle:'my_views',\n\t \t\t\tlifecycle:lifecycle\n\t \t\t}\n\t \t},\n\t \t//这里才是route的生存周期\n\t \troute:{\n\t \t\t//waitForData: true, //数据加载完毕后再切换试图，也就是 点击之后先没反应，然后数据加载完，再出发过渡效果\n\t\t \tcanActivate:function(transition){\n\t\t    \t//canActivate阶段，可以做一些用户验证的事情\n\t\t    \tlifecycle.push(\"route.canActivate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/can-activate.html'>在验证阶段，当一个组件将要被切入的时候被调用。</a>\");\n\t\t    \treturn true;\n\t\t    },\n\t\t    activate:function(transition){\n\t\t    \t//console.log('active');\n\t\t    \tthis.lifecycle.push(\"route.activate <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html'>在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据。</a>\");\n\t\t    \tthis.$root.$set('header',this.title);\n\n\t\t    \ttransition.next();\n\t\t    \t//此方法结束后，api会调用afterActivate 方法\n\t\t    \t//在aftefActivate中 会给组件添加 $loadingRouteData 属性 并设置为true\n\t\t    },\n\t\t\tdata: function(transition) {\n\t\t\t\tvar _this = this;\n\n\t\t\t\tthis.lifecycle.push(\"route.data <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html'>在激活阶段被调用，在 activate 被断定（ resolved ，指该函数返回的 promise 被 resolve ）。用于加载和设置当前组件的数据</a>\");\n\n\t\t\t\t// 说明之前请求过 则不用再请求了\n\t\t\t\tif(this.$root.myViewsData){\n\t\t\t\t\tthis.$data = this.$root.myViewsData;\n\t\t\t\t\ttransition.next();\n\t\t\t\t\tconsole.log('已经请求过了不再请求数据');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t//将数据同步到根节点\n\t\t\t\tthis.$root.myViewsData = this.$data;\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t//这里 _this.$loadingRouteData 是 true\n\t\t\t\t\ttransition.next({msg:'加载后的数据'});\n\t\t\t\t\t//在调用完transition.next 后，_this.$loadingRouteData 为 false\n\t\t\t\t}.bind(this),4000);\n\t\t\t},\n\t\t\tcanDeactivate:function(transition){\n\t\t\t\tthis.lifecycle.push(\"route.data <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/can-deactivate.html'>在验证阶段，当一个组件将要被切出的时候被调用。</a>\");\n\t\t\t\ttransition.next();\n\t\t\t},\n\t\t\tdeactivate: function (transition) {\n\t\t\t\tthis.lifecycle.push(\"route.deactivate  <a href='http://vuejs.github.io/vue-router/zh-cn/pipeline/deactivate.html'>在激活阶段，当一个组件将要被禁用和移除之时被调用。</a>\");\n\t\t\t\tthis.lifecycle = [];\n\t\t\t\ttransition.next();\n\t\t\t}\n\t \t},\n\t \tcreated:function(){\n\t\t\tthis.lifecycle.push(\"created <a href='http://cn.vuejs.org/api/options.html#created'>在实例被创建的时候同步调用。在这个阶段，实例已经完成了包含以下内容的准备工作：数据观察，计算属性，方法，以及事件回调。但 DOM 编译还没开始，vm.$el 此时尚不可用。</a>\");\n\t\t},\n\t\tbeforeCompile:function(){\n\t\t\tthis.lifecycle.push(\"beforeCompile <a href='http://cn.vuejs.org/api/options.html#beforeCompile'>在编译开始之前调用。</a>\");\n\t\t},\n\t\tcompiled:function(){\n\t\t\tthis.lifecycle.push(\"compiled <a href='http://cn.vuejs.org/api/options.html#compiled'>在编译完成后调用。在这个阶段，所有的指令都已经完成绑定，数据变化会触发DOM更新。但此时尚不能保证 $el 已经被插入到DOM中。</a>\");\n\t\t},\n\t\tready:function(){\n\t\t\tthis.lifecycle.push(\"ready <a href='http://cn.vuejs.org/api/options.html#ready'>在编译完成后并且 $el 第一次插入文档时调用，也就是刚好在第一次 attached 钩子之后调用。注意只有通过指令或 Vue 实例方法，比如 $appendTo() 插入才会触发 ready。</a>\");\n\t\t},\n\t\tattached:function(){\n\t\t\tthis.lifecycle.push(\"attached <a href='http://cn.vuejs.org/api/options.html#attached'>当 vm.$el 被一个指令或是 vm 实例方法（例如$appendTo()）插入到DOM里的时候调用。注意直接操作 vm.$el 不会触发这个事件。</a>\");\n\t\t},\n\t\tdetached:function(){\n\t\t\tthis.lifecycle.push(\"detached <a href='http://cn.vuejs.org/api/options.html#detached'>当 vm.$el 被一个指令或是 vm 实例方法从 DOM 里移除的时候调用。注意直接操作 vm.$el 不会触发这个事件。</a>\");\n\t\t},\n\t\tbeforeDestroy:function(){\n\t\t\tthis.lifecycle.push(\"beforeDestroy  <a href='http://cn.vuejs.org/api/options.html#beforeDestroy'>在一个 Vue 实例被销毁之前调用。这个时候，实例的绑定和指令仍工作正常。</a>\");\n\t\t},\n\t\tdestroyed:function(){\n\t\t\tthis.lifecycle.push(\"destroyed <a href='http://cn.vuejs.org/api/options.html#destroyed'>在一个 Vue 实例被销毁之后调用。当这个钩子被调用时，该 Vue 实例的所有指令都已经被解除绑定，所有子实例也已经被销毁。注意如果有一个离开过渡效果，destroyed 会在过渡效果结束之后才被调用。</a>\");\n\t\t}\n\t }\n</script>"
  },
  {
    "path": "src/views/my_views_detail.vue",
    "content": "<style>\n\n .view-detail {\n\tcolor:red;\n }\n</style>\n\n<template>\n<div class=\"view-detail\"> <!--要使用 $loadingRouteData 过渡效果的时候 不能用作片段，必须要在最外层包一层div-->\n\t<p>请求参数{{$route.params | json}}</p>\n\t<div v-if=\"$loadingRouteData\">正在加载.....</div>\n\t<p v-text=\"a\"></p>\n  <a v-link=\"{ name: 'my_views_detail', params: { viewId:'123' }, exact: true }\">修改参数试试</a>\n</div>\n</template>\n\n<script>\n\n\t module.exports = {\n\t \tdata:function(){\n\t \t\treturn {\n\t \t\t\ta:'',\n\t \t\t\ttitle:'详情'\n\t \t\t}\n\t \t},\n\t \t//这里才是route的生存周期\n\t \troute:{\n\t\t\tdata: function(transition) {\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\ttransition.next({a:'通过' + JSON.stringify(this.$route.params) + '获取的值'});\n\t\t\t\t}.bind(this),3000);\n\t\t\t},\n\t\t\tactivate:function(transition){\n\t\t\t\tthis.$root.$set('header',this.title);\n\t\t\t\ttransition.next();\n\t\t\t}\n\t \t}\n\t }\n</script>"
  },
  {
    "path": "src/views/not_found.vue",
    "content": "\n<style>\n\n.p {\n  color: red;\n}\n</style>\n\n<template>\n  <p>404</p>\n</template>\n<script>\nmodule.exports = {\n\tdata:function(){\n\t\treturn {\n\t\t\ttitle:'404'\n\t\t}\n\t},\n\troute:{\n\t\tactivate:function(transition){\n\t\t\tthis.$root.$set('header',this.title);\n\t\t\ttransition.next();\n\t\t}\n\t},\n};\n</script>"
  },
  {
    "path": "src/views/radio_view.vue",
    "content": "<template>\n<div>\n\t<uiradio :items.sync=\"mutilCheckitems\" :mutil-check.sync=\"mutilCheck\">\n\t<h3 slot=\"title\">多选</h3>\n\t</uiradio>\n\t<uiradio :items.sync=\"singleCheckitems\" :mutil-check.sync=\"singleCheck\">\n\t<h3 slot=\"title\">单选</h3>\n\t</uiradio>\n</div>\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tdata:function(){\n\t\t\t//因为在 主 vue 里面使用了 keep-alive 标识，所以再次切换到此视图的时候，还是上次切换的状态\n\t\t\treturn {\n\t\t\t\tmutilCheckitems:[{text:'选项一',checked:false},{text:'选项二',checked:false},{text:'选项三',checked:false}],\n\t\t\t\tsingleCheckitems:[{text:'选项一',checked:false},{text:'选项二',checked:false},{text:'选项三',checked:false}],\n\t\t\t\tmutilCheck:true,\n\t\t\t\ttitle:'radio模拟'\n\t\t\t}\n\t\t},\n\t\tcomputed:{\n\t\t\tsingleCheck:function(){\n\t\t\t\treturn false;\n\t\t\t}\n\t\t},\n\t\tcomponents:{\n\t\t\tuiradio:require('../components/radio.vue')\n\t\t},\n\t\troute:{\n\t\t\tactivate:function(transition){\n\t\t\t\tthis.$root.$set('header',this.title);\n\t\t\t\ttransition.next();\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>"
  },
  {
    "path": "src/views/select_view.vue",
    "content": "<template>\n<div>\n\t  <uiselect :items.sync=\"items\">\n\t\t<h3 slot=\"title\">性别</h3>\n      </uiselect>\n</div>\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\titems:[{text:'男',hover:false},{text:'女',hover:false}],\n\t\t\t\ttitle:'select模拟'\n\t\t\t}\n\t\t},\n\t\tcomponents:{\n\t\t\tuiselect:require('../components/select.vue')\n\t\t},\n\t\troute:{\n\t\t\tactivate:function(transition){\n\t\t\t\tthis.$root.$set('header',this.title);\n\t\t\t\ttransition.next();\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>"
  },
  {
    "path": "src/views/slider_view.vue",
    "content": "<template>\n<div class=\"swiper-container\" v-el:swper>\n    <div class=\"swiper-wrapper\">\n        <div class=\"swiper-slide\">Slide 1</div>\n        <div class=\"swiper-slide\">Slide 2</div>\n        <div class=\"swiper-slide\">Slide 3</div>\n        <div class=\"swiper-slide\">Slide 4</div>\n        <div class=\"swiper-slide\">Slide 5</div>\n        <div class=\"swiper-slide\">Slide 6</div>\n        <div class=\"swiper-slide\">Slide 7</div>\n        <div class=\"swiper-slide\">Slide 8</div>\n        <div class=\"swiper-slide\">Slide 9</div>\n        <div class=\"swiper-slide\">Slide 10</div>\n    </div>\n</div>\n</template>\n\n<script>\n\trequire('../../node_modules/swiper/dist/css/swiper.min.css');\n\tvar Swiper = require('swiper');\n\t//var swiper = new Swiper('.swiper-container');\n\tmodule.exports = {\n\t\t//props: ['父组建传的值'],\n\t\tdata:function(){\n\t\t\tconsole.log('1-1这里是组建的data,在route的 canActivate之后调用');\n\t\t\treturn {\n\t\t\t\tmsg:'这里返回数据'\n\t\t\t}\n\t\t},\n\t\tready:function(){\n\t\t\tnew Swiper(this.$el);\n\t\t}\n\t}\n</script>\n\n<style>\n <style>\n\n    .swiper-container {\n        width: 500px;\n        height: 300px;\n        margin: 20px auto;\n    }\n    .swiper-slide {\n        text-align: center;\n        font-size: 18px;\n        background: #fff;\n        /* Center slide text vertically */\n        display: flex;\n        -webkit-box-pack: center;\n        -ms-flex-pack: center;\n        -webkit-justify-content: center;\n        justify-content: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n    }\n    </style>\n</style>"
  },
  {
    "path": "src/views/tab_view.vue",
    "content": "<template>\n<div>\n\t<p>切换效果:渐变（默认）</p>\n\t\t<tabs>\n\t\t\t<div class=\"tab-content\" slot=\"tab-content\">\n\t\t\t\t<tab header=\"one\">\n\t\t\t\t\t<p slot=\"tab-panel\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n\t\t\t\t\tquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n\t\t\t\t\tconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n\t\t\t\t\tcillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n\t\t\t\t\tproident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\t\t\t\t\t</p>\n\t\t\t\t</tab>\n\t\t\t\t<tab header=\"two\">\n\t\t\t\t\t<p slot=\"tab-panel\">\n\t\t\t\t\tipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n\t\t\t\t\tquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n\t\t\t\t\t</p>\n\t\t\t\t</tab>\n\t\t\t\t<tab header=\"three\">\n\t\t\t\t\t<p slot=\"tab-panel\">\n\t\t\t\t\tipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n\t\t\t\t\ttempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n\t\t\t\t\tquis nostrud\n\t\t\t\t\t</p>\n\t\t\t\t</tab>\n\t\t\t</div>\n\t\t</tabs>\n\n\t\t<p>通过v-for声明，切换效果左右滑动</p>\n\t\t<tabs effect=\"fadeInRight\">\n\t\t\t<div class=\"tab-content\" slot=\"tab-content\">\n\t\t\t\t<tab v-for=\"item in list\" :header=\"item.header\" :disabled.sync=\"item.disabled\">\n\t\t\t\t<p slot=\"tab-panel\">\n\t\t\t\t{{item.content}}\n\t\t\t\t</p>\n\t\t\t\t</tab>\n\t\t\t</div>\n\t\t</tabs>\n</div>\n</template>\n\n<script>\n\tmodule.exports = {\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\ttitle:'tab选项卡',\n\t\t\t\tlist:[\n\t\t\t\t\t{header:'one ',content:'blablablablabla...',disabled:false},\n\t\t\t\t\t{header:'two ',content:'bilibilibilibli...',disabled:false},\n\t\t\t\t\t{header:'three disabled ',content:'',disabled:true},\n\t\t\t\t]\n\t\t\t}\n\t\t},\n\t\tcomponents : {\n\t\t\ttabs : require('../components/tabset.vue'),\n\t\t\ttab  : require('../components/tab.vue')\n\t\t},\n\t\tready:function(){\n\t\t\tthis.$root.$set('header',this.title);\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>"
  },
  {
    "path": "src/views/test.vue",
    "content": "<template>\n<pre>\n     &lt; >~!@#$%^&*()__+?{}|\\ 如果模板中有 &lt; 此字符，需要使用:'&+lt;'  那么在压缩的时候会报错\n     PRODUCTION=1 webpack\n</pre>     \n</template>\n<script>\n\tmodule.exports = {}\n</script>"
  },
  {
    "path": "src/views/touch.vue",
    "content": "<template>\n<div>\n<p>\n\t触摸事件\n</p>\n<div class=\"touch_area\" @click=\"click\" >fastclick-click(点击){{eventLog}}</div>\n<div class=\"touch_area\" v-touch:tap=\"tap\" >hammerjs-tap(点击){{eventLog}}</div>\n<div class=\"touch_area\" v-touch:swipe=\"swipe\" >hammerjs-swipe(快速滑){{eventLog}}</div>\n<div class=\"touch_area\" v-touch:press=\"press(this)\" >hammerjs-Press(长按 超过500ms触发){{eventLog}}</div>\n<div class=\"touch_area\" v-touch:pinchin=\"pinchin\" >hammerjs-pinchin(双指缩小)此处无法滚动页面{{eventLog}}</div>\n<div class=\"touch_area\" v-touch:pinchout=\"pinchout\" >hammerjs-pinchout(双指放大)此处无法滚动页面{{eventLog}}</div>\n\n<pre style=\"overflow:auto;\">\nPan事件：在指定的dom区域内，\n一个手指放下并移动事件\n\nPinch事件：在指定的dom区域内，\n两个手指（默认为两个手指，多指触控需要单独设置）\n\nPress事件：在指定的dom区域内触屏版本的点击事件\n\nSwipe事件：在指定的dom区域内，\n一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。\n\nTap事件：在指定的dom区域内，\n一个手指轻拍或点击时触发该事件(类似PC端的click)。\n该事件最大点击时间为250毫秒，\n如果超过250毫秒则按Press事件进行处理。\n\n</pre>\n<a href=\"http://www.cnblogs.com/iamlilinfeng/p/4239957.html\">关于各个手势的说明</a>\n\n</div>\n</template>\n<script>\n\tmodule.exports = {\n\t\tdata:function(){\n\t\t\treturn {\n\t\t\t\teventLog:''\n\t\t\t}\n\t\t},\n\t\tmethods:{\n\t\t\tclick:function(){\n\t\t\t\tthis.eventLog = 'click:' + ( Math.random()*100|0 );\n\t\t\t},\n\t\t\ttap:function(){\n\t\t\t\tthis.eventLog = 'tap:' + ( Math.random()*100|0 );\n\t\t\t},\n\t\t\tswipe:function(){\n\t\t\t\tthis.eventLog = 'swipe:' + ( Math.random()*100|0 );\n\t\t\t},\n\t\t\tpress:function(e){\n\t\t\t\tthis.eventLog = 'press:' + ( Math.random()*100|0 );\n\t\t\t},\n\t\t\tpinchin:function(){\n\t\t\t\tthis.eventLog = 'pinchin:' + ( Math.random()*100|0 );\n\t\t\t},\n\t\t\tpinchout:function(){\n\t\t\t\tthis.eventLog = 'pinchout:' + ( Math.random()*100|0 );\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style>\n\t.touch_area{\n\t\theight:300px;\n\t\tbackground:#45a3e9;\n\t\tmargin-bottom:50px;\n\t}\n\n</style>"
  },
  {
    "path": "src/vtouch.js",
    "content": "\n  var vueTouch = {}\n  var Hammer = typeof require === 'function'\n    ? require('hammerjs')\n    : window.Hammer\n  var gestures = ['tap', 'pan', 'pinch', 'press', 'rotate', 'swipe']\n  var customeEvents = {}\n\n  vueTouch.install = function (Vue) {\n\n    Vue.directive('touch', {\n\n      isFn: true,\n      acceptStatement: true,\n\n      bind: function () {\n        if (!this.el.hammer) {\n          this.el.hammer = new Hammer.Manager(this.el)\n        }\n        var mc = this.mc = this.el.hammer\n        // determine event type\n        var event = this.arg\n        var recognizerType, recognizer\n\n        if (customeEvents[event]) { // custom event\n          var custom = customeEvents[event]\n          recognizerType = custom.type\n          recognizer = new Hammer[capitalize(recognizerType)](custom)\n          recognizer.recognizeWith(mc.recognizers)\n          mc.add(recognizer)\n\n        } else { // built-in event\n\n          for (var i = 0; i < gestures.length; i++) {\n            if (event.indexOf(gestures[i]) === 0) {\n              recognizerType = gestures[i]\n              break\n            }\n          }\n          if (!recognizerType) {\n            console.warn('Invalid v-touch event: ' + event)\n            return\n          }\n          recognizer = mc.get(recognizerType)\n          if (!recognizer) {\n            // add recognizer\n            recognizer = new Hammer[capitalize(recognizerType)]()\n            // make sure multiple recognizers work together...\n            recognizer.recognizeWith(mc.recognizers)\n            mc.add(recognizer)\n          }\n\n        }\n      },\n\n      update: function (fn) {\n        var mc = this.mc\n        var vm = this.vm\n        var event = this.arg\n        // teardown old handler\n        if (this.handler) {\n          mc.off(event, this.handler)\n        }\n        // define new handler\n        this.handler = function (e) {\n          e.targetVM = vm\n          fn.call(vm, e);\n        }\n        mc.on(event, this.handler)\n      },\n\n      unbind: function () {\n        this.mc.off(this.arg, this.handler)\n        if (!Object.keys(this.mc.handlers).length) {\n          this.mc.destroy()\n          this.el.hammer = null\n        }\n      }\n\n    })\n  }\n\n  /**\n   * Register a custom event.\n   *\n   * @param {String} event\n   * @param {Object} options - a Hammer.js recognizer option object.\n   *                           required fields:\n   *                           - type: the base recognizer to use for this event\n   */\n\n  vueTouch.registerCustomEvent = function (event, options) {\n    options.event = event\n    customeEvents[event] = options\n  }\n\n  function capitalize (str) {\n    return str.charAt(0).toUpperCase() + str.slice(1)\n  }\n\n  module.exports = vueTouch;\n "
  },
  {
    "path": "vueComponent.sublime-snippet",
    "content": "<snippet>\n\t<content><![CDATA[\n<template>\n\n</template>\n\n<script>\n\tmodule.exports = {\n\t\t//props: ['父组建传的值'],\n\t\tdata:function(){\n\t\t\tconsole.log('1-1这里是组建的data,在route的 canActivate之后调用');\n\t\t\treturn {\n\t\t\t\tmsg:'这里返回数据'\n\t\t\t}\n\t\t},\n\t\t//这里才是route的生存周期\n\t\troute:{\n\t\t\t//waitForData: true, //数据加载完毕后再切换试图，也就是 点击之后先没反应，然后数据加载完，再出发过渡效果\n\t\t\tcanActivate:function(transition){\n\t\t\t\t//console.log('canActivate阶段，可以做一些用户验证的事情');\n\t\t\t\t//return authenticationService.isLoggedIn()\n\t\t\t\tconsole.log('1-canActivate');\n\t\t\t\t//debugger;\n\t\t\t\treturn true;\n\t\t\t},\n\t\t\tactivate:function(transition){\n\t\t\t\t//console.log('active');\n\t\t\t\tconsole.log('2-activate');\n\t\t\t\ttransition.next();\n\t\t\t\t//此方法结束后，api会调用afterActivate 方法\n\t\t\t\t//在aftefActivate中 会给组件添加 $loadingRouteData 属性 并设置为true\n\t\t\t},\n\t\t\tdata: function(transition) {\n\t\t\t\tvar _this = this;\n\t\t\t\tconsole.log('3-data--在 data 中获取数据比在 activate 中更加合理 见http://vuejs.github.io/vue-router/zh-cn/pipeline/data.html');\n\n\t\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t\t//在 transition.next({a:1}) 之前\n\t\t\t\t\t\t//这里 _this.$loadingRouteData 是 true  因为此时获取\n\t\t\t\t\t\ttransition.next({a:1}); //这里必须要设置一个值 不能是 transition.next();\n\t\t\t\t\t\t//这里 _this.$loadingRouteData 就是false了。  vue-router.js :2250 左右\n\t\t\t\t\t},3000);\n\t\t\t},\n\t\t\tdeactivate: function (transition) {\n\t\t\t\tconsole.log('4');\n\t\t\t\tconsole.log('Bar 销毁!')\n\t\t\t\ttransition.next()\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>\n]]></content>\n\t<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->\n\t<tabTrigger>vueComponent</tabTrigger>\n</snippet>\n"
  },
  {
    "path": "webpack.config.js",
    "content": "//先清空 n-build 文件夹下的文件\nvar fs = require('fs'),buildPath='./build/';\nvar folder_exists = fs.existsSync(buildPath);\nif(folder_exists == true)\n{\n   var dirList = fs.readdirSync(buildPath);\n   dirList.forEach(function(fileName)\n   {\n       fs.unlinkSync(buildPath + fileName);\n   });\n   console.log(\"clearing \" + buildPath);\n};\n\n//readfile\n//先把index.html里面关于style和js的hash值都删除掉，避免在使用 npm run dev 的时候，路径还是压缩后的路劲\nfs.readFile(\"index.html\",'utf-8',function(err,data){\n    if(err){\n        console.log(\"error\");\n    }else{\n      //将index.html里面的hash值清除掉\n      var devhtml = data.replace(/((?:href|src)=\"[^\"]+\\.)(\\w{20}\\.)(js|css)/g, '$1$3');\n      fs.writeFileSync('index.html', devhtml);\n    }\n});\n\nvar webpack = require('webpack');\n\n//var vue = require(\"vue-loader\");\n\n//混淆压缩\nvar uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;\n\n//检测重用模块\nvar CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;\n\n//独立样式文件\nvar ExtractTextPlugin = require(\"extract-text-webpack-plugin\");\n\n\n\n// 在命令行 输入  “PRODUCTION=1 webpack --progress” 就会打包压缩，并且注入md5戳 到 index.html里面\nvar production = process.env.PRODUCTION;\n\nvar plugins = [\n  //会将所有的样式文件打包成一个单独的style.css\n  new ExtractTextPlugin( production ? \"style.[hash].css\" : \"style.css\" , {\n    disable: false//,\n    //allChunks: true  //所有独立样式打包成一个css文件\n  }),\n  //new ExtractTextPlugin(\"[name].css\" )\n  //自动分析重用的模块并且打包成单独的文件\n  new CommonsChunkPlugin(production ? \"vendor.[hash].js\" : \"vendor.js\" ),\n  function(){\n      return this.plugin('done', function(stats) {\n        var content;\n        //这里可以拿到hash值   参考：http://webpack.github.io/docs/long-term-caching.html\n        content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2);\n        console.log('版本是：'+JSON.stringify(stats.toJson().hash));\n        //return fs.writeFileSync('build/assets.json', content);\n      });\n  }\n];\n\n//发布编译时，压缩，版本控制\nif (process.env.PRODUCTION) {\n  //压缩\n  plugins.push(new webpack.optimize.UglifyJsPlugin({compress: {warnings: false } }));\n}\n\n/*\n  版本控制\n  package.json中的\n    \"html-webpack-plugin\": \"^1.6.2\",\n  模块是把生成的带有md5戳的文件，插入到index.html中。\n  通过index.tpl模板，生成 index.html\n */\nvar HtmlWebpackPlugin = require(\"html-webpack-plugin\");\n//HtmlWebpackPlugin文档 https://www.npmjs.com/package/html-webpack-plugin\n//https://github.com/ampedandwired/html-webpack-plugin/issues/52\nplugins.push( new HtmlWebpackPlugin({\n  filename:'../index.html',//会生成index.html在根目录下,并注入脚本\n  template:'index.tpl',\n  inject:true //此参数必须加上，不加不注入\n}));\n\n\nmodule.exports = {\n    entry: [\"./src/app.js\"],\n    output: {\n        path: \"./build\",\n        /*\n                publicPath路径就是你发布之后的路径，\n                比如你想发布到你站点的/util/vue/build 目录下, 那么设置\n                publicPath: \"/util/vue/build/\",\n                此字段配置如果不正确，发布后资源定位不对，比如：css里面的精灵图路径错误\n         */\n        publicPath: \"/build/\",\n        filename: production ? \"build.[hash].js\" : \"build.js\"//\"build.[hash].js\"//[hash]MD5戳   解决html的资源的定位可以使用 webpack提供的HtmlWebpackPlugin插件来解决这个问题  见：http://segmentfault.com/a/1190000003499526 资源路径切换\n    },\n    module: {\n        preLoaders:[\n            // {\n            //     //代码检查\n            //     test:/\\.js$/,exclude:/node_modules/,loader:'jshint-loader'\n            // }\n        ],\n        loaders: [\n            // 加载vue组件，并将css全部整合到一个style.css里面\n            // 但是使用这种方式后 原先可以在vue组件中 在style里面加入 scoped 就不能用了,\n            // 好处是使用了cssnext，那么样式按照标准的来写就行了，会自动生成兼容代码 http://cssnext.io/playground/\n            {\n              test: /\\.vue$/,\n              loader: 'vue'\n            },\n            {test: /\\.css$/, loader: ExtractTextPlugin.extract(\"style-loader\", \"css-loader?sourceMap!cssnext-loader\")},\n            {test: /\\.(png|jpg)$/, loader: 'url-loader?limit=8192'}, // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL\n            {test: /\\.woff$/,   loader: \"url?limit=10000&minetype=application/font-woff\"},\n            {test: /\\.ttf$/,    loader: \"file\"},\n            {test: /\\.eot$/,    loader: \"file\"},\n            {test: /\\.svg$/,    loader: \"file\"}\n       ]\n    },\n    vue:{\n      css:ExtractTextPlugin.extract(\"style-loader\",\n                  \"css-loader?sourceMap!cssnext-loader\")\n\n    },\n    plugins : plugins,\n    devtool: 'source-map'//,\n    // resolve: {\n    //     // 现在可以写 require('file') 代替 require('file.coffee')\n    //     extensions: ['', '.js', '.json', '.coffee','vue']\n    // }\n};\n\n\n"
  },
  {
    "path": "约定.md",
    "content": "\n\n#### 使用具名路径\n\n```\n<a v-link=\"{ name: 'myviews', params: { viewId: 123 }}\">User</a>\n```\n\n#### 组件传值的时候单个单词小写，如果有多个单词用\"-\"连接 [API说明](http://rc.vuejs.org/guide/components.html#camelCase_vs-_kebab-case)\n\n```\n<uiradio :items.sync=\"mutilCheckitems\" :mutil-check.sync=\"mutilCheck\">\n\n```\n然后在组件props中用驼峰的方式访问['mutilCheck']。\n\n#### 组件传值得时候尽量不要使用表达式，可以在computed中定义\n比如：\n\n```\n\t<uiradio :items.sync=\"singleCheckitems\" :mutil-check.sync=\"!mutilCheck\">\n```\n修改为\n```\n<uiradio :items.sync=\"singleCheckitems\" :mutil-check.sync=\"singleCheck\"></uiradio>\n```\n然后定义computed\n\n```\n\t...\n\tcomputed:{\n\t\tsingleCheck:function(){\n\t\t\treturn false;\n\t\t}\n\t},\n\t...\n```\n\n#### 在绑定属性的时候\n```\n\t<div class=\"tab-panel\" v-show=\"show\" transition=\"transiton\">\n\t\t<slot name=\"tab-panel\"></slot>\n\t</div>\n\t此处的 transition=\"transiton\" 代表的是 transition 这个类名\n```\n而如果前面加个`:`则代表的是动态属性，: 是 v-bind的简写 参考 [Vue1.0.0绑定语法参考](https://github.com/vuejs/vue/issues/1325)\n\n```\n\t<div class=\"tab-panel\" v-show=\"show\" :transition=\"transiton\">\n```\n\n#### 绑定属性用双引号\n\n\n#### 关于 vueComponent.sublime-snippet 文件\n```\n功能：sublime中编写vue组件的片段提示\n使用：\n\tsublime中 菜单栏 - >Preferences - > 浏览插件\n\t将文件复制到 User目录下\n\t项目中新建 `组件名字.vue` 文件\n\tctrl+shift+p 输入 vuecomponent 回车\n```\n\n\n#### 在vue组件 template 中不能出现 `<` 字符, 如果有此字符，那么在使用webpack.optimize.UglifyJsPlugin压缩的时候，编译会报错\n\n#### DOM属性定义用\"\"包起来,否则不正确的字符可能会导致在 使用webpack.optimize.UglifyJsPlugin压缩的时候,控制台卡死。\n\n#### vue文件的，template模版中，注释的html里面如果有img标签，相关资源也会被打包。\n\n```\n\t<!--\n\t...\n\t<img src=\"./xx.jpg\">\n\t...\n\t-->\n\n```\n\n#### 在data属性里面不要定义以下划线开头的字段。\n\n```\ndata:{\n   _k:'v' // this._k 获取不到\n}\n```\n\n#### vue-router路由配置的时候，不要写下划线\n\n```\n\t'/loan':{\n\t\tname:'loan',\n\t\tcomponent: require('./views/loan.vue')\n\t},\n\t'/loan_old':{\n\t\tname:'xxx',\n\t\tcomponent: require('./views/loan_old.vue')\n\t},\n\t下面的会覆盖上面的，原来本应该跳转到loan的可能现在都跳到了loan_old\n```\n\n#### 关于版本控制\n参考：\n[http://webpack.github.io/docs/long-term-caching.html](http://webpack.github.io/docs/long-term-caching.html)\n\n[https://github.com/teambition/coffee-webpack-starter/blob/92082085d96f6c5003711e042da38bfa140d8dd6/webpack.min.coffee#L21](https://github.com/teambition/coffee-webpack-starter/blob/92082085d96f6c5003711e042da38bfa140d8dd6/webpack.min.coffee#L21)\n\n\n```\n plugins: [\n    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.[chunkhash:8].js'),\n    new webpack.optimize.UglifyJsPlugin({sourceMap: false}),\n    new ExtractTextPlugin(\"style.[chunkhash:8].css\"),\n    function() {\n      return this.plugin('done', function(stats) {\n        var content;\n        content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2);\n        return fs.writeFileSync('build/assets.json', content);\n      });\n    }\n  ]\n```\n\n#### 禁止在层上滑动(比如：背景层，不想让用户滚动)\n```\n@touchstart.stop.prevent\n```\n\n#### 如果要阻止默认事件，一定要写在前面，否则会影响其他事件绑定\n```\n@touchmove.stop.prevent @click.stop=\"show=false\"\n```\n\n#### 尽量少用<template>,用多了，感觉渲染的会慢很多。 \n```\n<template v-if=\"flag\">\n  bla bla bla...\n</template>\n```\n\n\n#### 压缩，发布生产的时候，设置 Vue.config.debug = false; 去除注释，因为某些安卓机型里面，可能会出现莫名奇妙的问题。\n\n"
  }
]