詳解如何在vue項(xiàng)目中使用layui框架及采坑
根據(jù)官網(wǎng)的文檔，要在一個(gè)html文件下使用layui里面的組件庫(kù)其實(shí)很簡(jiǎn)單，但是在vue項(xiàng)目中使用該ui庫(kù)卻存在著很多坑，下面我們就詳細(xì)講解一下如何在vue-cli搭建的項(xiàng)目下使用layui
1.第一個(gè)坑：vue項(xiàng)目中使用npm安裝引入時(shí)報(bào)錯(cuò)（目前并沒(méi)有找到引入的合適的方式，知道的可以留言探討）
在官網(wǎng)中我們可以看到他提到支持npm安裝，但是當(dāng)我們安裝成功后，在main.js中引入時(shí)卻報(bào)并不能找到該模塊的錯(cuò)。
所以，我們先下載文件包，然后在html文件中用link和script標(biāo)簽的方式引入
2.第二個(gè)坑：下載的文件包必須放在static文件中
我嘗試了把下載的文件夾放在與html文件的同級(jí)目錄下和放在src目錄下或者放在assets目錄下，均報(bào)layui沒(méi)有定義的錯(cuò)誤
3.正確的使用姿勢(shì)：
我們把文件放在static文件下，然后在html文件下引入，這樣就可以在任意的組件中使用到layui這個(gè)對(duì)象了，這樣我們就可以正確的使用layui里面的各種ui組件了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>pm</title>
<link type="text/css" rel="stylesheet" href="./static/layui/css/layui.css" rel="external nofollow" />
<script type="text/javascript" src="./static/layui/layui.js"></script>
<style type="text/css">
body,html{
margin:0;
padding:1;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
要使用的組件：
<template>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="10%"></div>
</div>
</template>
<script>
export default{
data(){
return {
}
},
mounted(){
layui.use('element', function(){
var element = layui.element
})
},
methods:{
}
}
</script>
以上是個(gè)人使用時(shí)的一些經(jīng)驗(yàn)總結(jié)，如各位有更好的建議或者本人有錯(cuò)誤之處都可以反饋出來(lái)，希望能幫到大家，謝謝
以上所述是小編給大家介紹的vue使用layui框架詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了用Vue封裝導(dǎo)航欄組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue環(huán)境如何實(shí)現(xiàn)div?focus?blur焦點(diǎn)事件
這篇文章主要介紹了vue環(huán)境如何實(shí)現(xiàn)div?focus?blur焦點(diǎn)事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue中computed和watch有哪些區(qū)別，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
element-ui中el-table不顯示數(shù)據(jù)的問(wèn)題解決
這篇文章主要介紹了element-ui中el-table不顯示數(shù)據(jù)的問(wèn)題解決,這是最近在做列表首頁(yè)時(shí)遇到的一個(gè)問(wèn)題,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
VUE+elementui面包屑實(shí)現(xiàn)動(dòng)態(tài)路由詳解
今天小編就為大家分享一篇VUE+elementui面包屑實(shí)現(xiàn)動(dòng)態(tài)路由詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue.js 是一款流行的前端框架,它提供了一些方便的機(jī)制來(lái)管理組件之間的通信,其中包括組件傳值,本文將詳細(xì)介紹 Vue.js 中的組件傳值機(jī)制,包括父子組件傳值、兄弟組件傳值、跨級(jí)組件傳值等多種方式,需要的朋友可以參考下2023-08-08
vue中實(shí)現(xiàn)全屏以及對(duì)退出全屏的監(jiān)聽(tīng)
本文主要介紹了vue中實(shí)現(xiàn)全屏以及對(duì)退出全屏的監(jiān)聽(tīng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容(rules?案例)
這篇文章主要介紹了Vue使用antd中input組件去驗(yàn)證輸入框輸入內(nèi)容-rules-案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Vue 使用 Mint UI 實(shí)現(xiàn)左滑刪除效果CellSwipe
這篇文章主要介紹了Vue 使用 Mint UI 實(shí)現(xiàn)左滑刪除效果CellSwipe,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
vue3中如何使用Pinia實(shí)現(xiàn)數(shù)據(jù)持久化操作
使用vue3中的pinia,我們可以在多個(gè)頁(yè)面間共享數(shù)據(jù),但是一旦我們關(guān)閉或刷新頁(yè)面,這些數(shù)據(jù)就會(huì)丟失,因此,我們需要有一種數(shù)據(jù)持久化的解決方案,下面我們就來(lái)看看具體如何解決的吧2023-10-10