Detailed description of requirejs + vue project construction, requirejsvue

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.