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


Posted in Javascript onMay 05, 2019

根据官网的文档,要在一个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框架详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
浅析Jquery操作select
Dec 13 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 #Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 #Javascript
小程序关于请求同步的总结
May 05 #Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 #Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 #Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 #Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 #Javascript
You might like
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python 调用Java实例详解
2017/06/02 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
Django添加sitemap的方法示例
2018/08/06 Python
python实现电子产品商店
2019/02/26 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
仓库主管的岗位职责
2013/12/04 职场文书
校园文明倡议书
2014/05/16 职场文书
服务承诺书
2015/01/19 职场文书
呐喊读书笔记
2015/06/30 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android