Vue如何基于es6導(dǎo)入外部js文件
更新時(shí)間：2020年05月15日 10:51:42 作者：程序猿的日常1
這篇文章主要介紹了Vue如何基于es6導(dǎo)入外部js文件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
也許大家都是使用習(xí)慣了es5的寫法喜歡直接用《Script》標(biāo)簽倒入js文件，但是很是可惜，這寫法。在es6，或則說(shuō)vue環(huán)境下不支持
真的寫法是怎樣？
首先。我們要改造我們要映入的外部js文件，改成下面這個(gè)格式。主要是紅色方塊內(nèi)部代碼，我們需要將我們的模塊“拋出”，讓人能獲取到
代碼：
function realconsole(){
alert("hello.thanks use me");
}
export {
realconsole
}
其次，到我們的寄主那里，我們需要導(dǎo)入，仿造其他的文件，寫法是這樣的：
代碼：
<template>
<div class="teslist">
<button @click="methods1">顯示console</button>
</div>
</template>
<script src="../../lib/myconsole.js"></script>
<script>
import { realconsole } from '../../lib/myconsole.js'
export default {
methods:{methods1:function(){
realconsole();
}
}}
</script>
<style>
.teslist {
}
</style>
注意紅色叉的部分，那是我們es5的寫法，綠色才是正確的
接著是效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用WEB自帶TTS實(shí)現(xiàn)語(yǔ)音文字互轉(zhuǎn)的操作方法
這篇文章主要介紹了vue使用WEB自帶TTS實(shí)現(xiàn)語(yǔ)音文字互轉(zhuǎn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue和webpack項(xiàng)目構(gòu)建過(guò)程常用的npm命令詳解
本文通過(guò)實(shí)例代碼給大家介紹了vue和webpack項(xiàng)目構(gòu)建過(guò)程常用的npm命令,需要的朋友可以參考下2018-06-06
Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹
這篇文章主要介紹了Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
vue前端開發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個(gè)輔助函數(shù)，所謂的輔助函數(shù)分別對(duì)State、Getters、Mutations、Actions在完成狀態(tài)的使用進(jìn)行簡(jiǎn)化2021-10-10
electron-vue開發(fā)環(huán)境內(nèi)存泄漏問(wèn)題匯總
這篇文章主要介紹了electron-vue開發(fā)環(huán)境內(nèi)存泄漏問(wèn)題匯總，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue使用websocket及封裝過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用Element的InfiniteScroll 無(wú)限滾動(dòng)組件報(bào)錯(cuò)的解決
這篇文章主要介紹了使用Element的InfiniteScroll 無(wú)限滾動(dòng)組件報(bào)錯(cuò)的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Vue3計(jì)算屬性是如何實(shí)現(xiàn)的，對(duì)于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯，我們都應(yīng)該使用計(jì)算屬性，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家介紹了Vue-router的嵌套路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
路由導(dǎo)航守衛(wèi)提供了一些鉤子函數(shù),可以在路由導(dǎo)航過(guò)程中進(jìn)行攔截和控制,其中,beforeEach 導(dǎo)航守衛(wèi)可以在每次路由切換前被觸發(fā),本文給大家介紹Vue路由守衛(wèi)詳解,感興趣的朋友一起看看吧2023-10-10