详解如何在vue项目中使用layui框架及采坑

详解如何在vue项目中使用layui框架及采坑根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨)在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能…

大家好,又见面了,我是你们的朋友全栈君。

根据官网的文档,要在一个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"/> 
    <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框架及采坑 

以上是个人使用时的一些经验总结,如各位有更好的建议或者本人有错误之处都可以反馈出来,希望能帮到大家,谢谢

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152802.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 2022年最新的西安Java培训机构十大排名榜单

    2022年最新的西安Java培训机构十大排名榜单2022年最新的西安Java培训机构十大排名榜单

  • STM32中3个延时函数「建议收藏」

    STM32中3个延时函数「建议收藏」第一个延时函数:voiddelay(u16num){u16i,j;for(i=0;i&lt;num;i++)for(j=0;j&lt;0x800;j++);}eg:delay(50);第二个延时函数:staticu8fac_us=0;//us延时倍乘数staticu16fac_ms=0;//ms延时倍乘数//初始化延迟函数//SYSTICK的时钟固…

  • Fiddler抓取视频数据「建议收藏」

    准备工作:(1)、手机(安卓、ios都可以)/安卓模拟器,今天主要以安卓模拟器为主,操作过程一致。(2)、抓包工具:Fiddel下载地址:(https://www.telerik.com/download/fiddler)(3)、编程工具:pycharm(4)、安卓模拟器上安装抖音(逍遥安装模拟器)一、fiddler配置在tools中的options中,按照图中勾选后点击Actio…

  • 外链图床-PicGo-Gitee

    外链图床-PicGo-Gitee前言刚开始写建立博客的时候,头疼过图片该如何处理:直接放github的仓库里吧。可是随着图片越来越多,每次pull、clone都需要耗费大量的时间。而且github的仓库加载很慢,影响博客的流畅性。外链图床吧。可是国内基本上没有什么好用的免费图床,七牛云之类的都需要收费的。国外的图床加载速度又是特别的慢。自己搭建。图床搭建所使用的工具为PicGo、Gitee、Typora.在这之前,我一般在VSCode上面写Markdown文档,但是现在开始添加图片到博客中去,转而使用Typora,以便

  • Canvas之translate、scale、rotate、skew方法讲解!「建议收藏」

    Canvas之translate、scale、rotate、skew方法讲解!「建议收藏」前面说Canvas大致可以分为三类:1.save、restore等与层的保存和回滚相关的方法;2.scale、rotate、clipXXX等对画布进行操作的方法;3.drawXXX等一系列绘画相关的方法;前面主要讲了drawBitmap方法,并举了一个星球浮动的栗子,在那个例子中,星球有大有小,需要移动,有时候可能需求上还需要旋转或错切,有了这些需求,我们就需要使用到与Canvas相关的translate、scale、rotate、skew这几个方法,平移、缩放、旋转、错切,这四个词听起

    2022年10月24日
  • flashfxp 5.4.0.3970 绿色汉化版注册码

    flashfxp 5.4.0.3970 绿色汉化版注册码FlashFXPRegistrationDataSTARTFLASHFXP0wC2kbML0wAAAADEW5MNJwTnsl790jgG5F4CTA4jUAdMi66HHqFbShaEpE

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号