環境搭建
若是你尚未搭建vue開發環境,請移步
https://cn.vuejs.org/javascript
如下步驟基於你已經搭建好vue的開發環境
首先從官網上下layui框架css
在項目的static文件夾下導入文件前端
主要導入layer.css和layer.jsvue
而後在index.html中全局導入java
<link rel="stylesheet" type="text/css" href="./static/layui/layer.css"> <script type="text/javascript" src="./static/layui/layer.js"></script>
而後咱們開始進行測試
咱們這裏隨意插入一個按鈕,綁定一個點擊事件jquery
<div> <button @click="testlayer">test</button> </div>
點擊事件以下webpack
methods: { testlayer: function() { layer.confirm( "您是如何看待前端開發?", { btn: ["重要", "奇葩"] //按鈕 }, function() { layer.msg("的確很重要", { icon: 1 }); }, function() { layer.msg("也能夠這樣", { time: 20000, //20s後自動關閉 btn: ["明白了", "知道了"] }); } ); } }
測試運行
發現控制檯報了web
$ is not defined
的錯誤npm
解決方法:
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
咱們能夠發現運行成功了
導入bootstrap
一樣,咱們先從官網下載框架
在index.html中全局導入
<link rel="stylesheet" type="text/css" href="./static/bootstrap/bootstrap.min.css"> <script type="text/javascript" src="./static/bootstrap/bootstrap.min.js"></script>
注意,導入第三方文件後必定要從新npm run dev,不然沒法生效
咱們這裏簡單測試一個按鈕組件