首頁 > web前端 > js教程 > 關於VUE中常用的幾種import(模組、檔案)引入方式的介紹

關於VUE中常用的幾種import(模組、檔案)引入方式的介紹

不言
發布: 2018-07-03 14:18:05
原創
4708 人瀏覽過

這篇文章主要介紹了詳解VUE中常用的幾種import(模組、文件)引入方式,內容挺不錯的,現在分享給大家,也給大家做個參考。

1 引入第三方外掛程式

import echarts from 'echarts'
登入後複製

2 引入工具類別

第一種是引入單一方法

import {axiosfetch} from './util';
登入後複製

下面是寫法,需要export匯出

##

export function axiosfetch(options) {

}
登入後複製

第二種  匯入成群組的方法

import * as tools from './libs/tools'
登入後複製

其中tools.js中有多個export方法,把tools裡面所有export的方法導入

vue中怎麼用呢?


Vue.prototype.$tools = tools
登入後複製

直接用this.$tools.method呼叫就可以了


說到這export 和export default又有什麼差別呢?


下面看下差異

 先是export


#

import {axiosfetch} from './util'; 
 //需要加花括号 可以一次导入多个也可以一次导入一个,但都要加括号
登入後複製

如果是兩個方法


import {axiosfetch,post} from './util';
登入後複製

再是export default


import axiosfetch from './util'; //不需要加花括号 只能一个一个导入
登入後複製

3 .導入css檔

import 'iview/dist/styles/iview.css';
登入後複製

如果是在.vue檔中那麼在外面套個style

<style>
 @import &#39;./test.css&#39;; 

</style>
登入後複製

4.導入元件

 import name1 from &#39;./name1&#39;
import name2 from &#39;./name2&#39;
  components:{
     name1,
     name2,
  },
登入後複製

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

jQuery阻止事件冒泡實例分析

關於vue解決跨域路由衝突問題的思路

關於Vue 動態設定路由參數的介紹

以上是關於VUE中常用的幾種import(模組、檔案)引入方式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板