在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):pandao/gulp-vue-module开源软件地址(OpenSource Url):https://github.com/pandao/gulp-vue-module开源编程语言(OpenSource Language):JavaScript 72.8%开源软件介绍(OpenSource Introduction):gulp-vue-moduleGulp plugin for Vue.js Now, You can use Require.js / Sea.js ... etc. Front-end Module loader load Vue Component, not use Webpack and vue-loader. Usage$ npm install gulp-vue-module --save-dev
var fs = require('fs');
var path = require('path');
var gulp = require('gulp');
var rename = require('gulp-rename');
var VueModule = require('gulp-vue-module');
gulp.task('vue', function() {
return gulp.src('./vue/**/*.vue')
.pipe(VueModule({
debug : true
}))
.pipe(rename({extname : ".js"}))
.pipe(gulp.dest("./dist"));
});
gulp.task('default', ['vue']);
<style lang="scss">
$color:red;
.card {
backround: $color;
> .head {
color: $color;
background: yellow;
}
}
</style>
<template>
<div class="app" @click="click">
<p>{{a}}</p>
<list-component :msg="message"></list-component>
</div>
</template>
<script>
var Vue = require("vue");
var listComponent = require('component/list');
module.exports = Vue.extend({
data : function() {
return {
id : 23456,
message : 'Message'
}
},
methods : {
click : function() {
console.log("click()");
}
},
components: {
'list-component' : listComponent
},
template : '__template__'
});
</script>
Output : define(function(require, exports, module){
// require.loadCSS() need you implement this function
require.loadCSS({content : ".card{backround:red}.card>.head{color:red;background:yellow}"});
var Vue = require("vue/all");
var listComponent = require('component/list');
module.exports = Vue.extend({
data : function() {
return {
id : 23456,
message : 'Message'
}
},
methods : {
click : function() {
console.log("click()");
}
},
components: {
'list-component' : listComponent
},
template : '<div class="app" @click="click"><p>{{a}}</p><list-component :msg="message"></list-component></div>'
};
});
require.loadCSS = function(config) {
var head = document.getElementsByTagName("head")[0];
if (config.content) {
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) { // for IE
style.styleSheet.cssText = config.content;
} else {
style.innerHTML = config.content;
}
head.appendChild(style);
callback();
}
else if (config.url) {
var link = document.createElement('link');
link.href = config.url;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
}
}; Options{
debug : false, // Debug mode
amd : false, // AMD style, Define module name and deps
define : true, // Using define() wrapper the module, false for Node.js (CommonJS style)
defineName : false, // Define the module name
indent : ' ', // Indent whitespace
headerComment : true, // Using <header-comment> Insert the header comments
templateReplaceTag : '__template__', // vue component template replace tag
loadCSSMethod : 'require.loadCSS', // define the load css method for require
externalRequire : false // don't pass require as a parameter
}
ChangesLicenseThe MIT license. Copyright (C) 2016 Pandao |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论