Require. js loads the vue component r. js and merges the compressed instance, require. jsr. js

Require. js loads the vue component r. js and merges the compressed instance, require. jsr. js

Preparation:

Vue. js was originally used to learn vue Components

Require. js then comes up with require to load

Too many r. js files are merged

File directory

Ignore some files and folders

I. vue Components

Introduce vue first and then vue component

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

Vue. component (): registers the tag of a component. The tag is a mount point in html.

New Vue () for instantiation

Index.html

// Css introduction <div id = "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

// Data var data = {list: [{name: "Homepage", url :". /index.html ",}, {name:" blog ", url:" http://taoquns.com "},{ name:" Weibo ", url:" http://weibo.com/1654438844/profile? Topnav = 1 & wvr = 6 "},{ name:" ", url:" http://www.jianshu.com/users/633b8f612f8e/latest_articles "},{ name:" ", url: "http://taoquns.com/mypage"}],}; // defines the component template data method var header = Vue. extend ({template: '<div class = "header" >\< div class = "header-main" >\< ul >\< li v-for = "I in list" >\< v-bind: href = "I. url "> \ {I. name }}\</a >\</li >\</ul >\</div> ', data: function () {return data ;}, methods: {show: function () {}},}); // register the component tag <tq-header> to bind the component Vue. component ('tq-header', header); // instantiate new Vue ({el: '# header'}); tq-footer.js // define component content, data, method var footer = Vue. extend ({// template: '<div class = "footer"> test footer </div>', // data: function () {return {name: 'test name' }}, // method methods: {show: function () {alert (this. name) ;}}); // register the tag of the component <tq-footer> bind the component Vue. component ('tq-footer ', footer); // instantiate new Vue ({el:' # footer ',}); // end of the vue component

Ii. Use require to load vue Components

Introduce require. js

Data-main: Specifies the main module and files to be introduced.

The sub-component must use the define () function. For more information, see the example.

Comment out the introduction of vue and vue components and introduce require. js data-main to specify script. js under the js folder of the main module File

<Script src = "lib/require. js" data-main = "js/script. js"> </script> <! -- Comment --> <! -- <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 the script. js file to view Ruan Yifeng's require. js

BaseUrl default path base Directory

Shim non-AMD standard files

Paths specifies 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 and introduce vue component files in succession.

Package vue components with define ()

Because the sub-component depends on vue, you need to write the dependency and pass the Vue parameter as follows:

// Function parameter V in upper case. // call Vue internally. the define (['vue '], function (vue) {Vue. exxtend ({...}); vue. component (.....); new Vue ({....});});

The tq-header.js is almost added with define ()

// Header // require define function startdefine (['vue '], function (vue) {// data var data = {list: [{name: "Homepage ", url :". /index.html ",}, {name:" blog ", url:" http://taoquns.com "},{ name:" Weibo ", url:" http://weibo.com/1654438844/profile? Topnav = 1 & wvr = 6 "},{ name:" ", url:" http://www.jianshu.com/users/633b8f612f8e/latest_articles "},{ name:" ", url: "http://taoquns.com/mypage"}],}; // defines the component template data method var header = Vue. extend ({template: '<div class = "header" >\< div class = "header-main" >\< ul >\< li v-for = "I in list" >\< v-bind: href = "I. url "> \ {I. name }}\</a >\</li >\</ul >\</div> ', data: function () {return data ;}, methods: {show: function () {}},}); // register the component tag <tq-header> to bind the component Vue. component ('tq-header', header); // instantiate new Vue ({el: '# header '});}); // require define function endtq-footer.js // tail footer // require. js define () function package define (['vue '], function (vue) {// vue component/** template html template file * data return function returns object * methods method set * // defines component content, data, method var footer = Vue. extend ({template: '<div class = "footer"> \ <div class = "footer-main" >\< p> taoqun blog | record | display | use vue \ <a href =" mailto: taoquns@foxmail.com "> contact me: email </a> \ </p> \ </div> ', data: function () {return {name: 'function' }}, methods: {show: function () {alert (this. name) ;}}); // register the tag of the component <tq-footer> bind the component Vue. component ('tq-footer ', footer); // instantiate new Vue ({el:' # footer ',}); // end of the vue component}); // define end

The require method is successfully previewed.

Iii. Merge and compress r. js

Using require will load a lot of js files. We all know that this will generate multiple requests to the server. to optimize the performance, the first is to reduce the number of http requests.

To put it simply, r. js

R. js is the Optimizer tool for requireJS. It can compress and merge front-end files and further provide front-end Optimization Based on Asynchronous On-Demand Loading of requireJS, reduce the size of front-end files and file requests to the server.

Write a configuration file and merge the js component files required by the page into one. Then require. js can directly reference the merged compressed file and load only one file.

Preparation

R. js downloads an r. js file and puts it in the directory.

Node. js needs to be installed locally

Here we place r. js in the js file and create a build. js configuration file.

Then let's talk about the configuration of build. js.

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 am relatively simple here

BaseUrl

Reference of paths Module

Reference of name main module

Out input location

Then, the console locates the node r. js-o build. js command in the r. js directory for merging and compression. When the main. js file appears in the directory, it indicates that the file has succeeded.

Then, change the original script. js of data-main in index.html to main. js.

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

The above is a small series of require. js load vue component r. js merge compression instances, hope to help everyone, if you have any questions, please leave a message, xiaobian will reply to you in a timely manner. Thank you very much for your support for the help House website!