Vue的导出(export) 导入(import)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」    ，赢取创作大礼包，挑战创作激励金

Hello!掘金的小伙伴们大家好，我是 摸鱼小公举 , # Vue 高德地图的使用PC端版本反响平平,浏览量还行,点赞有,就是没有评论;不知道是不是我写的文章不易看懂;希望大家多提点建议,谢谢!今天的文章内容是Vue的导出(export) 导入(import);在网上找了好多篇相关文章或文档总结出来的;希望对大家有用;

正文开始啦~

注意啦

(1) import在引入文件路径时候，引入依赖包，不用相对路径。如：import Vue from 'vue';，但是引入自己写的文件，是要相对路径的。如：import lib from './lib.js';。

(2) import有花括号和没花括号:如 果是export导出的有,export defalut导出的则没有

export与import 的相关语法

一个模块也就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你想要外部可以读取到模块内部的某个变量，就需要使用export关键字来输出该变量。

而使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载此模块

命名导入/导出

export const name = 'value'

import { name } from '...'

默认导出/导入

export default 'value'

import anyName from '...'

重命名导入/导出

export { name as newName }

import { newName } from '...'

命名 + 默认 | Import All

export const name = 'value'

export default 'value'

import * as anyName from '...'

导出列表 + 重命名

export { name1,name2 as newName2}

import { name1 as newName1,newName2} from '...'

引入第三方插件

import Vue from 'vue'

import App from './App.vue'

导入css文件

import 'swiper/swiper-bundle.css'

import './assets/css/reset.scss'

在script和style标签内引入css 区别

方法一: 在App.vue文件的js中引入

import "./style/reset.scss"

方法二: 在App.vue文件的style中引入

@import "./style/reset.scss"

若是在.vue文件中，需要在其外面套一个style

<style> @import './assets/css/reset.scss' </style>

导入组件

import MyEmpty from '@/components/MyEmpty.vue'

import trainItem from '@/components/trainItem' components:{ MyEmpty,trainItem },

引入工具类

//第一种是引入单个方法
import {isArray} from './util';

//下面是方法，需要export导出
export function isArray(options) {}

//第二种是导入成组的方法

import * as utils from './libs/utils'

//utils.js中有多个export方法,把utils里所有export的方法导入vue中怎么呢？

//Vue.prototype.$utils = utils

//直接用 this.$utils.method调用就可以了

引入ui组件框架

//全部导入

import Vue from 'vue';

import ElementUI from 'element-ui';

Vue.use(ElementUI);

//按需引入

import Vue from 'vue'; import { Pagination,Dialog,Autocomplete,Dropdown} from 'element-ui';
Vue.use(Pagination); Vue.use(Dialog); Vue.use(Autocomplete); Vue.use(Dropdown);

方法要用Vue.use(方法) 得用 install

export default{
  install(Vue, options){
  ...........
  }
}

在import的时候可以使用通配符*导入外部的模块：

import * as objs from "./lib";

模块规范

JS模块化编程分了两种规范：CommonJS模块规范和ES6模块规范。

CommonJS规范中，以module.exports导出接口，以require引入模块

ES6标准规范中，以export指令导出接口，以import引入模块

在Node.js编程中，Node模块系统遵循的是CommonJS规范。

结语

好了此文章到此结束了;能看到这里的一定是大佬就算现在不是大佬未来也是大佬;把一个新手写的文章看完,说明你格局很大哦!还是那句话,记得多提点建议哦;新手写文章总是有各种缺点;

「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」