Shinkai005

V1

2022/04/04阅读:46主题:红绯

vue中常用的几种引入方式,解释全部/部分文件的导出/导入

vue中常用的几种import(模块、文件)引入方式,export,export default,全部/部分文件的导出/导入

import(模块、文件)引入方式

1 引入第三方插件

import echarts from 'echarts'

2.导入 css文件

import 'iview/dist/styles/iview.css';
  • 如果是在.vue文件中那么在外面套个style
<style>
  @import './test.css'
</style>

3.导入组件

import name1 from './name1'
import name2 from './name2'
  components:{
     name1,
     name2,
  },

4.import '@…'的语句

  • @ 等价于 /src 这个目录,避免写麻烦又易错的相对路径

5.引入工具类

  • 第一种是引入单个方法

import {axiosfetch} from './util';
  • 下面是写法,需要export导出
export function axiosfetch(options{


第二种 导入成组的方法

import * as tools from './libs/tools'
  • 其中tools.js中有多个export方法,把tools里所有export的方法导入

vue中怎么用呢? Vue.prototype.

tools.method调用就可以了

说到这 export 和 export default 又有什么区别呢?

先是 export

import {axiosfetch} from './util';  //需要加花括号  可以一次导入多个也可以一次导入一个,但都要加括号

如果是两个方法

import {axiosfetch,post} from './util'

再是 export default

import axiosfetch from './util';  //不需要加花括号  只能一个一个导入

二,export,import和export default的关系

export 与import是es6中新增模块功能最主要的两个命令。

  1. export与export default均可用于导出常量、函数、文件、模块等
  2. 在一个文件或模块中,export、import可以有多个,export default仅有一个
  3. 通过export方式导出,在导入时要加{ },export default则不需要{ }

import引入文件路径

  • import引入一个依赖包,不需要相对路径。如:import app from ‘app’;
  • import 引入一个自己写的js文件,是需要相对路径的。如:import app from ‘./app.js’;

import引入文件变量名

使用export抛出的变量需要用{}进行import

//a.js
export const str = "blablabla~";
export function log(sth{
   return sth;
 }
  • 对应的导入方式:
//b.js
import { str, log as _log } from 'a'//也可以分开写两次,导入的时候带花括号。还可以用as重命名

使用export default抛出的变量,只需要自己起一个名字就行:

//a.js :
var obj = { name: ‘example’ }; 
export default obj; 

//b.js: 
import newNname from ‘./a.js’;   //newNname 是自己随便取的名字,这里可以随便命名
console.log(newNname .name);       // example;

总结

其中export和export default最大的区别就是export不限变量数 可以一直写,而export default 只输出一次 而且 export出的变量想要使用必须使用{}来盛放,而export default 不需要 只要import任意一个名字来接收对象即可。

部分导入和部分导出,全部导入和全部导出

部分导出和部分导入

  • 部分导出和部分导入的优势,当资源比较大时建使用部分导出,这样一来使用者可以使用部分导入来减少资源体积,比如element-ui官方的就推荐使用部分导入来减少项目体积,因为element-ui是一个十分庞大的框架,如果我们只用到其中的一部分组件, 那么只将用到的组件导入就可以了。
//部分导出
//A.js
export function helloWorld(){
 conselo.log("Hello World");
}
export function test(){
 conselo.log("this's test function");
}

//部分导入
//B.js
import {helloWorld} from "./A.js" //只导入A.js中的helloWorld方法
helloWorld(); //执行utils.js中的helloWorld方法

如果我们需要A.js中的全部资源,则可以全部导入,如下:

import * as _A from "./A.js" //导入全部的资源,_A为别名,在调用时使用
_A.helloWorld(); //执行A.js中的helloWorld方法
_A.test(); //执行A.js中的test方法

全部导出和全部导入

如果使用全部导出,那么使用者在导入时则必须全部导入,推荐在写方法库时使用部分导出,从而将全部导入或者部分导入的权力留给使用者。

需要注意的是:一个js文件中可以有多个export,但只能有一个export default

//全部导出  A.js
var helloWorld=function(){
 conselo.log("Hello World");
}
var test=function(){
 conselo.log("this's test function");
}
export default{
 helloWorld,
 test
}

//全部导入  B.js
import A from "./A.js"
A.helloWorld();
A.test();

分类:

前端

标签:

Node.js

作者介绍

Shinkai005
V1

公众号:深海笔记Shinkai