国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue CLI3.0 中使用jQuery 和 Bootstrap

luqiuwen / 2848人閱讀

摘要：中使用和不是特別符合原生的寫法，但是有時候又要用，所以放上我的引入設(shè)置，供大家參考。其中用于在中顯示彈窗提示下拉菜單，所以需要引入。因為我的文件經(jīng)過了我自己的調(diào)整，所以多帶帶放在文件夾中做多帶帶引入。

Vue 中使用 jQuery 和 Bootstrap 不是特別符合 Vue 原生的寫法，但是有時候又要用，所以放上我的引入設(shè)置，供大家參考。

在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要設(shè)置很多配置項，網(wǎng)上有很多方法法，這里不重復(fù)寫了。直接上 Vue CLI3.0 配置步驟。

第一步：安裝 jQuery、 Bootstrap、popper.js依賴。

其中popper.js 用于在 Bootstrap 中顯示彈窗、提示、下拉菜單，所以需要引入。

npm install jquery bootstrap@3 popper.js --save

注意：上面的 bootstrap@3 指的是安裝 Bootstrap 第三版，如果不加 @3 符號，默認(rèn)安裝第四版。

第二步：配置 main.js

引入 Boostrap 請看配置文件。

//main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//在這里引入 bootstrap。默認(rèn)只引入 bootstrap 中的 js，css 需要另外引入，我的 bootstrap.ss 在APP.vue中引入的
import "bootstrap";
//也可以在這里引入 bootstrap.css ;
//import "bootstrap/dist/css/bootstrap.css";

Vue.config.productionTip = false;

new Vue({
  router: router,
  store: store,
  render: h => h(App)
}).$mount("#app");

我的 APP.vue 的配置，只是引入 bootstrap.css，代碼僅供參考。

第三步：配置 vue.config.js 文件

Vue CLI3.0 中的所有配置都在 vue.config.js 文件，你在這里配置好，腳手架自動使用你的配置覆蓋掉默認(rèn)的配置。
如果你的項目中沒有 vue.config.js 文件，請你在 package.json 文件的同級目錄新建一個 vue.config.js 文件。文件內(nèi)具體的配置如下：

const webpack = require("webpack");

module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件參數(shù)的地方，你在這里設(shè)置，會新建或者覆蓋 webpack 默認(rèn)配置。
//webpack ProvidePlugin 的含義是創(chuàng)建一個全局的變量，使這個變量在 webpack 各個模塊內(nèi)都可以使用。這里的配置含義是創(chuàng)建 "$"、"jQuery"、"window.jQuery" 三個變量指向 jquery 依賴，創(chuàng)建 "Popper" 變量指向 popper.js 依賴。
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
              })
        ]
      }
}
第四步：具體使用范例

我做了一個 tooltip 的示例，鼠標(biāo)放上去會出現(xiàn) tooltip 提示

//template

如果 eslint 報誤，請設(shè)置 .eslintrc.js 文件。

module.exports = {
  env: {
    node: true,
    jquery: true
  }
};

本人測試結(jié)果如下：

歡迎大家批評指正。
參考文檔：
Vue CLI3.0: https://cli.vuejs.org/zh/guid...
Bootstrap tooltip ：https://v3.bootcss.com/javasc...
Stackoverflow: https://stackoverflow.com/que...

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102191.html

相關(guān)文章

  • mac Os下全局安裝vue cli3.0出現(xiàn)的報錯解決方案

    摘要：直接全局安裝是會出現(xiàn)錯誤錯誤如下這種錯誤提示是你沒有權(quán)限將安裝文件直接寫入一個權(quán)限控制文件里。 直接 npm install -g @vue/cli全局安裝是會出現(xiàn)錯誤 錯誤如下: Last login: Tue Oct 30 23:43:58 on ttys000 asusdeMac:~ asus$ npm install -g @vue/cli npm WARN deprecate...

    AlphaWatch 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

發(fā)表評論

0條評論

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