requirejs + vue 项目搭建详解
以前都是支持司徒正美的，毕竟咱们也是跟着司徒正美一起走进了前端的世界。所以一般MVVM都是用avalon的，当然也是考虑到项目需要支持IE6,7,8的考虑。当然在用的时候也有一些小坑和bug,都处理了。今年正美正好升级avalon2.0，加入虚拟dom的时候，不稳定了，就考试寻找其他的mvvm框架。
看了比较流行的一些框架，最后选择了vue。选择他的原因是文档比较全，而且还有中文的（你懂的），生态圈比较好，有vux,vue-loader,vue-router,组件化设计的也很好。
项目搭建的时候主要还是通过requirejs进行js模块加载（还没接触webpack，以前都是avalon+requirejs,习惯性思维了,下面就写写心路历程吧)
方案1，考虑能不能通过写个requirejs插件进行vue组件文件的加载
失败，主要是vue组件文件有template,script,style标签标签，主要通过requirejs，读取vue文件string文件进行正则分析在转换js,有点舍近求远的方法,而且这种方式只能同域名ajax请求
方案2，通过编写gulp插件，将vue文件转换为可以通过requirejs加载的js文件。
这个方案是可行的，只是template,script,style信息，需要通过正则匹配，在动态载入到当前文档中，只是有些公用方法频繁调用。
所以加入了vueComment文件，把动态加入的方法整理在一起
define(['Vue'],function(Vue){
Vue.appendHTML=function(text){
document.body.insertAdjacentHTML('beforeEnd',text);
};
varstyle;
vardoc=document;
Vue.appendCSS=function(text){
text=text+"";
if(!style){
varhead=doc.getElementsByTagName("head")[0];
varelms=head.getElementsByTagName("style");
if(elms.length==0){
if(doc.createStyleSheet){
doc.createStyleSheet();
}else{
vartmp=doc.createElement('style');
tmp.setAttribute("type","text/css");
head.appendChild(tmp);
}
elms[0].setAttribute("media","screen");
}
style=elms[0];
}
if(style.styleSheet){
style.styleSheet.cssText+=text;
}elseif(doc.getBoxObjectFor){
style.innerHTML+=text;
}else{
style.appendChild(doc.createTextNode(text))
}
};
});
gulp-vuenodejs主要代码如下，通过文件名，来确定组件名字
varthrough=require('through2');
vargutil=require('gulp-util');
varregTpl=/([\s\S]+?)<\/template>/;
varregStyle=/