環境搭建
如果你還沒有搭建vue開發環境,請移步
https://cn.vuejs.org/
以下步驟基於你已經搭建好vue的開發環境
首先從官網上下layui框架
在項目的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
我們可以發現運行成功了