vue中import与export注意点

import的几种方式

1、引入第三方插件

import axios from 'axios

2、引入工具类或js文件
第一种是引入单个方法

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的区别
1.export
import {axiosfetch} from './util';  //需要加花括号  可以一次导入一个也可以一次导入多个，但都要加括号
如果是两个方法
import {axiosfetch,post} from './util'; 

2.export default 
import axiosfetch from './util';  //不需要加花括号  只能一个一个导入
*export default有单次限制，只能使用export default向外暴露一次*

3、导入 css文件

import 'ant-design-vue/dist/antd.css'

如果是在.vue文件中那么在外面套个style

<style>
  @import './test.css'; 
</style>

4、导入组件

import GroupSecond from './second';

import from 省略后缀及加载文件夹

Vue使用import … from …来导入组件，库，变量等，而from后的来源可以是js，vue，json，可在webpack.base.conf.js（vue-cli2）或者webstorm.config.js（vue-cli@3）中配置from后可导入的文件类型。

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

1.extensions指定了from后可导入的文件类型。
2.js和vue是可以省略后缀的，json不可以省略后缀。
3.test.vue，test.js同时存在于同一个文件夹下，则import的导入优先级是：js>vue

from后的来源除了文件，还可以是文件夹

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。

参考
1、https://blog.csdn.net/fyyyr/article/details/83657828