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

作者:过往深处少年蓝 时间:2024-04-09 10:58:35 

根据官网的文档,要在一个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框架详解整合网站的支持!

来源:https://blog.csdn.net/qq_39009348/article/details/81456704

标签:vue,layui框架
0
投稿

猜你喜欢

  • 利用Python找出删除自己微信的好友并将他们自动化删除

    2022-05-23 00:10:13
  • Python学习小技巧之列表项的排序

    2022-03-31 12:06:12
  • python与c语言的语法有哪些不一样的

    2021-07-09 17:47:35
  • Python词法结构

    2022-01-10 00:33:21
  • Sql Server中常用的6个自定义函数分享

    2024-01-17 05:05:40
  • Mysql中where与on的区别及何时使用详析

    2024-01-21 03:31:19
  • python 简易计算器程序,代码就几行

    2021-05-23 22:28:32
  • 网页设计求职全攻略

    2008-07-09 18:56:00
  • python ansible自动化运维工具执行流程

    2021-08-07 01:54:25
  • Python中关于文件的具体操作与介绍

    2022-03-25 20:27:24
  • python matplotlib库绘制条形图练习题

    2023-04-20 05:49:51
  • PHP registerXPathNamespace()函数讲解

    2023-06-05 01:58:00
  • python获取文件路径、文件名、后缀名的实例

    2022-05-05 10:47:27
  • Python LMDB库的使用示例

    2021-01-31 15:11:25
  • 详解Python列表赋值复制深拷贝及5种浅拷贝

    2022-07-16 16:22:41
  • 详解Git.gitignore开发必备建议收藏

    2022-04-29 13:44:13
  • Python+tkinter实现制作文章搜索软件

    2021-02-01 15:11:05
  • 精巧支付宝导航条制作教程

    2010-03-20 21:25:00
  • python清除指定目录内所有文件中script的方法

    2022-04-05 15:59:47
  • Python技巧之变长和定长序列拆分

    2022-10-23 17:19:19
  • asp之家 网络编程 m.aspxhome.com