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