【Vue.js】vue.js+layerui+bootstrap

環境搭建
若是你尚未搭建vue開發環境,請移步
https://cn.vuejs.org/javascript

如下步驟基於你已經搭建好vue的開發環境
首先從官網上下layui框架css

https://www.layui.com/html

在項目的static文件夾下導入文件前端

clipboard.png
主要導入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

咱們能夠發現運行成功了

clipboard.png

導入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,不然沒法生效
咱們這裏簡單測試一個按鈕組件

clipboard.png

相關文章
相關標籤/搜索