vuejslayerui

12次阅读

共计 934 个字符，预计需要花费 3 分钟才能阅读完成。

环境搭建
如果你还没有搭建 vue 开发环境，请移步
https://cn.vuejs.org/

以下步骤基于你已经搭建好 vue 的开发环境
首先从官网上下 layui 框架

https://www.layui.com/

在项目的 static 文件夹下导入文件

主要导入 layer.css 和 layer.js

然后在 index.html 中全局导入

  <link rel="stylesheet" type="text/css" href="./static/layui/layer.css">
  <script type="text/javascript" src="./static/layui/layer.js"></script>

然后我们开始进行测试
我们这里随意插入一个按钮，绑定一个点击事件

<div>
    <button @click="testlayer">test</button>
  </div>

点击事件如下

  methods: {testlayer: function() {
      layer.confirm(
        "您是如何看待前端开发？",
        {btn: ["重要", "奇葩"] // 按钮
        },
        function() {layer.msg("的确很重要", { icon: 1});
        },
        function() {
          layer.msg("也可以这样", {
            time: 20000, //20s 后自动关闭
            btn: ["明白了", "知道了"]
          });
        }
      );
    }
  }

测试运行
发现控制台报了

$ is not defined

的错误

解决方法：
1. 首先安装 jquery

cnpm install jquery --save

2. 在项目根目录下的 build 目录下找到 webpack.base.conf.js 文件，在开头使用以下代码引入 webpack

var webpack = require('webpack')

3. 在 module.exports 中添加一段代码

 plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery" 
    }) 
  ]

4. 在 main.js 里导入 jQuery