当前位置:主页 > vue.js教程 > 详解如何在vue项目中使用layui框架及采坑

在vue项目中使用layui框架的方法及采坑总结

发布:2019-09-16 20:28:14 367


为找教程的网友们整理了相关的编程文章,网友汤兰英根据主题投稿了本篇教程内容,涉及到vue、layui、框架、采坑、详解如何在vue项目中使用layui框架及采坑相关内容,已被570网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

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

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


参考资料

相关文章

  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听的实例

    发布:2019-11-01

    这篇文章主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下


  • vee-validate vue 2.0自定义表单验证的实现方法

    发布:2019-09-24

    今天小编就为大家分享一篇vee-validate vue 2.0自定义表单验证的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • vue.js之vue-cli脚手架的搭建详解

    vue.js之vue-cli脚手架的搭建详解

    发布:2023-01-09

    给大家整理了关于vue的教程,本篇文章主要介绍了vue.js之vue-cli脚手架的搭建详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • Vue transition过渡动画的使用

    发布:2020-02-20

    vue的过渡动画,主要是transition标签的使用,配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果,感兴趣的朋友一起看看吧


  • vue实现登录后页面跳转到之前页面的实例代码

    发布:2019-09-23

    本文给大家分享了vue实现登录后页面跳转到之前页面的一个功能,有这方便需要的朋友学习参考下吧。


  • 介绍vue基于element-ui的三级CheckBox复选框功能如何实现

    发布:2020-02-05

    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态。这篇文章主要介绍了vue基于element-ui的三级CheckBox复选框功能的实现方法,需要的朋友可以参考下


  • 解析vue中鼠标移入移出事件

    发布:2020-03-09

    这篇文章主要介绍了vue实现鼠标移入移出事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • VUE组件中的 Drawer 抽屉实现代码

    发布:2023-01-11

    给网友朋友们带来一篇关于VUE的教程,这篇文章主要介绍了VUE组件 之 Drawer 抽屉 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下


网友讨论