Detailed description of requirejs + vue project construction, requirejsvue

Detailed description of requirejs + vue project construction, requirejsvue

We used to support situ zhengmei. After all, we followed situ zhengmei into the front-end world. Therefore, MVVM generally uses aveon. Of course, it also takes into account that the project needs to support IE6, 7, and 8. Of course, there are some pitfalls and bugs in use, and they are all handled. This year, Meimei just upgraded avalon2.0. when we joined the virtual dom, it was unstable and we took the test to find other mvvm frameworks.

I read some popular frameworks and finally chose vue. The reason for his choice is that the document is comprehensive and there are also Chinese (You know), the ecosystem is better, there are vux, vue-loader, vue-router, and componentized design is also good.

When setting up a project, we mainly load js modules through requirejs (we haven't touched webpack yet. In the past, we used to use aveon + requirejs, so we had a habitual thinking. Let's write down our journey)

Solution 1: consider whether you can write a requirejs plug-in to load the vue component file.

Failed, mainly because the vue component file contains template, script, and style label. It mainly reads the string file of the vue file through requirejs for regular analysis. In js conversion, This is a method that is not far away, in addition, this method can only be the same as the domain name ajax request.

Solution 2: Compile the gulp plug-in to convert the vue file to a js file that can be loaded through requirejs.

This scheme is feasible, except that the template, script, and style information must be dynamically loaded to the current document through regular expression matching, but some common methods are frequently called.

Therefore, the vueComment file is added to organize the dynamic addition methods.

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))     }   };　　});

The main code of gulp-vue nodejs is as follows. The component name is determined by the file name.

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);}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.