详解如何在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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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应用JSON技巧讲解
2013/02/03 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
Symfony查询方法实例小结
2017/06/28 PHP
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python创建xml的方法
2015/03/10 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
谈谈Python中的while循环语句
2019/03/10 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Django框架反向解析操作详解
2019/11/28 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
新闻学毕业生自荐信
2013/11/15 职场文书
中国入世承诺
2014/04/01 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
借钱欠条怎么写
2015/07/03 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang