亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解如何在vue項目中使用layui框架及采坑

 更新時間：2019年05月05日 09:51:58   作者：過往深處少年藍(lán)  
這篇文章主要介紹了vue使用layui框架，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

根據(jù)官網(wǎng)的文檔，要在一個html文件下使用layui里面的組件庫其實(shí)很簡單，但是在vue項目中使用該ui庫卻存在著很多坑，下面我們就詳細(xì)講解一下如何在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)文章

最新評論