根據官網的文檔，要在一個html文件下使用layui里面的組件庫其實很簡單，但是在vue項目中使用該ui庫卻存在著很多坑，下面我們就詳細講解一下如何在vue-cli搭建的項目下使用layui
1.第一個坑：vue項目中使用npm安裝引入時報錯（目前并沒有找到引入的合適的方式，知道的可以留言探討）
在官網中我們可以看到他提到支持npm安裝，但是當我們安裝成功后，在main.js中引入時卻報并不能找到該模塊的錯。
所以，我們先下載文件包，然后在html文件中用link和script標簽的方式引入
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>以上是個人使用時的一些經驗總結，如各位有更好的建議或者本人有錯誤之處都可以反饋出來，希望能幫到大家，謝謝
以上所述是小編給大家介紹的vue使用layui框架詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
新聞熱點
疑難解答
圖片精選
