export和export default和import的说明-Toy模板网

这篇具有很好参考价值的文章主要介绍了export和export default和import的说明。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.说明

2.export

3.import

4.export default

5.总结

1.说明

ES6中，export与export default均可用于导出常量、函数、文件、模块等。

import用于导入其他被导出的常量、函数、文件、模块等。

2.export

一个独立的文件，该文件内部的变量，方法等，外部无法获取。如果想读取其他vue文件中的变量及方法，就需要在其他vue文件中使用export导出变量及方法。比如，在vue1文件中定义一下变量及方法进行导出。

const id = '1123';
const setId = (param) =>{
    id = param;
}

export {id,setId}

通常来说，export导出的变量和方法就是原来的名字，可以通过as关键字来进行重命名。

3.import

在一个文件中使用export进行导出之后，可以在其他文件使用import进行导入。在script标签的头部，一般用来导入其他文件中的变量及方法。导入之后就可以在文件中进行使用。

<script>

import {id, setId} from './vue1';


</script>

注意：导入时必须添加花括号，否则控制台会直接报错。

导入之后也可以使用as进行重命名

from后面的路径可以使用相对路径，也可以使用绝对路径，可以将src定义为一个目录@，其他文件以此来进行定位。在vue3的vite.config.js中按照如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})