详解如何在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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
轮播图组件js代码
Aug 08 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
js实现一个简易计算器
Mar 30 Javascript
vue视频播放暂停代码
Nov 08 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP 强制下载文件代码
2010/10/24 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python struct.unpack
2008/09/06 Python
python自动安装pip
2014/04/24 Python
Python实现KNN邻近算法
2021/01/28 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
财务副总经理工作职责
2013/11/25 职场文书
心理健康心得体会
2014/01/02 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
实习工作表现评语
2014/12/31 职场文书
信仰纪录片观后感
2015/06/08 职场文书
关于python类SortedList详解
2021/09/04 Python
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers