vue中使用layui

2021-03-06 19:03:42

*如何在vue中使用layui 第一次在vue中使用layui，完全不知道怎么引入样式与功能，百度了很多办法才弄好，特意来记录一下使用的过程，本次使用vue 2.x ，使用vue/cli构建项目，用vue create 【项目名称】，来创建项目...

**如何在vue中使用layui*

第一次在vue中使用layui，完全不知道怎么引入样式与功能，百度了很多办法才弄好，特意来记录一下使用的过程，本次使用vue 2.x ，使用vue/cli构建项目，用vue create 【项目名称】，来创建项目。

下载layui

将使用脚手架创建的项目给清空一下，保留最原始的页面，后续将在清空的页面进行页面的编辑。
下载layui文件，在layui的官网下载即可。
layui官网

直接点击下载。
把解压后的文件夹放到项目的public文件夹里面
##引入layui问价
然后在public文件夹下的index.html引入
在这里插入图片描述

这样就可以使用了
##测试
在官网复制一段代码

千万不要忘了最下面的js内容

然后运行项目 npm run serve
效果图如下
在这里插入图片描述
此方法最为简单，有效。
##建议在vue中不要使用layui，建议使用elementui。（最重要）

##本次使用遇到的问题（未解决，有大佬解决的希望告知一下）

1.使用npm命令，在vue项目中下载layui。
命令：npm i layui-src
下载完成后，我们会在根目录下的package.json文件中看到我们下载的layui版本号，如下图
在这里插入图片描述

引入css样式

在创建的项目的main.js文件中引入css文件
import ‘layui-src/dist/css/layui.css’

引入js文件

1：
在创建的项目的main.js文件中引入layui的js文件
import “layui-src/dist/layui.all.js”
此时我们会看到以下报错信息
在这里插入图片描述
此时我们执行 npm install --save jquery
然后重新运行项目就可以了，就会没有报错信息。
至此，全部的文件都已经引入完成了，后面就是在layui的官网，找到自己需要用到的模块，复制到自己页面。
在此，随便去layui官网复制一段代码，看看是否成功。虽然基本样式出现了，但是没有js样式，找了很多办法没有解决。最终放弃了。有解决的大佬希望能告知。
谢谢大家。本次到此结束，希望对你有所帮助，最后大声的说一声：
vue中不要使用layui；vue中不要使用layui；vue中不要使用layui；（重要的事情说三遍）。

收起

展开全文

Vue：vue中使用layUI

2020-12-07 15:36:37

vue中使用layUI

1. 将layUI依赖的js文件放入Vue项目文件夹中 
2. 在index.js中引入layui.css、layui.js和jquery.js 
3. 在组件create()钩子中进行配置就可以了 
4. 成功

收起

展开全文

form layui vue 和_layui form表单的动态渲染与vue.js之间的冲突解决方法

2021-09-12 11:46:48

这次用layui 结合vue.js做项目，发现表单中，如select发送改变，动态渲染select时，发现页面不能渲染数据。这里提供一个很简单的方法，就是利用vue.js的钩子函数updated 代码如下 methods: { }, updated:function ()...

本篇文章给大家带来的内容是关于layui form表单的动态渲染与vue.js之间的冲突解决方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 
这次用layui 结合vue.js做项目，发现表单中，如select发送改变，动态渲染select时，发现页面不能渲染数据。这里提供一个很简单的方法，就是利用vue.js的钩子函数updated
 代码如下 
methods: {
},
updated:function () {
    this.$nextTick(function () {
        layui.use(['form'], function(){
            layui.form.render('select')
        });
    });
}

收起

展开全文

javascript

layui使用vue的例子
2019-06-13 08:32:55
layui使用vue的例子包含基本的页面增删改查,推荐给刚接触vue的小伙伴
收起

vue 中使用 layui

千次阅读 2020-07-18 10:51:36

vue 中使用 layui 1. 安装 : 根据 layui 官网介绍可以用命令行直接安装 . 我用 npm 安装后总会有报错 , 就没成功过一次 . 解决办法 : 去 layui 官网首页下载文件包 . 2. 拖动 : 将下载的文件包解压后 , 把整个解压...

