Introduction to the method for correctly introducing the JS library in the Vue framework, vuejs

Introduction to the method for correctly introducing the JS library in the Vue framework, vuejs

This article mainly introduces the relevant content about correctly introducing the JS library in the Vue framework, and shares it for your reference. I will not talk about it here. Let's take a look at the detailed introduction:

Error example

Global VARIABLE METHOD

The most unreliable way is to put the imported database under the window object of all variables:

// entry.js:window._ = require('lodash');// MyComponent.vue:export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..'); }}

There are many disadvantages of this method. Let's just say one of the key points: Server rendering is not supported. When an application runs on the server, the window object does not exist. Of course, an error is thrown when you try to access the properties in the window.

Everywhere

Another not elegant method is to introduce the corresponding library in every file you need:

// MyComponent.vue：import _ from 'lodash';export default { created() { console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..'); }}

Although this method is feasible, it is not concise. You must remember to introduce it in every file. If you do not need it, you must delete it again. In addition, if the packaging policy is not wise enough, multiple duplicate codes may be packaged.

Correct Introduction Method

The simplest and most reliable way is to convert the attributes of a prototype object of a Vue using a library. Next, I will demonstrate how to introduce the Moment Library:

import moment from 'moment';Object.definePrototype(Vue.prototype, '$moment', { value: moment });

Object.definePrototypeFor more information about the syntax, see MDN.

Since all components inherit the methods on the Vue prototype object, these methods can be accessed through this. $ moment in any component file:

// MyNewComponent.vueexport default { created() { console.log('The time is ' . this.$moment().format("HH:mm")); }}

UseObject.definePropertyDefines the object property. If it is not described in the property descriptor, the property is read-only by default, and the introduced library is not reassigned.

Write plug-ins

If you use a library in many projects or want global availability, you can build your own Vue plug-in.

Plug-in libraries are simple and simple, allowing you to easily introduce the desired libraries as follows:

import MyLibraryPlugin from 'my-library-plugin';Vue.use(MyLibraryPlugin);

Just like Vue Route, Vuex, and other plug-ins, our library only needs two lines and can be used anywhere.

How to Write plug-ins

First, create a file. In this example, I will introduce an Axios library plug-in. Let's name this file axios. js.

The most important thing is that we need to expose an install method that uses the Vue constructor as the first parameter.

// axios.js:export default { install: function(Vue) { // Do stuff }}

Then we can add the Library to the prototype object of Vue in the previous method:

// axios.jsimport axios from 'axios';export default { install: function(Vue) { Object.defineProperty(Vue.prototype, '$http', { value: axios }); }}

Then we only need the use method of the Vue instance to introduce this library to the entire project. We will introduce the following code:

// entry.jsimport AxiosPlugin from './axios.js';Vue.use(AxiosPlugin);new Vue({ created() { console.log(this.$http ? 'Axios works!' : 'Uh oh..'); }})

Plug-in parameter settings

The install method of the plug-in can also accept other optional parameters. Some developers may not like the method name $ http of the Axios instance object, because this is also the method name of the Vue resource plug-in. Then, let's use the second parameter to modify it.

// axios.jsimport axios from 'axios';export default { install: function(Vue, name = '$http') { Object.defineProperty(Vue.prototype, name, { value: axios }); }}

// entry.jsimport AxiosPlugin from './axios.js';Vue.use(AxiosPlugin, '$axios');new Vue({ created() { console.log(this.$axios ? 'Axios works!' : 'Uh oh..'); }})

Of course, we can directlyObject.definePropertyWrite the name attribute to $ axios. You can also introduce multiple required libraries in the install method.

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message to us. Thank you for your support.