about-{{msg}}
测试图片
│ .gitignore # 忽略无需git控制的文件 比如 node_modules
│ package.json # 项目配置
│ readme.md # 项目说明
│ index.html # 首页
│ index.tpl # 首页模板 在发布的时候 执行 PRODUCTION=1 webpack 会生成一个d.html并注入脚本，样式，达到版本控制的目的
│ webpack.config.js # webpack 配置文件
│
├─node_modules
└─src
│ app.js # 启动配置，配置路由，过滤器
│ app.vue # 主vue
│ filters.js # 过滤器
│ routers.js # 路由
│
├─components # 组件
│ my-component.vue
│
├─css # 公用样式
│ common.css
│
└─views # 页面
about.vue
home.vue
not-found.vue
##学习参考：
[qingcheng](https://github.com/zerqu/qingcheng)
[vue-strap](https://github.com/yuche/vue-strap)
##项目
[m.yaomaiche.com](http://m.yaomaiche.com)
================================================
FILE: src/app.js
================================================
require('./css/common.css');//加载公共样式
require('./css/animate.css');//加载公共样式
var Vue = require('vue');
var VueTouch = require('./vtouch');
var VueRouter = require('vue-router');
var fastclick = require('fastclick');
fastclick.attach(document.body);
// register filters 自定义过滤器 金额格式化，
var filters = require('./filters');
Object.keys(filters).forEach(function(k) {
Vue.filter(k, filters[k]);
});
var App = Vue.extend(require('./app.vue'));
/*
如果还想声明一个vue实例
要放在 Vue.use(VueRouter); 之前
因为当使用了 Vue.use(VueRouter)后，改写了 Vue 的实例化方法。
*/
//var newV = new Vue();//注意看上面说明
Vue.use(VueTouch);
Vue.use(VueRouter);
var router = new VueRouter(
{
hashbang: true, //为true的时候 example.com/#!/foo/bar ， false的时候 example.com/#/foo/bar
//abstract:true, //地址栏不会有变化
//以下设置需要服务端设置
//history: false, //当使用 HTML5 history 模式时，服务器需要被正确配置 以防用户在直接访问链接时会遇到404页面。
//saveScrollPosition: false
linkActiveClass:'custom-active-class' //全局设置连接匹配时的类名 参考http://vuejs.github.io/vue-router/en/link.html
}
);
require('./routers')(router);
router.start(App,'#app');
================================================
FILE: src/app.vue
================================================
Authenticating...
当前路径: {{$route.path}}
页面状态
{{$data | json}}
about-{{msg}}
测试图片在此router的配置中加上 waitForData:true 。 详情
================================================ FILE: src/views/forbidden.vue ================================================ ================================================ FILE: src/views/home.vue ================================================覆盖掉原来的footer
在模板中使用 $loadingRouteData ：
触发顺序
{{k}} --> {{{val}}}
注意：第一次进入 和 再次进入（试着切换到其他路径，再回来）
404
================================================ FILE: src/views/radio_view.vue ================================================切换效果:渐变（默认）
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
通过v-for声明，切换效果左右滑动
{{item.content}}
< >~!@#$%^&*()__+?{}|\ 如果模板中有 < 此字符，需要使用:'&+lt;' 那么在压缩的时候会报错
PRODUCTION=1 webpack
================================================
FILE: src/views/touch.vue
================================================
触摸事件
Pan事件：在指定的dom区域内， 一个手指放下并移动事件 Pinch事件：在指定的dom区域内， 两个手指（默认为两个手指，多指触控需要单独设置） Press事件：在指定的dom区域内触屏版本的点击事件 Swipe事件：在指定的dom区域内， 一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。 Tap事件：在指定的dom区域内， 一个手指轻拍或点击时触发该事件(类似PC端的click)。 该事件最大点击时间为250毫秒， 如果超过250毫秒则按Press事件进行处理。关于各个手势的说明