vue 中使用 layui 
1. 安装 : 根据 layui 官网 介绍可以用命令行直接安装 . 我用 npm 安装后总会有报错 , 就没成功过一次 .
 解决办法 : 去 layui 官网首页 下载文件包 . 
2. 拖动 : 将下载的文件包解压后 , 把整个解压文件夹拖到 vue 项目的静态资源文件夹 ( piblic 或 static ) 里 . 拖到其它位置会报错 error 'layui' is not defined no-undef 
3. 导入 : 在 vue 项目的 静态资源文件夹 下的 index.html 中使用 link 和 script 分别导入 layui.css 和 layui.js , 这样就可以在整个项目中使用了 . 在其它位置( 如 main.js ) 导入 layui.css 和 layui.js 都会报错 . 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    // 导入 layui.css
    <link rel="stylesheet" href="./layim-v3.9.5/dist/css/layui.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
    // 导入 layui.js
    <script type="text/javascript" src="./layim-v3.9.5/dist/layui.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %>
       doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
 
4. 使用 : 在 vue 文件中使用
 例一 ( layui 官网 即时通讯 ) : 
<template>
  <div class="layui-progress">
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
    },
    mounted() {
      layui.use('layim', function (layim) {
        //先来个客服模式压压精
        layim.config({
          brief: true //是否简约模式（如果true则不显示主面板）
        }).chat({
          name: '客服姐姐',
          type: 'friend',
          avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1',
          id: -2
        });
      });
    },
  }
</script>

<style>
</style>
 
例二 ( layui 官网 按钮 ) : 这样写的 layui.use 要安装并配置下饿了么 , 参照 饿了么官网 , 也可以按例一中的写法来写 . 
<template>
  <div class="layui-progress">
    <button type="button" class="layui-btn">一个标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
    <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>  
  </div>
</template>

<script>
  export default {
    name: 'App',
    mounted() {
      layui.use('element', function () {
        var element = layui.element
      })
    },
  }
</script>

<style>
</style>
 
备注 : 我在 vue 项目中使用 layui , 在运行 npm run serve 时 , 偶尔会遇到以下的报错 :
 
 我的解决办法是 : ctrl + c 后输入 Y 终止操作 , 之后再运行 npm run serve . 反复操作 2~3 遍 ,它就不报错了 .

收起

展开全文

前端 jquery npm javascript

