Vue中的 import中 的作用

export 和 export default 的区别
如果是 export 导出的文件，在导入时可以一次导入一个，也可以导入多个，但必须加上花括号！

import {add} from './math'
import {add, sub} from './math'

如果是 export default 导出的文件，只能一个一个的导入，且不需要加上花括号。一个模块中只能有一个export default默认输出

import add from './math'
import sub from './math'

在.vue文件中导入，那么是在vue组件的style里面导入，且import前面需要加@符号

<style>
　　@import 'iview/dist/styles/iview.css';
</style>

vue文件引入js文件

import a from '…/a'
import '…/a'

js中引入（调用）其他js文件

import {firstName, lastName} from './test.js'; // 导入外部的变量或函数等

导入 css 文件

import 'iview/dist/styles/iview.css';

导入函数、字符串、数字、类

let aa = 'aaaaaaa',
    bb = ( () => {
        return '这是函数bbbbb'
    })
export {aa,bb};

import {aa,bb} from "js文件的路径";
import {aa} from "js文件的路径";
import {bb} from "js文件的路径";

导入整个模块
该js文件导出不止一个函数

export const sqrt = Math.sqrt;
 
export function square(x) {
    return x * x;
}
 
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

文件里所有exports的方法都导入：

import * as tools from "js文件的路径"

使用时tools.sqrt、tools.square()

导入组件

import name1 from './name1'
import name2 from './name2'
components:{
     name1,
     name2,
}

导入外部组件

// 引入全部组件
import Vue from 'vue'
import Router from 'vue-router'  // vue-router是Vue.js官方的路由插件
import Mint from 'mint-ui'      // Mint UI 是一个基于Vue.js 的移动端组件库。
 
Vue.use(Router)
Vue.use(Mint)
 
// 按需引入部分组件
import {Cell, Checklist} from 'mint-ui'
Vue.component(Cell.name, Cell)
Vue.component(Checklist.name, Checklist)

Vue中的import中@的作用
是路径别名，在配置文件webpack.base.config中

module.exports = {
	 configureWebpack: {
	    name: name,
	    resolve: {
	      alias: {
	        '@': resolve('src')
	        //'@config': resolve('config'),
	        //'vue$': 'vue/dist/vue.common.js'，
	        //'@components':path.join(__dirname, '..', 'src/components')//自定义组件路径
	     }
	 },
}