vue 中使用 layui

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 遍 ,它就不报错了 .

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值