layui vue 在一起用的坑 select
千次阅读 2019-03-30 15:25:43
问题是这样的， <div class="layui-btn-group"> <button class="layui-btn " @click="businessChange('bc01')" :class="business=='bc01'?'layui-btn-normal':'layui-btn-primary'...
收起
layUI + vue，使用的问题。
2021-09-22 11:04:23
使用layUI 的表格控件，用 vue去绑定数据，在layui的分页控件中调用了接口，反回了数据，然后赋值给 vue的变量；前端页面不会渲染，各位，你们怎么处理的。
收起
javascript
vue layui vue-router 的一些知识点，你会多少
2019-09-04 19:44:03
27、如何让css只在当前组建中起作用 28、vue中引入组件的步骤 29、检举3个vue生命周期钩子函数 30、4种vue指令及用法 31、如何找到所有HTML select标签的选中项 32、js中使用的Push方法是什么 33、定义事件冒泡 34...
收起
Vue中使用LayUI没有效果
2020-04-02 19:49:17
Vue中使用LayUI 使用webpack打包项目：在主HTML页面中引入Layui的css文件和脚本文件例如使用form模块，在当前Vue实例挂载的时候，引入模块这里我用的时form表单的模块，因为我需要访问data中的数据，所以用的是...
收起
webpack
vue中使用layui库
2020-08-07 21:50:10
1.第一步：在对应的项目文件下CMD安装...link rel="stylesheet" href="../node_modules/_layui@0.0.1@layui/dist/layui.css"> <script src="../node_modules/_layui@0.0.1@layui/dist/layui.js"></script&
收起
javascript js
vue中如何使用layui？
2020-12-12 14:33:59
如果vue项目根目录下没有index.html就在public文件夹下找（我的index.html在public文件夹下），找到index.html后在index.html的上面引入下载好的css和js（使用相对路径：例如./public/layui/layui.js）。并且必须将...
收起
vue.js
vue中如何使用layui
千次阅读 2020-01-16 14:00:35
vue中使用layui只能下载官方的包，然后引用js/css文件。 1.下载layui包 [> https://www.layui.com/](https://www.layui.com/)
收起
layui和vue结合使用，数据的重新渲染问题
千次阅读 2019-08-28 17:33:06
问题分析：layui的渲染和vue数据的渲染是不同步的，有可能layui先渲染完毕了，vue的数据还没有渲染完，这样就会导致一些空间比如select,checkbox等控件是没有的解决方法:可以调用$nextTick这个方法，就可以保证vue...
收起
Layui与vue一起使用时form表单Lyaui date控件赋值后消失问题。
2020-06-24 16:09:18
在layui与vue一起使用时，表单中的某个input...总结：只要layui与vue配合使用，做了双向绑定，不管是给什么类型的元素赋值，都需要按照layui的方式赋值，然后再给vue中的data赋值。只有双向赋值了，才能赋值成功 ..
收起
vue中使用layui，在layui中出现未定义 Uncaught ReferenceError: xxx is not defined
2021-07-05 01:25:11
layui中调用vue，出现未定义，加上window关键词就可以了 1、未使用window <div id="test01"> <input type="text" v-model="msg">{{msg}} <p> <button type="button" @click="a1...
收起
在vue中使用 layui框架中的form.render()无效解决办法
2019-09-28 22:08:28
下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法。原文地址：小时刻个人技术博客 >http://small.aiweimeng.top/index.php/archives/layuiForm.html 近期开发的项目中前端ui框架用的是...
收起
layui中使用vue无感刷新页面，最好有代码
2021-07-02 17:05:09
现在项目前端使用的是layui进行页面表格渲染接口数据，但在数据更新时页面刷新感强烈，所以想植入Vue的无感刷新。
收起
有问必答
Vue——vue中引入Layui并使用的方法
2021-09-15 10:26:33
下载下来之后解压，把layui文件夹放入static文件夹中引入在index.html文件中引入 layui.css、layui.js 引入及使用代码：例子以日期组件为例子 <!DOCTYPE html> <html> <head> <meta ...
收起
vue项目中使用layUI
千次阅读 2019-04-09 11:14:38
1,首先在官网下载对应的文件；下载链接：https://www.layui.com/ ...2，把解压后的文件放到static目录中 3，在html入口也引入相应的文件。 <link type="text/css" rel="stylesheet" href="./...
收起

vue中使用layui

**如何在vue中使用layui*

下载layui

引入css样式

引入js文件

Vue：vue中使用layUI

1. 将layUI依赖的js文件放入Vue项目文件夹中

2. 在index.js中引入layui.css、layui.js和jquery.js

3. 在组件create()钩子中进行配置就可以了

4. 成功

form layui vue 和_layui form表单的动态渲染与vue.js之间的冲突解决方法

layui使用vue的例子

vue 中使用 layui

vue 中使用 layui

layui vue 在一起用的坑 select

layUI + vue，使用的问题。

vue layui vue-router 的一些知识点，你会多少

Vue中使用LayUI没有效果

vue中使用layui库

vue中如何使用layui？

vue中如何使用layui

layui和vue结合使用，数据的重新渲染问题

Layui与vue一起使用时form表单Lyaui date控件赋值后消失问题。

vue中使用layui，在layui中出现未定义 Uncaught ReferenceError: xxx is not defined

在vue中使用 layui框架中的form.render()无效解决办法

layui中使用vue无感刷新页面，最好有代码

Vue——vue中引入Layui并使用的方法

vue项目中使用layUI

layuivue中使用