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 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
Vue项目中设置背景图片方法
Feb 21 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
vue插槽slot的理解和使用方法
Apr 03 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 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中实现中文字符进制转换原理分析
2011/12/06 PHP
php不用正则验证真假身份证
2013/11/06 PHP
php中autoload的用法总结
2013/11/08 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python list格式数据excel导出方法
2018/10/31 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
饭店工作计划书
2014/01/10 职场文书
企业人事任命书
2014/06/05 职场文书
大学生毕业求职信
2014/06/12 职场文书
小学教师求职信范文
2015/03/20 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
学校体育节班级口号
2015/12/25 职场文书
《包身工》教学反思
2016/02/23 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL