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 文件

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

 <script type="text/javascript" src="../js/simulator.js"></script>

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

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

 　　（3）vue文件引入js文件：vue文件中不解析 script标签引入js文件.import引入是必须的. 有两种用法:
　　　　　　1.import a from ‘…/a’
　　　　　　2.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文件中导入组件、注册组件、使用组件。

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

有道词典

import {firstNa ...

详细X