requirejs + vue 项目搭建详解


Posted in Javascript onJune 16, 2017

以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界。所以一般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);
  };
  var style;
  var doc = document;
  Vue.appendCSS = function (text) {
    text = text + " ";
    if (!style) {
      var head = doc.getElementsByTagName("head")[0]; 
      var elms = head.getElementsByTagName("style"); 
      if (elms.length == 0) {
        if (doc.createStyleSheet) {
          doc.createStyleSheet(); 
        } else { 
          var tmp = 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; 
    } else if(doc.getBoxObjectFor) { 
      style.innerHTML += text;
    } else { 
      style.appendChild(doc.createTextNode(text)) 
    } 
  };

});

gulp-vue nodejs主要代码如下,通过文件名,来确定组件名字

var through = require('through2');
var gutil = require('gulp-util');

var regTpl = /<template>([\s\S]+?)<\/template>/;
var regStyle = /<style>([\s\S]+?)<\/style>/; 
var regJs = /<script>([\s\S]+?)<\/script>/; 
var reg = [/'/g, /\n/g, /([^\\]+)\.vue$/];

var vueWrite = function (file, str) {
  var match = file.path.match(reg[2]);
  var id = "vue-tpl-" + match[1];
  var appendJs = "";
  var res = "";
  str = str.replace(regTpl, function (t, h) {
    appendJs += "\tVue.appendHTML(\n'<template id=\"" + id + "\">" + h.replace(reg[0], "\\'").replace(reg[1], "\\\n") + "<\/template>');\n";
    return "";
  }).replace(regStyle, function (t, h) {
    appendJs += "\tVue.appendCSS(\n'" + h.replace(reg[0], "\\'").trim().replace(reg[1], "\\\n") + "');\n"
    return "";
  }).replace(regJs, function (t, h) {
    res = "define(function (require) {\n\trequire('VueCommon'); \n\tvar Vue = require('Vue');\n\tvar exports;\n" + appendJs + h + ";\n\texports.template = '#" + id + "';\n\texports = Vue.extend(exports);\n\tVue.component('" + match[1] + "', exports);\n\treturn exports;\n});"
    return ;
  })
  return res;
};

module.exports = function(opt){

 function run (file, encoding, callback) {
  if (file.isNull()) {
   return callback(null, file);
  }

  if (file.isStream()) {
   return callback(new gutil.PluginError('gulp-vue', 'doesn\'t support Streams'));
  }

  file.contents = new Buffer(vueWrite(file, file.contents.toString()));
  file.path = file.path + '.js';
  callback(null, file);
 }

 return through.obj(run);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
js中日期的加减法
May 06 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 #Javascript
基于AngularJS实现的工资计算器实例
Jun 16 #Javascript
Angular+Node生成随机数的方法
Jun 16 #Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 #Javascript
vue高德地图之玩转周边
Jun 16 #Javascript
You might like
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
大学生村官工作感言
2014/01/10 职场文书
关于安全的标语
2014/06/10 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
施工现场安全管理制度
2015/08/05 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers
如何利用python创作字符画
2022/06/25 Python