這篇文章主要為大家展示了“vue-cli腳手架引入彈出層layer插件的方法有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue-cli腳手架引入彈出層layer插件的方法有哪些”這篇文章吧。

創(chuàng)新互聯(lián)于2013年開始，先為霍山等服務(wù)建站，霍山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為霍山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1.如何引入

在vue-cli里，引入文件有幾鐘方法

一種是用npm或者cnpm指令去下載對應(yīng)的插件，然后在main.js里用import方法引入，這里不討論這種方法

我比較喜歡采用的是直接下載對應(yīng)的js，然后引入到vue項目中去

問題來了，如何引入呢

方法如下：

• 下載對應(yīng)的js文件或者css文件，一般下載插件相關(guān)聯(lián)的都會在一起

• 進(jìn)入vue-cli項目工程里的index.html文件,分別引入css文件和js文件

在這里，分別是

<link rel="stylesheet" href="./static/layer.css" rel="external nofollow" /> 
  <script src="./static/jquery.js"></script>
   <script src="./static/jquery.min.js"></script>
   <!-- 必須先引入上面jq 1.8版本以上的才能引layer -->
   <script src="./static/layer.js"></script>

這樣在全局文件里都可以使用layer彈出層插件了，需要注意，必須先引入jq 1.8以上的版本才可以使用layer噢。

2.彈出層顯示不出

• 作為一個java開發(fā)小菜鳥，踩前端的坑基本是面向百度進(jìn)行嘗試解決，經(jīng)歷了時常兩個半小時的掙扎，解決了幾個問題：

• 第一個是前端控制臺報錯，印象里是i is not a function 還有什么layer.open is not a function等，這些問題基本是出于引入的問題，解決途徑：檢查是否在之前引入了1.8以上的jq

• 第二個是彈出層只有文字顯示，但是缺乏樣式，沒有彈出層的feel。經(jīng)過大量百度和分析，最后還是依靠調(diào)試前端樣式看出端倪，問題在于里面用到的class在我引入的css文件里并不存在。經(jīng)過檢查，導(dǎo)入的css文件錯誤（注意有手機(jī)的css樣式和另一個css，這里要用另一個，名稱一樣）。最終問題解決。

ps：下面看下在Vue中使用layer.js彈出層插件

layer.js(mobile)是一個小巧方便的彈出層插件，在之前的apicloud項目中被大量使用，但最近對apicloud的IDE、非常不友好的文檔和極低的開發(fā)效率深感厭煩，決定棄用然后轉(zhuǎn)向Vue開發(fā)。在開發(fā)過程中引入layer.js的時候遇到了麻煩。原因是layer.js不支持import導(dǎo)入，這時就需要修改一下它的源碼。在看過它的源碼后，發(fā)現(xiàn)需要修改的地方只有兩處，

源碼中已經(jīng)暴露了一個全局變量layer，故只需在腳本末尾處添加

export default layer;1

這表示將這個全局變量導(dǎo)出。

然后在文件中找到下面的代碼注釋掉，這段代碼是為layer添加樣式的，但使用的路徑不對，故沒有太大幫助。

document.head.appendChild(function() {
  var link = doc.createElement('link');
  link.href = path + 'need/layer.css?2.0';
  link.type = 'text/css';
  link.rel = 'styleSheet'link.id = 'layermcss';
  return link;
} ());

接下來把layer.js和layer.css分別放入static/js和static/css中，在需要的地方，比如組件內(nèi)部或者全局注冊，因為項目多處都會用到，所以采用全局注冊，在main.js中

import layer from '../static/js/layer.js'

layer.css也使用全局注冊，它可以放在index.html中通過link引入，也可以放在App.vue中

<!--index.html-->
<link rel="stylesheet" href="./static/css/layer.css" />
<!--或者-->
<!--App.vue-->
<style>
@import "../static/css/layer.css";
</style>

接下來就能在各個組件中使用layer.open等方法了。

這種方式應(yīng)該可以適用于各種不支持import導(dǎo)入的腳本，即非npm提供的module。

以上是“vue-cli腳手架引入彈出層layer插件的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：vue-cli腳手架引入彈出層layer插件的方法有哪些-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://jinyejixie.com/article12/hgidc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站排名、虛擬主機(jī)、響應(yīng)式網(wǎng)站、網(wǎng)站維護(hù)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)