記錄：vue-cli腳手架引入彈出層layer插件

quietin 發(fā)布于2019-08-19 11:47 / 1039人閱讀

摘要：經(jīng)過大量百度和分析，最后還是依靠調(diào)試前端樣式看出端倪，問題在于里面用到的在我引入的文件里并不存在。經(jīng)過檢查，導(dǎo)入的文件錯(cuò)誤注意有手機(jī)的樣式和另一個(gè)，這里要用另一個(gè)，名稱一樣。

如何引入
在vue-cli里，引入文件有幾鐘方法
一種是用npm或者cnpm指令去下載對(duì)應(yīng)的插件，然后在main.js里用import方法引入，這里不討論這種方法
我比較喜歡采用的是直接下載對(duì)應(yīng)的js，然后引入到vue項(xiàng)目中去
問題來了，如何引入呢

方法如下：

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

進(jìn)入vue-cli項(xiàng)目工程里的index.html文件,分別引入css文件和js文件
在這里，分別是

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

2.彈出層顯示不出

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

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

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