Practical Application of Vue.js where Each File Corresponds to a Component

The example provided by the official website requires a tool to compile, but as there is no time to learn nodejs, I had to resort to a workaround. The author of VueJS wrote an article on another website about how to implement components using jQuery.getScript or RequireJS, but did not provide an example, so I explored a method on my own.

Used inTools:

vue.js --- 0.12.+ (requires 0.12(supports async component in)
require.js
text.js --- RequireJS text plugin https://github.com/requirejs/text

File list

index.html
index.js
comp.js (Component is defined here)
comp.html (Component template)

In fact, the component is divided into js and html, html is the template content. It seems to be slightly inconsistent with 'one file corresponds to one component', but if the template content is extensive, this is necessary, and it is also more convenient for maintenance. Here is the code directly.

comp.html -- Component template

<h2{{title}}</h2>
<p>{{content}}</p>
comp.js -- Component definition
define(['text!comp.html'], function (temp) { // Define a module in requirejs, dependent on the template text
 return {
 props: ['title', 'content'],
 template: temp
 }
});

So far, a simple template has been created. Then it is registered in VueJS to use this component.

index.js

require.config({
 paths: { // Specify the paths of text.js and vue.js without the .js suffix, see the RequireJS documentation for details
 text: '../../../assets/requirejs/text',
 vue: '../../../assets/vue/vue'
 }
});
require(['vue'], function (Vue) { // Depends on vue.js
 Vue.component('comp', function (resolve) { // Register an asynchronous component
 require(['comp'], function (comp) { // Because we need to load components on demand, therefore require(['comp']) must be in the function
 resolve(comp)
 })
 });
 new Vue({
 el: 'body'
 });
 //new Vue({
 // el: 'body',
 // components: {
 // comp: function (resolve) {
 // require(['comp'], function (comp) {
 // resolve(comp)
 // })
 // }
 // }
 //});
});

index.html

!DOCTYPE html
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<component is="comp" title="[#1#]" content="fjkldsjfkldjsklgjks"></component>
<script data-main="index" src="../../../assets/require.js"></script>
</body>
</html>

Run the code, and comment out <component> to see the difference.

If there are many components, registering components will be cumbersome, so this part can be extracted.

Improved index.js

require.config({
 paths: {
 text: '../../../assets/requirejs/text',
 vue: '../../../assets/vue/vue'
 }
});
function component(name) {
 return function (resolve, reject) {
 require([name], function (comp) {
 resolve(comp)
 })
 }
}
require(['vue'], function (Vue) {
 Vue.component('comp', component('comp'));
 Vue.component('comp2', component('comp2});
 new Vue({
 el: 'body'
 });
});

That's all.

This article has been organized into the 'Vue.js Front-end Component Learning Tutorial'. Welcome to study and read.

That's all for this article. Hope it helps your learning and that you will support the Yelling Tutorial more.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please send an email to codebox.com (replace # with @ when sending email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial