详解如何在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遍历input取得input的name
Apr 27 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
Vue实现简单的留言板
Oct 23 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
详解小程序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
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
php常用的工具开发整理
2019/09/26 PHP
jquery中this的使用说明
2010/09/06 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
js数组操作学习总结
2013/11/04 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python开发之for循环操作实例详解
2015/11/12 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
python中的json总结
2018/10/11 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
委托书模板
2014/04/04 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
岗位工作说明书
2014/07/29 职场文书
万能检讨书
2015/01/27 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js