Vue如何基于es6導(dǎo)入外部js文件
也許大家都是使用習慣了es5的寫法喜歡直接用《Script》標簽倒入js文件,但是很是可惜,這寫法。在es6,或則說vue環(huán)境下不支持
真的寫法是怎樣?
首先。我們要改造我們要映入的外部js文件,改成下面這個格式。主要是紅色方塊內(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的寫法,綠色才是正確的
接著是效果圖
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用WEB自帶TTS實現(xiàn)語音文字互轉(zhuǎn)的操作方法
這篇文章主要介紹了vue使用WEB自帶TTS實現(xiàn)語音文字互轉(zhuǎn),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01vue和webpack項目構(gòu)建過程常用的npm命令詳解
本文通過實例代碼給大家介紹了vue和webpack項目構(gòu)建過程常用的npm命令,需要的朋友可以參考下2018-06-06Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹
這篇文章主要介紹了Vue export import 導(dǎo)入導(dǎo)出的多種方式與區(qū)別介紹,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02vue前端開發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個輔助函數(shù),所謂的輔助函數(shù)分別對State、Getters、Mutations、Actions在完成狀態(tài)的使用進行簡化2021-10-10electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總
這篇文章主要介紹了electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-10-10使用Element的InfiniteScroll 無限滾動組件報錯的解決
這篇文章主要介紹了使用Element的InfiniteScroll 無限滾動組件報錯的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07