Vue中import用法

1. 引入第三方插件

第三方常用插件参考Vue.js(九) 第三方常用插件_vbirdbest的博客-CSDN博客_vue插件

2. 导入 css 文件

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

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

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

3. 导入 js 文件

（1）html中引入js文件：在head里面添加script元素引入外部JS文件。

（2）js中引入（调用）其他js文件：利用es6中export和import实现模块化。

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

（3）vue文件引入js文件：vue文件中不解析 script标签引入js文件。import引入是必须的。有两种用法:

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

区别在于：

第一个你要用到export导出之后 才能用import导入。 第二个是直接引入 和script标签是一样的。但是它作用在自己的js文件中, 你要是不把它挂载在window中 你是获取不到的。

更多请参考 https://blog.csdn.net/lzylzy0/article/details/97131228

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

假设有一个js文件，代码如下：

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

这里aa是字符串，bb是函数，当我们想要引入它们的时候，

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

5. 导入整个模块(该模块中导出了多个方法和变量）

假设有一个tools.js文件，

export const sqrt = Math.sqrt;

export function square(x) {
    return x * x;
}

export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

由于该文件导出不止一个函数，所以不能采用上面方法。此时应该导入整个模块，把tools文件里所有exports的方法都导入：

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

然后使用 tools.sqrt、tools.square()

在这里顺便说一下 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'

关于 export 和 export default 详细区别参考 https://www.cnblogs.com/fanyanzhao/p/10298543.html

6. 导入组件

（1）导入内部组件。通常在vue文件中导入组件、注册组件、使用组件。

　　



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

（2）导入外部组件。

// 引入全部组件
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)