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