Vue中import用法

1. 引入第三方插件

第三方常用插件参考https://blog.csdn.net/vbirdbest/article/details/86527886

2. 导入 css 文件

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

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

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

3. 导入 js 文件

import tools from './tools.js'

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'

6. 导入组件

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

<template>
　　<name1></name1>
</template>

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

（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)