Vue export import Introduction to various ways and differences in import and export

When using vue to export, there will be a default keyword. Here is an example to illustrate the difference between using the corresponding imort writing method of export and export default when exporting.

1. Partial export and partial import

The advantages of partial export and partial import are to use partial export when resources are large, so users can use partial imports to reduce resource volume. For example, the official element-ui recommends using partial imports to reduce project volume, because element-ui is a very large framework. If we only use some of the components, then only import the used components.

Part 1.1 Exported writing method

export function helloWorld(){
 ("Hello World");
}
export function test(){
 ("this's test function");
}

Another way to write this method is not recommended because it will look messy.

var helloWorld=function(){
 ("Hello World");
}
var test=function(){
 ("this's test function");
}
export helloWorld
export test

Part 1.2 Import

Import only the required resources

import {helloWorld} from "./" //Only import helloWorld methodhelloWorld(); //ExecutinghelloWorldmethod

1.3 Partial Export - Import All

If we need all the resources we have, we can import them all

import * as utils from "./" //Import all resources, utils is an alias, and use it when calling(); //The helloWorld method in execution(); //Executingtestmethod

2. Export and import all

If you use all exports, then the user must import them all when importing. It is recommended to use partial exports when writing method libraries, so as to leave the power of all imports or partial imports to the user.

2.1 Export all

It should be noted that there can be multiple exports in a js file, but only one export default

var helloWorld=function(){
 ("Hello World");
}
var test=function(){
 ("this's test function");
}
export default{
 helloWorld,
 test
}

2.2 Import all

import utils from "./"
();
();

Summarize

The above is an introduction to the various ways and differences of Vue export import import that the editor introduced to you. I hope it will be helpful to you!