Vue的导入(import)和导出(export、export default)
一、import
import在引入文件路径时,引入一个依赖包,不需要相对路径。如:import app from ‘app’;
,但引入一个自己写的js文件,是需要相对路径的。如:import app from ‘./app.js’;
。
引入第三方插件
import Vue from 'vue';
import echarts from 'echarts';
import ElementUI from 'element-ui';
导入css文件
import 'vue-video-player/src/custom-theme.css';
import 'video.js/dist/video-js.css';
import 'iview/dist/styles/iview.css';
如果是在.vue文件中,需要在其外面套一个style
<style>@import './test.css';
</style>
导入组件
import name1 from './name1';
import name2 from './name2';
import App from './app.vue';
components:{name1,name2,App,
},
import '@…'的语句
@等价于/src
这个目录,避免写麻烦而又易错的相对路径
引入工具类
//第一种是引入单个方法
import {axiosfetch} from './util';
//下面是方法,需要export导出
export function axiosfetch(options) {}//第二种是导入成组的方法
import * as tools from './libs/tools'
//其中tools.js中有多个export方法,把tools里所有export的方法导入
//vue中怎么用呢?
//Vue.prototype.$tools = tools
//直接用 this.$tools.method调用就可以了
export和export default的区别:
//先是 export
import {axiosfetch} from './util'; //需要加花括号,可以一次导入多个也可以一次导入一个,但都要加括号
//如果是两个方法
import {axiosfetch,post} from './util';
//再是 export default
import axiosfetch from './util'; //不需要加花括号,只能一个一个导入
二、export和export default
export 与import是es6中新增模块功能最主要的两个命令:
1.export与export default均可用于导出常量、变量、函数、文件、模块等;
2.在一个文件或模块中,export、import可以有多个,但export default仅有一个;
3.通过export方式导出,在导入(import)时要加花括号{ },export default则不需要话跨好{ }。
使用export导出的变量需要用{}
进行导入
导出常量str和导出函数log:
//a.js
export const str = "blablabla~";
export function log(sth) {return sth;
}
对应的导入常量str和函数log的方式:
//b.js
import { str, log as _log } from 'a'; //也可以分开写两次,导入的时候带花括号。还可以用as重命名
使用export default导出的变量,只需要自己起一个名字就行
导出变量obj(一个对象)
//a.js :
var obj = { name: ‘example’ };
export default obj;
对应的导入变量obj,并命其名为newName
//b.js:
import newNname from './a.js'; //newNname 是自己随便取的名字,这里可以随便命名
console.log(newNname.name); // example;
总结
export和export default最大的区别就是export不限导出的变量数,可以一直写,在同一个js文件中可以有多个,而export default只输出一次,在同一个js文件中只能有一个。而且 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();
四、module.exports和exports
模块的导出导入规范,在总体上区分为两类:CommonJS模块规范和ES6模块规范。require
: 是node 和 es6 都支持的引入,export/export default/ import
: 是只有es6 支持的导出导入,module.exports / exports
: 是只有 node 支持的导出。
CommonJS规范
Node里面的模块系统遵循的是CommonJS规范。CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)。为了方便,Node为每个模块提供一个exports变量,指向module.exports。这等同在每个模块头部,有一行这样的命令。
var exports = module.exports;
具体的可参考测试代码
新建utils.js
console.log('1=', module.exports); // 结果为:{}
console.log('2=', exports); // 结果为:{}exports.a = 200; // 由于默认 exports=module.exports 故此时把module.exports的值也改变了 {a : 200}console.log('3=', module.exports) // {a : 200}
console.log('4=', exports) // {a : 200}exports = '我不在指向module'console.log('5=', module.exports) // {a : 200}
console.log('6=', exports) // 我不在指向module
新建test.js引入utils.js
var util = require('./utils')console.log('test=', util) // { a: 200 }
从上面可以看出,其实require导出的内容是module.exports的指向的内存块内容,并不是exports的。简而言之,区分他们之间的区别就是 exports 只是 module.exports的引用,辅助后者添加内容用的。好多建议尽量都用 module.exports 导出,然后用require导入。
示例代码
hello.js
!function(){module.exports = function(name,age,money) {this.name = name;this.age = age;this.money = money;this.say = function() {console.log('我的名字叫:'+this.name+',我今年'+this.age+'岁,月薪为:'+this.money+'元;')}};
}()
hello2.js
module.exports = function(name,age,money) {this.name = name;this.age = age;this.money = money;this.say = function() {console.log('我的名字叫:'+this.name+',我今年'+this.age+'岁,月薪为:'+this.money+'元;')}
};
hello3.js
function sayDog () {console.log('i am dog')
}function sayCat () {console.log('i am cat')
}exports.sayDog = sayDog
exports.sayCat = sayCat
index.js
var Hello = require('./hello');
var hello = new Hello('jone','28','10000')
hello.say(); var Hello2 = require('./hello2');
var hello2 = new Hello2('hello2','28','10000')
hello2.say(); var h3 = require('./hello3')
h3.sayDog()
h3.sayCat()
输入结果如下
ES6规范
不同于CommonJS,ES6使用 export 和 import 来导出、导入模块。在我们的项目中 使用场景如api的封装。
/** 帮助文档查询api* @Author: shichangchun* @Date: 2018年8月30日14:22:15*/
import fetch from '@/util/fetch'/*** 查询文章 add 2018-10-19*/
export const getArticleByPath = (data) => {return fetch({url: '/api/help/contentTxtByPath',method: 'GET',params: data})
}/*** 查询目录 add 2018-10-19*/
export const getMuneByPath = (data) => {return fetch({url: '/api/help/contentNewByPath',method: 'GET',params: data})
}/*** 首页查询* @param data*/
export const getHelpList = (data) => {return fetch({url: '/api/help/catalogByPath',method: 'GET',params: data})
}
在组件中引用
需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系,即import{ ‘对应名称1’,‘对应名称2’} from ’api‘。使用export default命令,为模块指定默认输出。
另外:
export与export default均可用于导出常量、函数、文件、模块等;
在一个文件或模块中,export、import可以有多个,export default仅有一个;
通过export方式导出,在导入时要加{ },export default则不需要;
export能直接导出变量表达式,export default不行。
Vue的导入(import)和导出(export、export default)相关推荐
- MEF 导入(Import)和导出(Export)
前言: MEF不同于其他IOC容器(如:Castle)很重要的原因在于它使用了特性化编程模型(涉及到两个概念:"特性"和"编程模型"). 特性(Attribut ...
- c# MEF框架(二 MEF的导出(Export)和导入(Import))
转自:http://www.cnblogs.com/yunfeifei/p/3922891.html 上一篇学习完了MEF的基础知识,编写了一个简单的DEMO,接下来接着上篇的内容继续学习,如果没有看 ...
- 学习MEF系列(2):导入(Import)和导出(Export)
前言: MEF不同于其他IOC容器(如:Castle)很重要的原因在于它使用了特性化编程模型,何为特性化编程这里不细究,简单说明下两个概念:"特性"和"编程模型" ...
- 学习MEF系列(3):导入(Import)和导出(Export) (续)
前言:在上一篇中,我们简单的介绍了导入和导出的基本知识以及一些基本用法,本篇将介绍一下在导出中经常使用的到两种技巧(其实就是MEF提供的两种特性):元数据(Metadata)和自定义导出(Custom ...
- 3.2.3 Sqoop 数据迁移工具, 导入数据import, MySQL到HDFS/Hive, 导出数据export,增量数据导入, Sqoop job,常用命令及参数
目录 数据迁移工具 -- Sqoop 第一部分 Sqoop概述 第二部分 安装配置 第三部分 应用案例 第 1 节 导入数据import MySQL 到 HDFS MySQL 到 Hive 第 2 节 ...
- require 动态加载_require,exports,module.exports和import,export,export default
我们前端在开发过程中经常会遇到导入导出功能, 在导入时,有时候是require,有时候是import 在导出时,有时候是exports,module.exports,有时候是export,export ...
- Vue+Element导入导出Excel
一,安装 npm install -S file-saver xlsx npm install -D script-loader 二,导入Excel 1,Element 上传控件 <el-upl ...
- import、require、export、module.exports详解
前言 import ,export default,export遵循 es6 制定的规范 require, module.exports,exports遵循commonjs 制定规范 注意事项 mod ...
- vue使用luckySheet前端excel的在线表格,导入显示以及导出excel文件
场景: 当界面上普通的element表格已经不足以展示的数据的时候,或是为了更好的体验.由后端处理数据为二进制文档流,返回到前端直接进行显示为excel. 效果图: 代码实现: 安装引入: index ...
最新文章
- linux makefile 编译标记 EXTRA_CFLAGS 简介
- 配置访问oracle_SpringBoot中application.properties的常用配置
- Centos7更改默认启动模式
- 初探运算符重载------(减号)
- DbVisualizer Personal 7.0 数据库连接工具免安装版本获取,直接解压即可使用!
- login.php静态页面的设计,ps+div+css打造蓝色后台--login页面设计
- Java爬虫搜索原理实现
- Sublime Text for Mac 最新版安装后,无法搜索到Install Package的解决办法
- 【原创】利用腾讯和百度的AI接口识别验证码
- python用pip安装wordcloud_如何在python3.7中使用pip安装wordcloud
- bat(续六)-windows批处理set命令
- jQuery实现字体变大和缩小
- matlab控制信号发生器,Matlab 跳频信号发生器
- 物联网平台如何创造价值,构建平台需要考虑哪些因素?
- 树莓派sd卡linux分区,树莓派安装了Kali系统的SD卡扩容问题(分区太小)解决办法...
- 计算机怎么不读u盘,老司机告诉你电脑不读U盘的解决方法
- 查找代码文件中的非 ASCII 字符
- Whitelabel Error Page访问
- vue-monoplasty-slide-verify自定义拼图出现位置
- 小米Civi正式发布:售价2599元起,聚焦年轻女性用户