vuejslayerui

环境搭建
如果你还没有搭建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

import 'jquery'

最后重新编译

npm run dev

我们可以发现运行成功了