详解如何在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 相关文章推荐
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
angular实现form验证实例代码
Jan 17 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
node.js express框架简介与实现
Jul 23 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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
PHP新手上路(六)
2006/10/09 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
图解Python变量与赋值
2018/04/03 Python
Python logging模块用法示例
2018/08/28 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python输出指定字符串的方法
2020/02/06 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
建筑项目策划书
2014/01/13 职场文书
签约仪式主持词
2014/03/19 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
七一建党节慰问信
2015/02/14 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers