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 必填项判断表单是否为空的方法
Sep 14 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
如何判断php数组的维度
2013/06/10 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
js style动态设置table高度
2014/10/21 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
python插入排序算法实例分析
2015/07/03 Python
python之PyMongo使用总结
2017/05/26 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
有趣的python小程序分享
2017/12/05 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
PyTorch的torch.cat用法
2020/06/28 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
机械制造专业个人的自我评价
2013/12/28 职场文书
行政专员的岗位职责
2014/03/10 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
八年级作文之友谊
2019/12/02 职场文书
php字符串倒叙
2021/04/01 PHP
go语言求任意类型切片的长度操作
2021/04/26 Golang
选购到合适的激光打印机
2022/04/21 数码科技