共计 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
import 'jquery'
最后重新编译
npm run dev
我们可以发现运行成功了
正文完
发表至: javascript
2019-07-03