Require.js Load Vue component R.js Merge compression instance _javascript technique

Get ready:

Vue.js was originally a learning vue component.

Require.js then thought of loading with require

R.js file Too many merges

File directory

Ignore some files and folders

First, say Vue components

Introduce Vue and introduce Vue components first

Vue.extend ({}) defines the component template data methods

Vue.component (), registers the component's label, the label is a mount point in the HTML

The new Vue () is instantiated

Index.html

CSS introduces slightly
<div id= "header" >
<tq-header></tq-header>
</div>
<div id= " Footer ">
<tq-footer></tq-footer>
</div>
<script src=" Lib/vue.js ">< /script>
<script src= "/vue-module/tq-header.js" ></script>
<script src= "/vue-module/ Tq-footer.js "></script>

Tq-header.js

var data = {list: [{name: Home], url: "./index.html",}, {name: "blog", url: "Http://taoquns.com"}, {name: "Weibo", u RL: "Http://weibo.com/1654438844/profile?topnav=1&wvr=6"}, {name: "Jane book", URL: "http://www.jianshu.com/users/
633b8f612f8e/latest_articles "}, {name:" Work Show ", url:" Http://taoquns.com/mypage "}],}; Define component Template Data method var header = Vue.extend ({Template: ' <div class= header ' >\ <div class= ' header-main ' >\ &LT;UL&G T;\ <li v-for= "I in List" >\ <a v-bind:href= "I.url" >\ {{i.name}}\ </a>\ </li>\ </ul>\
Iv>\ </div> ', data:function () {return data;}, methods: {Show:function () {}},});
Register Component Tags <tq-header> binding components vue.component (' Tq-header ', header);
Instantiate the new Vue ({el: ' #header '}); Tq-footer.js//Define component content, data, method var footer = Vue.extend ({//Template Template: ' <div class= ' footer ' >test footer test FOOTER&L T;/div> ',//Data data:function () {return {name: ' Test Name '}},//Method methods: {show:function () {alert (THIS.name);
}
}
});
Registers the component's label <tq-footer> binding component Vue.component (' Tq-footer ', footer);
Instantiate new Vue ({el: ' #footer ',}); Vue Component End

Second, the use of require load Vue components

Introduction of Require.js

Data-main to develop the main module, which is responsible for introducing files

Sub-components need to be wrapped with define () function to see examples

The introduction of Vue and Vue Components is commented out, the introduction of the Require.js Data-main specify the main module file JS folder script.js

<script src= "Lib/require.js" data-main= "Js/script.js" ></script>
<!--notes-->
<!--< Script src= "./lib/vue.js" ></script>-->
<!--<script src= "./vue-module/tq-header.js" >< /script>-->
<!--<script src= "./vue-module/tq-footer.js" ></script>-->
<!-- <script src= "Vue-module/tq-img-view.js" ></script>-->

Configure script.js file to see Nanyi require.js

BaseURL Default Path Base directory

Shim non-AMD specification files

Paths to develop the loading path of each module

Script.js

Require.config ({
baseurl: ' Lib ',
shim:{
' vue ': {
exports: ' Vue '
}
},
paths:{
' Vue ': '. /lib/vue ',
' header ': '. /vue-module/tq-header ',
' footer ': '. /vue-module/tq-footer '
},
});
Require ([' Vue ', ' header ', ' Footer '],function (vue,header,footer) {
});

In this way, the main module will first introduce Vue, in succession to introduce Vue component files

Vue components with define () package

Because subcomponents rely on Vue, they need to write dependencies and pass the parameters vue as follows:

The function parameter vue the capital v
//So the internal call Vue.extend () can be used normally
define ([' Vue '],function (vue) {
vue.exxtend ({...});
vue.component (...);
New Vue ({...});
}) ；

Tq-header.js is about the same as before define ()

Header header//require Define function start define ([' vue '], function (vue) {//data var = {list: [{name: Home], url: "./ind Ex.html ",}, {name:" blog ", url:" Http://taoquns.com "}, {name:" Weibo ", url:" HTTP://WEIBO.COM/1654438844/PROFILE?TOPNAV=1&A Mp;wvr=6 "}, {name:" Jane book ", url:" Http://www.jianshu.com/users/633b8f612f8e/latest_articles "}, {name:" Work Show ", URL:" http:
Taoquns.com/mypage "}],}; Define component Template Data method var header = Vue.extend ({Template: ' <div class= header ' >\ <div class= ' header-main ' >\ &LT;UL&G T;\ <li v-for= "I in List" >\ <a v-bind:href= "I.url" >\ {{i.name}}\ </a>\ </li>\ </ul>\
Iv>\ </div> ', data:function () {return data;}, methods: {Show:function () {}},});
Register Component Tags <tq-header> binding components vue.component (' Tq-header ', header);
Instantiate the new Vue ({el: ' #header '});
}); 
Require define function end tq-footer.js//tail footer//require.js define () function wrap define ([' vue '], function (VUE) {//vue component/* * Template HTML template file * Data return functionReturn Object * Methods method set//Define component content, data, method var footer = Vue.extend ({Template: ' <div class= "footer" >\ <div class= "foo Ter-main ">\ <p>taoqun personal Blog | Record | Show | Using vue\ <a href= "mailto:taoquns@foxmail.com" > Contact me: email</a>\ </p>\ </div>\ </div> ', data
: function () {return {name: ' function '}}, methods: {show:function () {alert (this.name);}}});
Registers the component's label <tq-footer> binding component Vue.component (' Tq-footer ', footer);
Instantiate new Vue ({el: ' #footer ',});
Vue component End}); Define End

Require method Preview succeeded

Third, r.js merge compression

Use require way will load a lot of JS files, we all know that this will produce multiple requests to the server, optimize performance first is to reduce the number of HTTP requests

Easy to say R.js

R.js is the Requirejs optimization (Optimizer) tool, which can compress and merge the front-end files, further provide the front-end optimization on the basis of the Requirejs asynchronous on-demand loading, reduce the front-end file size and reduce the file request to the server.

is to write a configuration file, the page needs of the JS component files merged into one, and then require.js directly referencing the merged compressed files can be, only need to load a file.

Get ready

R.js Download a r.js file into the directory

Node.js local need to install Node.js

Here we will put r.js into the JS file, create a build.js configuration file

And then the Build.js configuration

Build.js

({
baseurl: '.. /vue-module/',
paths:{
' header ': ' Tq-header ',
' footer ': ' Tq-footer ',
' imgview ': ' Tq-img-view ', '
vue ': '. /lib/vue ',
},
name: ' Script ', out
: ' Main.js '
}

I'm a little bit simpler here.

BaseURL Set Base Directory

References to paths modules

Reference to the name main module

Out input position

The console then navigates to the node R.js-o build.js command in the R.js directory for merge compression, indicating success when the Main.js file appears in the directory.

And then data-main the original script.js of the index.html into a main.js, open it.

<script src= "Lib/require.js" data-main= "Js/main.js" ></script>

The above is a small set to introduce the Require.js load Vue components r.js Merge compression instances, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!