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开发 Ajax开发入门
Oct 14 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
jquery 图片轮换效果
Jul 29 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
活动总结怎么写啊
2014/05/07 职场文书
质量提升方案
2014/06/16 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
企业2014年度工作总结
2014/12/10 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
社区宣传标语口号
2015/12/26 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL