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 { 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.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();

=======================================

import Vue from 'vue'
import axios from 'axios'
import App from './App'
import store from './store'
import router from './router'

import Vue from 'vue'
//完整写法：
//这里还要具体根据引入文件的位置写具体的相对路径到node_modules
import Vue from "/node_modules/vue/dist/vue.js"
//从node_modules中加载相应名称的模块

import App from './App'
//完整写法：
import App from './App.vue'
//引入指定目录下的App.vue文件

import router from './router'
//完整写法：
import router from './router/index.js'
//引入和main.js同级目录下的route.js文件

链接：https://blog.csdn.net/weixin_43862596/article/details/120975134

================================

vue使用import来引入组件的注意事项

Vue使用import ... from ...来导入组件，库，变量等。而from后的来源可以是js，vue，json。这个是在 webpack.base.conf.js 中设置的：

module.exports = {
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': resolve('src')
        }
      }
    ...
    }

这里的extensions指定了from后可导入的文件类型。

而上面定义的这3类可导入文件，js和vue是可以省略后缀的：
import test from './test.vue'   等同于： import test from './test'
同理：
import test from './test.js' 等同于：import test from './test'

json不可以省略后缀

那么，若test.vue，test.js同时存在于同一个文件夹下，则import的导入优先级是：js>vue

from后的来源除了文件，还可以是文件夹：import test from './components'

该情况下的逻辑是：

    if(package.json存在 && package.main字段存在 && package.main指定的js存在) {
        取package.main指定的js作为from的来源，即使该js可能格式或内容错误
    } else if(index.js存在){
        取index.js作为from的来源
    } else {
        取index.vue作为from的来源
    }

因此若from的来源是文件夹，那么在package.json存在且设置正确的情况下，会默认加载package.json；若不满足，则加载index.js；若不满足，则加载index.vue。

注意加载文件夹的形式，与上面省略后缀的形式是完全相同的。所以一个省略后缀的from来源，有可能是.vue，.js，或者文件夹。

例：查看Vue-Element-Admin的源码，其中有个Layout.vue：

里面调用import导入了3个组件：

import { Navbar, Sidebar, AppMain } from './components'。这里，from的路径'./components'就是个文件夹。

于是，按照前面的规则，首先查看文件夹下是否有package.json：

并没有package.json。

package.json不存在，那么查找index.js。index.js是存在的，于是加载。

打开index.js：

    export { default as Navbar } from './Navbar'

    export { default as Sidebar } from './Sidebar'

    export { default as AppMain } from './AppMain'

可以看到3个export，都没有后缀，所以其类型vue，js和文件夹都是有可能的。

同一级目录下，存在AppMain.vue和Navbar.vue，没有同名js，所以可以判断出这两个都是加载的vue文件，即：

    export { default as Navbar } from './Navbar.vue'

    export { default as AppMain } from './AppMain.vue'

而Sidebar只有一个文件夹，所以是加载的文件夹。打开Sidebar文件夹：

优先找package.json。不存在。然后找index.js，不存在。最后找index.vue，存在。

于是：

export { default as Sidebar } from './Sidebar'   相当于：export { default as Sidebar } from './Sidebar/index.vue'

这样，Layout.vue就通过加载一个文件夹，获得了3个vue组件。
---------------------
原文：https://blog.csdn.net/fyyyr/article/details/83657828

===============================

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

==============================================

Vue 中import一个文件夹

Vue文件夹为其中的index.vue

==============================================

posted @ 2022-09-20 20:03 emanlee 阅读(4714) 评论(0) 编辑收藏举报

刷新页面返回顶部

Vue的导入（import）和导出（export、export default）

全部导出导入

vue使用import来引入组件的注意事项

ES6模块之export和import详解

Vue的导入（import）和导出（export、export default）

Vue中import '@... @ 等价于 /src 这个目录