Vue. Js can also be componentized, which results in the most important introduction of many, many JS files, like this: Gulp+Browserify+Vueify
<script src='js/component1.vue'></script>
<script src='js/component2.vue'></script>
<script src='js/component3.vue'></script>
<script src='js/component4.vue'></script>
Copy the codeThis will bring some trouble to the maintenance of the code in the future, but also for the client to visit the web page increased a lot of Get requests. To eliminate these problems, we can use Browserify to package all dependent JS files into a single file
The code is prepared to write two simple vue components: child.vue
<template>
<div>The Child</div>
</template>
<script>
module.exports = {
methods: {
test: function () {
console.log('run it.');
}
}
}
</script>
Copy the codeParent.vue
<template>
<div id="box">
<div>helloworld</div>
<child></child>
</div>
</template>
<script>
module.exports = {
components : {
'child' : require('./Child.vue')
}
}
</script>
Copy the codeThen write the main page (index.html) and the main page entry file (app.js) index.html
<! DOCTYPE html> <html> <head> <meta charset="utf-8" />
<title>browserify+vueify</title>
</head>
<body>
<parent></parent>
<script src="lib/js/vue.js"></script>
<script src="js/bundle.js"></script> <! Gulp +browserify </body> </ HTML >Copy the codeapp.js
var Parent = require('./Parent.vue');
new Vue({
el:'body',
components:{
'parent': Parent
}
});
Copy the codeInstall Gulp and its dependencies
Update NPM to latest version
npm install npm -g
Copy the codeNot updating can cause unexpected problems, so it’s best to update it
Install dependencies
npm install --save-dev gulp browserify vinyl-source-stream vue vueify
Copy the codeIf you are currently using vue version 1.x, you will need to install an older version of Vueify
NPM install - save - dev [email protected]Copy the codeCompile gulpfile.js
var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var vueify = require("vueify");
gulp.task('vueify'.function() {return browserify('./src/js/app.js').transform(vueify) // preprocess.bundle() // package.pipe()source('bundle.js'))
.pipe(gulp.dest('src/js')); // Output final file});Copy the codeRun gulp vueify on the command line. Note that if the system variable NODE_ENV is develop, the resulting package file will contain a lot of messy debugging information, resulting in a large file. So if you type set NODE_ENV = production on the command line, you won’t get a lot of messy debugging information.
(function e(t,n,r){function s(o,u){if(! n[o]){if(! t[o]){var a=typeof require=="function"&&require;if(! u&&a)returna(o,! 0);if(i)returni(o,! 0); var f=new Error("Cannot find module '"+o+"'"); throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}}; t[o][0].call(l.exports,function(e){var n=t[o][1][e];returns(n? n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0; o<r.length; o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
module.exports = {
methods: {
test: function test() {
console.log('run it.'); }}};if(module.exports.__esModule) module.exports = module.exports.default ; (typeof module.exports ==="function"? module.exports.options: module.exports).template = "<div>The Child</div>"}, {}], 2:function(require,module,exports){
'use strict';
module.exports = {
components: {
'child': require('./Child.vue')}};if(module.exports.__esModule) module.exports = module.exports.default ; (typeof module.exports ==="function"? module.exports.options: module.exports).template = "<div id=box><div>helloworld</div><child></child></div>"}, {"./Child.vue": 3:1}], [function(require,module,exports){
//var Parent = require('./Parent.jsx');
//ReactDOM.render(
// <Parent />,
// document.getElementById('app') / /); var Parent = require('./Parent.vue');
new Vue({
el:'body',
components:{
'parent': Parent } }); }, {"./Parent.vue": 2}}, {}, [3]);Copy the codeThe original address www.trickyedecay.me/2016/10/19/…