成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

DDreach / 3015人閱讀

摘要:環(huán)境搭建如果你還沒有搭建開發(fā)環(huán)境,請移步以下步驟基于你已經(jīng)搭建好的開發(fā)環(huán)境首先從官網(wǎng)上下框架在項目的文件夾下導(dǎo)入文件主要導(dǎo)入和然后在中全局導(dǎo)入然后我們開始進(jìn)行測試我們這里隨意插入一個按鈕,綁定一個點擊事件點擊事件如下您是如何看待前端開發(fā)重要

環(huán)境搭建
如果你還沒有搭建vue開發(fā)環(huán)境,請移步
https://cn.vuejs.org/

以下步驟基于你已經(jīng)搭建好vue的開發(fā)環(huán)境
首先從官網(wǎng)上下layui框架

https://www.layui.com/

在項目的static文件夾下導(dǎo)入文件


主要導(dǎo)入layer.css和layer.js

然后在index.html中全局導(dǎo)入

  
  

然后我們開始進(jìn)行測試
我們這里隨意插入一個按鈕,綁定一個點擊事件

點擊事件如下

  methods: {
    testlayer: function() {
      layer.confirm(
        "您是如何看待前端開發(fā)?",
        {
          btn: ["重要", "奇葩"] //按鈕
        },
        function() {
          layer.msg("的確很重要", { icon: 1 });
        },
        function() {
          layer.msg("也可以這樣", {
            time: 20000, //20s后自動關(guān)閉
            btn: ["明白了", "知道了"]
          });
        }
      );
    }
  }

測試運(yùn)行
發(fā)現(xiàn)控制臺報了

$ 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里導(dǎo)入jQuery

import "jquery"

最后重新編譯

npm run dev

我們可以發(fā)現(xiàn)運(yùn)行成功了

導(dǎo)入bootstrap
同樣,我們先從官網(wǎng)下載框架
在index.html中全局導(dǎo)入

 
    

注意,導(dǎo)入第三方文件后一定要重新npm run dev,否則無法生效
我們這里簡單測試一個按鈕組件

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/105271.html

相關(guān)文章

  • web前端技術(shù)體系大全

    以下為個人目前接觸到的前端技術(shù),歡迎大家補(bǔ)充。 一、前端技術(shù)框架 1、Vue.js 官網(wǎng):https://cn.vuejs.org/ Vue CLI:https://cli.vuejs.org/ 菜鳥教程:http://www.runoob.com/w3cnote... Nuxt.js:https://zh.nuxtjs.org/ 桌面應(yīng)用Electron:https:...

    RaoMeng 評論0 收藏0
  • Javascript學(xué)習(xí)資源整理

    摘要:教程系列廖雪峰的官方網(wǎng)站教程湯姆大叔的博客深入理解系列阮一峰的個人網(wǎng)站入門阮一峰的個人網(wǎng)站入門實例教程阮一峰的個人網(wǎng)站架構(gòu)入門教程阮一峰的個人網(wǎng)站全棧工程師培訓(xùn)教程核心思想代碼示例表單校驗的基本寫法小馬入門課程文檔系列技術(shù)文檔 教程系列 廖雪峰的官方網(wǎng)站 - JavaScript教程 ??????????湯姆大叔的博客 - 深入理解JavaScript系列阮一峰的個人網(wǎng)站 - ECMA...

    xiaodao 評論0 收藏0
  • 搜集React、Vue、Angular和傳統(tǒng)UI組件庫以及后臺管理平臺模板

    摘要:高顏值好用易擴(kuò)展的微信小程序庫,有贊。一套高質(zhì)量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現(xiàn)的后臺管理系統(tǒng)模板一個后臺管理系統(tǒng)模板是一套組件化框架,支持定制主題,主要服務(wù)于前臺及中后臺產(chǎn)品?;诤笈_管理系統(tǒng)。 快來Star,在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    zhangrxiang 評論0 收藏0
  • 搜集React、Vue、Angular和傳統(tǒng)UI組件庫以及后臺管理平臺模板

    摘要:高顏值好用易擴(kuò)展的微信小程序庫,有贊。一套高質(zhì)量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現(xiàn)的后臺管理系統(tǒng)模板一個后臺管理系統(tǒng)模板是一套組件化框架,支持定制主題,主要服務(wù)于前臺及中后臺產(chǎn)品?;诤笈_管理系統(tǒng)。 快來Star,在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    source 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<