关于VUE中 import 、 export 和 export default 的注意问题

1、import引入一个依赖包,不需要相对路径。
import 引入一个自己写的js文件,是需要相对路径的。
示例:import axios from ‘axios’;
import AppService from ‘./appService’;

2、import什么情况下,要用{}的方式引入,什么情况下,只需要一个变量就行。
(1)
使用export抛出的变量需要用{}进行import:
//a.js
export function getList(){};
//b.js
import { getList } from ‘./a.js’;

(2)
使用export default抛出的变量,只需要自己起一个名字就行:
//a.js
var obj = { name: ‘zhazhahui’ };
export default obj;
//b.js
import aaa from ‘./a.js’;
console.log(aaa.name);// ‘zhazhahui’;

(3)
切记,一个js文件中,只能有一个export default;
但是,一个js文件中,可以有多个export。
---------------------
作者:MrLiber
来源:CSDN
原文:https://blog.csdn.net/mrliber/article/details/79155755

原文地址:https://www.cnblogs.com/Ryan777/p/10769661.html

时间: 2024-10-08 02:02:39

关于VUE中 import 、 export 和 export default 的注意问题的相关文章

vue中import引入模块路径中@符号是什么意思

在编写vue文件中引入模块 import('@/view/single-page/home') 这里路径前面的“@”符号表示什么意思? // vue.config.js chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) // key,value自行定义,比如.set('@@', resolve('src/components')) .set('_c', resolve('src/components'

在 vue 中使用 jsx 与 class component 的各种姿势

在之前我们分享过一次 一个使用 react 的思想去使用 vue 的方式. 随着组内很多时候为了让 view 层更加清晰,和一些复杂的逻辑处理,导致现在 vue 代码中 jsx 的代码越来越多,这里进行一个整理说明 如何使用先参看腾讯 alloyTeam 这篇文章: 用 jsx 写 vue 组件里面有提到使用 babel-plugin-transform-vue-jsx babel 6 插件来处理 jsx 的编译. 当然可能是官方也知道在一定的场景下 jsx 相对模板是有优势的,于是单独有了这个

关于 vue中 export default 和 new Vue({})

对于刚开始学习vue的人(像我),一般都不会清楚的知道两者之间该怎么区分,甚至觉得两者是一样的. 那么,经过我的查证,发现两者之间是没有任何联系的. export default ES6 Module语法中的命令,是为了方便 使用import命令时 必须要知道所加载的变量名或函数名,否则无法加载的问题. 地址:http://es6.ruanyifeng.com/#docs/module#export-default-%E5%91%BD%E4%BB%A4 export default命令并不是在每

Vue中 export default 和 export 区别

1.export与export default均可用于导出常量.函数.文件.模块等2.在一个文件或模块中,export.import可以有多个,export default仅有一个3.通过export方式导出,在导入时要加{ },export default则不需要 4. (1) 输出单个值,使用export default (2) 输出多个值,使用export (3) export default与普通的export不要同时使用 示例: 1.export //a.js export const

vue中export和export default的使用

1 export的使用 比喻index.js要使用test.js中的数据 首先在test.js文件中进行导出操作 在index.js文件进行导入操作 第一种方法: 此时的输出结果是: 注意: export 不能直接写成这样子 export{ "":"" // 这样会报错 .... } 2 export default的使用 test.js文件 index.js文件中: 输出的结果: 注意: export default let a=10 // 不能类似这样的写 一样

JavaScript ES6中export及export default的区别

相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export.import可以有多个,export default仅有一个. 具体使用: 1. //demo1.js export con

export ,export default 和 import 区别 以及用法

首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口 import用于在一个模块中加载另一个含有export接口的模块. 也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件).这几个都是ES6的语法. export和import(一个导出一个导入) 一个a.js文件有如下代码: export

export、export default、import的区别

export.export default 均可用于导出常量..函数.文件.模块等; 在文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用; export 对应的 import 需要知道 export抛出的变量名或函数名 import{a,b};export default对应的 import 不需要知道 export抛出的变量名或函数名 import anyname 注意: export.import 可以有多个,export defa

ES6中export与export default的区别

首先要知道export,import ,export default是什么 ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块.也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件).这几个都是ES6的语法. export与export default 1.export与export default均可用