| Vue的导入（import）和导出（export、export default） | 您所在的位置：网站首页 › vue项目导出所有使用的api › Vue的导入（import）和导出（export、export default） |
Vue的导入（import）和导出（export、export default）
|
https://blog.csdn.net/yiminghd2861/article/details/118856597 https://blog.csdn.net/qq_28506819/article/details/75733601
require: node 和 es6 都支持的引入 export / import : 只有es6 支持的导出引入 module.exports / exports: 只有 node 支持的导出 CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require) =================== CommonJS模块规范中 module.exports / 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 https://blog.csdn.net/qq_31967569/article/details/101779618 一、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 @import './test.css';导入组件 import name1 from './name1'; import name2 from './name2'; import App from './app.vue'; components:{ name1, name2, App, },import '@…'的语句@等价于/src这个目录，避免写麻烦而又易错的相对路径 import { getCodeImg } from "@/api/login"; import Cookies from "js-cookie"; import { encrypt, decrypt } from '@/utils/jsencrypt'
引入工具类 //第一种是引入单个方法 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'; //不需要加花括号，只能一个一个导入
https://www.bilibili.com/video/BV1Jy4y147vn 二、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.jsvar helloWorld=function(){ conselo.log("Hello World");}var test=function(){ conselo.log("this's test function");}export default{ helloWorld, test} 全部导入 //全部导入 B.jsimport A from "./A.js"A.helloWorld();A.test();
链接：https://blog.csdn.net/yiminghd2861/article/details/118856597 https://www.cnblogs.com/emanlee/p/16710305.html |
【本文地址】