一个典型的电商购物页：VUE2.0/导航列表联动/头部自动收缩/购物车动画效果
作者:admin 日期:2017-08-08这种结构在电商中很常见，比如饿了吗的店铺页。我边写边参考饿站。
项目地址:
用到的主要的第三库：
1、bscroll（iscroll的一个改进版本），滑动框架。iscroll能实现的功能，比原生滚动控制要强得多。相应的API也更好用。
2、lodash用来实现各种快速数据运算。
技术要点：
1、对于iscroll的一些API的熟悉，比如如何获取滚动高度（onScroll），如何滚动到指定位置（scrollToElement）。
2、必须在dom渲染完成后，再进行iscroll定义，可使用Vue.nextTick。再比如当容器高度发生了变化 ，必须要refresh重建当前iscroll对象。当refresh时，必须要等容器动画完成后，方可进行。
3、最难点在于建立右侧位置模型，用于左导航与右列表的位置对照。也就是说，每次滚动行为，都会触发当前位置与位置表发生比对，以随时更新左侧导航状态。
4、在建立位置模型过程中，数次用到lodash,比如说：
// 从位置数组中，查找一个最接近当前坐标的值，然后得到“这个值对应的1、2级目录ID”
var zzz = _.findLast(this.arrPosition, function(n) {
return n.posi<=posY;
});
this.sortA = zzz.sortA;
this.sortB = zzz.sortB;
如果不用工具函数，这种小算法写死人。
5、右侧列表是一次性载入的，可考虑做懒加载。如果列表特别长，也要考虑异步加载。
6、点击购物车的加号时，“小球落入购物车”这一效果，基本实现思路是，先算出起、终点的位置，然后用TweenMax实现动画。最后将其封装做成vue组件，以备重用。非本文重点，不做详述。
vue-resource1.2.0在读取非json文件时出现的问题
作者:admin 日期:2017-05-24vue-resource1.2.0版本，发现只能读取.json后缀的文件，换个后缀就不灵了。最终找到答案：
1、把vue-resource.js升级到1.3.1
2、调用处加一句 responseType:"json",
Javascript代码
- <script src="js/vue2.js"></script>
- <script src="js/vue-resource1.3.1.js"></script>
- var call = Vue.http({
- method:'GET',
- responseType:"json",
- url:"mocks/news1"
- });
- call.then(function (e) {
- console.log(e.body);
- });
VUE2.0+vue-finger.js的“新闻条左滑出按钮”组件
作者:admin 日期:2017-05-18vue-finger.js是将alloy_finger.js用于VUE2.0的一个包装小程序。在网上一直找不到跟VUE2.0很无缝搭配的组件，无奈找了个简单替代品。引用时要将两个库都引入：
XML/HTML代码
- <script src="js/alloy_finger.js"></script>
- <script src="js/vue-finger.js"></script>
示例图如下：
DEMO在此：http://258754.cn/2017/jzz/test_swipe.html
用F12模拟手机观看
寻找IOS风格的datapicker在vue2下运行
作者:admin 日期:2017-05-06目前我们做的几个移动端项目，使用vue2多页面方式，js文件用<script>方式引入。因为不能使用import方式引入组件，这就意味着网上大量的VUE2第三方组件，无法使用。
我一般建议，VUE2尽量使用element-ui等嫡系UI，设计样式也尽量与element贴近。但是element缺少一些组件，比如IOS风格的日期选择器（下图）。
.png)
我花了几个小时寻找这个datapicker组件，github、segmentfault，但没发现可用的第三方。山穷水尽之时，突然想起，这个组件最早出现在WEUI中，是否可以从WEUI提取？WEUI之前配合jquery使用，并没有跟VUE结合使用过，事后证明这只是我的一种错觉，WEUI本身是可以跟原生JS结合的，也就是说，可以跟VUE结合使用！
找到目标，开始写代码。但奇怪的是，datapicker没有完整的API官方文档，百度也查不到，最后还是通过谷歌翻墙，才找到答案。
WEUI的CSS还是容易改写的，我改写了部分CSS样式，以对应设计师的设计。
最后终于圆满解决！没有使用jquery。
主要代码如下：
methods:{
clickH:function (ii) {
var _dt = this.dtime;
weui.datePicker({
start:_dt[0][0],
end:_dt[1][0],
defaultValue: _dt[0],
onConfirm: function (result) {
Vue.set(_dt[ii], 0, result[0]); //年
Vue.set(_dt[ii], 1, result[1]); //月
Vue.set(_dt[ii], 2, result[2]); //日
}
});
},
inquireH:function () {
console.log('查询服务器');
}
},
data: {
pic:"images/bg1.jpg",
dtime:[
[2017,5,5], //日期选择器起始日期
[2017,5,10] //日期选择器最远可选日期
]
}
很实用的一个长宽比锁定组件 for vue2.0
作者:admin 日期:2017-03-17功能点：
1、长宽比锁定，per参数为百分比，如果 高：宽=200:100，则per="200"，默认宽高比为100：100（正方形）。
2、参数bg="images/c3.jpg"，背景可带图片
3、link="a.html",可以带链接
HTML中调用：
XML/HTML代码
- <div id="app" v-cloak >
- <lock-div bg="images/c3.jpg" link="a.html" per="200"></lock-div>
- <lock-div><img src="images/p3.jpg"></lock-div>
- <lock-div per="50">里面也可以放文字</lock-div>
- </div>
组件定义：
Javascript代码
- Vue.component('lockDiv', {
- props:{
- per: {type: [Number,String], default: 100 },
- bg: {type: [String], default: ""},
- link: {type: [String], default: ""}
- },
- data:function (){
- return {
- hh:100
- }
- },
- template: "<div class='lockDiv' :style=\"{height: hh + 'px', backgroundImage: 'url(' + bg + ')'}\" @click='clickH'><slot></slot></div>",
- methods: {
- clickH:function(){
- if(this.link){
- window.location.href=this.link;
- }
- }
- },
- mounted: function() {
- this.hh = this.$el.offsetWidth* this.per/100;
- }
- });
显示效果：
VUE开发的三个阶段
作者:admin 日期:2017-03-14长沙很多开发团队，看待vue还是一个新事物。我还记得半年前，一个项目经理从网站找到了iview这样的第三方组件库，准备使用，但是团队的现实情况是，vue刚开始使用，webpack没有使用经验。他还以为vue的第三方库跟jquery组件使用方式类似。
目前，身边也有不少朋友，还只把vue当页面渲染器用。并不太了解组件化方式。所以我画出这个阶段图，给vue传道时，可以节省一些口水。
选择适合自己的步调，不要太激进，一口吃不掉胖子。
脑图地址：
http://naotu.baidu.com/file/17f6177717e34b26775fa3bd8e91956e?token=f1078f80a16ed553
VUE2.0 组件功能测试(普通使用，非单文件组件)
作者:admin 日期:2017-03-07实践vue-cli 2.0碰到的一些问题，官方教材上没有提到的一些事
作者:admin 日期:2017-02-12最近跟着慕课网的教材实战了一个项目：http://coding.imooc.com/learn/list/74.html（Vue.js高仿饿了么外卖App）。我从vue1.0到2.0都撸了一下代码，做出了例子。本文讲到的一些坑，都是根据我的笔记整理的，菜鸟们可参考，大牛请无视。
一、是否要升vue 2.0
vue版本已经升到2.*，所有配套的vueRouter、第三方组件，都跟着升到2.0。1.0的淘汰指日可待。因此没啥好犹豫的，能用2.0就直接升吧。
目前所有的官方文档已经升2.0了，但是网上流传的大量例子，都还是1.0的，因此实践前，请一定注意版本！请一定注意版本！请一定注意版本！
二、是否要使用vue-cli
要实践vue组件化、单页面应用的例子，请一定使用vue-cli。我之前没有使用脚手架，自己用Webpack实验，太麻烦了！说多了都是泪。如果使用vue-cli，基本上跟着教程走就行了。再次提到版本问题！--目前(2017年2月)默认vue init命令，安装的是2.0的脚手架。
三、npm大坑
如果你是新人，并不需要兼容之前1.0版本，那么恭喜你，请直接入2.0坑 ------vue init命令很容易就完成了，接下来的npm i安装是一个大坑。我在新手群里看到一半以上的新人都卡在这里。npm说白了，就是要把所有的依赖项安装好。我从头装了一下vue-cli2.0，并统计了一下，node_modules目录下有87个子目录，140M。
但这个过程并不会很顺利！
我在数次安装vue-cli的过程中，都没有一次搞定。基本流程是，装完后运行一下npm run dev---报错---根据报错信息，用npm i --save *** 修复某个依赖---再run---再报错---再修复.....修复个五六次，最后才出现locathost:8080的提示，浏览器中出现第一个demo页，这时候才叫安装成功！
有时候,npm奇慢无比，5分钟以上还没装完。这时候要果断ctrl+c，再次npm，或转用cnpm---cnpm安装过程也有坑，此处不展开，请自行百度。
我在这里分享一个纯净包，可直接越过冗长的npm i过程，这个包里面已经带上了node_modules目录，解压后直接npm run dev即可调试。
四、单页面还是多页面
vue推荐的方式是单页面应用(SPA)。但是实际情况，就本地区（长沙）来说，现实工作中，多页面方式更普遍。多页面方式一样也可以使用vue强大的组件系统和脚手架。在github.com搜索“vue2 multipage”,会得到不少多页面脚手架。此处不展开。
五、关于npm run build的几个参数
如果你九死一生走到这里，能生成dist目录下的文件的话，这才迈入了真正的实战。
config/index.js可以配置输出，以下几项可修改成如下：
assetsSubDirectory: 'static', //输出的依赖文件夹路径可自定义
assetsPublicPath: '', //默认值是assetsPublicPath: '/'，即引用的js以“/”开头，则必须在根路径下使用
productionSourceMap: false, //不输入.map调试文件
总结：
越过以上几道关，VUE的开发环境就基本搭建成功。意味着你可以愉快的调试代码，按一下ctrl+s存盘，就能在浏览器中看到相应的变化。Vue接下来的一千多个大坑，都在后面等着你......
一些关于vue的实践将陆续首发到本人技术博客上，长沙前端开发与培训，www.contactu.cn
推荐一个资源站：https://www.awesomes.cn/subject/vue(感谢佳浩提供资源线索)
