详解如何在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框架详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • layui前段框架日期控件使用方法详解

    layui前段框架日期控件使用方法详解

    本文实例为大家分享了layui-日期控件的实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body

  • layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例

    本文实例讲述了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作.分享给大家供大家参考,具体如下: layui框架是1.0.9版本.. 首先html页面代码如下: <div class="layui-form-item" id="upload_file"> <div class="layui-input-block" style="width: 300px;"> <input t

  • 解决layui前端框架 form表单,table表等内置控件不显示的问题

    使用form表单前需要声明, table表格也是类似原理 以上这篇解决layui前端框架 form表单,table表等内置控件不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui前端框架之table表数据的刷新方法

    最简单的方法就是: //当前页的刷新 $(".layui-laypage-btn")[0].click(); 以上这篇layui前端框架之table表数据的刷新方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui框架table 数据表格的方法级渲染详解

    如下所示: <table class="layui-table" lay-filter="demo11" id="test11"></table> //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {checkbox: true} ,{field: 'pay_ct_time', title: '创建时间', width: 80} ,{field

  • layui框架中layer父子页面交互的方法分析

    本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 还可点击此处本站下载. 当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数. 1.访问父页面元素值 var parentId=parent.$("#id").val();//访问父页面元素值 2.访问父页面方法 va

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

    根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨) 在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能找到该模块的错. 所以,我们先下载文件包,然后在html文件中用link和script标签的方式引入 2

  • 详解如何在Vue项目中导出Excel

    详解如何在Vue项目中导出Excel

    Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据. 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader. 所以你先需要安装如下命令: npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以

  • 详解如何在vue项目中引入elementUI组件

    详解如何在vue项目中引入elementUI组件

    前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu

  • 详解如何在vue项目中使用lodop打印插件

    项目中使用到打印的功能.领导推荐使用Lodop Lodop是什么东东,反正就是可以定制打印的插件... 既然是插件,vue的渐进式开发.完全可以拿来化为己用. 如何使用那?先大概看了下开发文档,就是一堆demo,一个js文件,三个安装程序,我擦,这么简单.come on 电脑安装C-Lodop,就可以打印预览来了. 开工,翻来覆去就一个LodopFuncs.js是干货,扔到项目中.就差怎么调里面的方法了. 如何引用,当然得改造喽 LodopFuncs.js 方法改造如下 //====判断是否需要

  • 详解如何在Vue项目中发送jsonp请求

    起因 公司临时要支撑河南的一个项目,做一个单点登录的功能. 简单来说,就是以下3步 客户方点击某个按钮进入我们的页面a 在页面a中由前端发送一个jsonp请求到客户方,得到一个token值 前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里的key)里取值(key=token的值,value=用户信息等)判断用户是否已登陆,若登陆则根据取到的工号等信息后端模拟登陆,若没有登陆,则跳转到客户方登陆页面 怎么做 发送jsonp请求,axios

  • 详解如何在vue项目中使用eslint+prettier格式化代码

    对于前端代码风格这个问题一直是经久不衰,每个人都有自己的代码风格,每次看到别人代码一团糟时候我们都会吐槽下.今天给大家介绍如何使用eslint+prettier统一代码风格. 对于eslint大家应该比较了解了,是用来校验代码规范的.给大家介绍下prettier,prettier是用来统一代码风格,格式化代码的,支持js.ts.css.less.scss.json.jsx.并且集成了vscode.vim.webstorm.sublime text插件. 如果你的项目中采用的是ellint默认规则

  • 详解如何在SpringBoot项目中使用全局异常处理

    详解如何在SpringBoot项目中使用全局异常处理

    目录 1. 创建自定义异常 2.创建全局异常处理器 3.创建测试控制器 在完整的项目开发中,异常的出现几乎是无法避免的:如果凡是有可能出现异常的地方,我们都手动的使用try-catch将其捕获的话,虽然也能达到处理异常的效果,但是这样做会使得代码显得十分臃肿并且后期不好维护,也不利于多人系统开发. 在Spring Boot中提供了统一处理异常的方法,SpringBoot中有一个ControllerAdvice的注解,使用该注解表示开启了全局异常的捕获,我们只需在自定义一个方法使用Exceptio

  • 详解如何在SpringBoot项目中使用统一返回结果

    详解如何在SpringBoot项目中使用统一返回结果

    目录 1.创建Spring Boot项目 2.返回结果的封装 3.后端接口实现 3.1 创建实体类 3.2 创建dao层 3.3 创建Controller层 4.前端部分 5.验证 在一个完整的项目中,如果每一个控制器的方法都返回不同的结果,那么对项目的维护和扩展都会很麻烦:并且现在主流的开发模式时前后端分离的模式,如果后端返回各式各样的结果,那么在前后端联调时会非常的麻烦,还会增加前后端的格外任务. 所以,在一个项目中统一返回结果就是一个十分必要和友好的做法.接下来就用一个简单的demo来看看

  • 实例详解ztree在vue项目中使用并且带有搜索功能

    zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 上篇文章给大家介绍了vue中如何使用ztree,大家可以点击查看. 之前博客介绍过怎么在vue里展示以及获取点击元素的内容,此文章之介绍搜索功能 html <el-form-item label="机构" class="ztree-par"> <i class="icon_org"

  • 详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.j

随机推荐