{"id":16775882,"url":"https://github.com/pjchender/vue-import-bootstrap4","last_synced_at":"2025-10-26T07:38:50.943Z","repository":{"id":21838627,"uuid":"94184516","full_name":"pjchender/vue-import-bootstrap4","owner":"pjchender","description":"This repository show how to import Bootstrap into Vue","archived":false,"fork":false,"pushed_at":"2023-01-04T21:58:52.000Z","size":3801,"stargazers_count":6,"open_issues_count":28,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-13T23:55:08.996Z","etag":null,"topics":["bootstrap","jquery","vue"],"latest_commit_sha":null,"homepage":"https://pjchender.blogspot.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pjchender.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-13T07:37:57.000Z","updated_at":"2024-04-13T23:55:08.997Z","dependencies_parsed_at":"2023-01-11T21:22:28.845Z","dependency_job_id":null,"html_url":"https://github.com/pjchender/vue-import-bootstrap4","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjchender%2Fvue-import-bootstrap4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjchender%2Fvue-import-bootstrap4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjchender%2Fvue-import-bootstrap4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjchender%2Fvue-import-bootstrap4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pjchender","download_url":"https://codeload.github.com/pjchender/vue-import-bootstrap4/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221820672,"owners_count":16886222,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","jquery","vue"],"created_at":"2024-10-13T07:07:59.500Z","updated_at":"2025-10-26T07:38:45.888Z","avatar_url":"https://github.com/pjchender.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Vue] 在 Vue 中使用（ES6 import）Bootstrap 4 和 jQuery\n\n\u003e 同步刊登於 [PJCHENder 那些沒告訴你的小細節](https://pjchender.blogspot.com/2017/06/vue-vue-es6-import-bootstrap-4-jquery.html)\n\n由於 bootstrap4 需要依賴 jquery 和 tether 這兩個套件，因此在 webpack 的環境底下使用 bootstrap4 有一些需要留意的細節才能正常載入使用。\n\n\u003e ⚠️ 這裡使用 [@vue/cli](https://cli.vuejs.org/zh/) 版本為 **4.0.5**，不同版本的設定方式可能略有不同，須特別留意。\n\n## 使用 Vue CLI 安裝 vue\n\n```sh\n# 安裝 Vue CLI，目前版本為 4.0.5\n$ npm install -g @vue/cli\n\n# 使用 Vue CLI 建立專案\n$ vue create vue-sandbox\n```\n\n![vue-cli](https://i.imgur.com/RMg3TEd.gif)\n\n## 安裝 Bootstrap\n\n```sh\n# 安裝 Bootstrap，目前版本為 4.3.1\n$ npm i bootstrap\n```\n\n![Imgur](https://i.imgur.com/zDqMalb.png)\n\n## 載入 Bootstrap CSS 檔\n\n可以直接在 `main.js` 中引入 bootstrap 的 css 檔：\n\n```javascript\n// ./src/main.js\nimport 'bootstrap/dist/css/bootstrap.css'\n```\n\n![Imgur](https://i.imgur.com/bKPGMhM.png)\n\n## 試試看：使用 Bootstrap 的 Alert 元件\n\n現在，先來試試看是否有成功載入 Bootstrap 的樣式。打開 `./src/components/HelloWorld.vue`，在裡面放入 Bootstrap 中的 [alerts](https://getbootstrap.com/docs/4.3/components/alerts/) 元件，像這樣：\n\n```html\n\u003c!-- ./src/components/HelloWorld.vue --\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"hello\"\u003e\n    \u003ch1\u003e{{ msg }}\u003c/h1\u003e\n\n    \u003c!-- 開始：Bootstrap alert --\u003e\n    \u003cdiv class=\"container\"\u003e\n      \u003cdiv class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\"\u003e\n        \u003cstrong\u003eHoly guacamole!\u003c/strong\u003e You should check in on some of those fields below.\n        \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"\u003e\n          \u003cspan aria-hidden=\"true\"\u003e\u0026times;\u003c/span\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\u003c!-- 結束：Bootstrap alert --\u003e\n\n    \u003cp\u003e\n      For a guide and recipes on how to configure / customize this project,\u003cbr\u003e\n      check out the\n      \u003ca href=\"https://cli.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003evue-cli documentation\u003c/a\u003e.\n    \u003c/p\u003e\n\n    \u003c!-- ... --\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n使用 `npm run serve` 就可以把專案執行起來。沒有問題的話，畫面應該會像這樣子，可以看到中間已經套用了 Bootstrap 的 Alert 樣式：\n\n![Imgur](https://i.imgur.com/Xm1Jqip.png)\n\n但此時若點擊 Alert 組件的關閉按鈕時，該警告並不會消失。這是因為我們還沒載入和 Bootstrap 有關的 JavaScript 檔案。\n\n## 安裝和 Bootstrap 有關的 JavaScript 檔\n\n如果你只是要載入 Bootstrap 的樣式檔，基本上到上面那步就可以了。\n\n但是如果你有需要使用到 bootstrap 的其他互動功能，那麼就需要在額外載入 jQuery, Popper.js 和 Bootstrap 的 js 檔。\n\n因此，讓我們一併安裝 jQuery 和 Popper,js：\n\n```bash\n$ npm install --save jquery popper.js\n```\n\n## 載入 Bootstrap 的 JavaScript 檔\n\n要使用 Bootstrap 的 JS 檔，一樣直接在 `./src/main.js` 中載入 `bootstrap` 就可以了：\n\n```javascript\n// ./src/main.js\nimport Vue from 'vue'\nimport App from './App.vue'\nimport 'bootstrap/dist/css/bootstrap.css'\nimport 'bootstrap'      // 在這裡載入 Bootstrap 的 JavaScript 檔\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app')\n```\n\n此時當我們點擊 Alert 組件的關閉按鈕時，該警告就會消失：\n\n![Imgur](https://i.imgur.com/upLBbUM.png)\n\n## 載入 jQuery 使用\n\n在上面的例子中，只要載入 Bootstrap 的 JavaScript 檔案後，它會自動去找到相依的 jQuery 套件，因此並不需要額外載入 jQuery 就可以使用。\n\n但有些時候，Bootstrap 的有些互動行為是需要先透過 jQuery 來初始化的，例如 [Tooltip 組件](https://getbootstrap.com/docs/4.3/components/tooltips/)。Tooltip 組件在使用前需要針對想要產生 Tooltip 的元素使用 jQuery 來初始化它：\n\n```js\n$(function () {\n  $('[data-toggle=\"tooltip\"]').tooltip()\n})\n```\n\n這時候我們就會需要使用到 jQuery 提供的 `$`。要怎麼在 Vue 專案中取用到 jQuery 的 `$` 呢？這時候我們會需要對 Vue 或者說是 Webpack 進行一些設定。\n\n### 透過 vue.config.js 設定 webpack\n\n在 Vue 專案中要進行 webpack 的設定，需要在根目錄中新增一支名為 `vue.config.js` 的檔案（放在和 `package.json` 同一層）：\n\n```js\n// 新增一隻名為 vue.config.js 的檔案在專案的根目錄\n\nconst webpack = require('webpack');\n\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      new webpack.ProvidePlugin({\n        $: 'jquery',\n        jQuery: 'jquery',\n        'windows.jQuery': 'jquery',\n      }),\n    ],\n  },\n};\n```\n\n設定好了之後，在 Vue 專案中，就可以在需要使用 jQuery 的地方匯入 `$` 就可以了：\n\n```js\nimport $ from 'jquery';\n```\n\n## 試試看：使用 Bootstrap 的 Tooltip 元件\n\n現在讓我們用 Bootstrap Tooltip 元件來測試一下。先在 `./src/components/HelloWord.vue` 中加入 Bootstrap 的 [Tooltip](https://getbootstrap.com/docs/4.3/components/tooltips/) 元件：\n\n```html\n\u003c!-- ./src/components/HelloWorld.vue --\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"hello\"\u003e\n    \u003ch1\u003e{{ msg }}\u003c/h1\u003e\n\n    \u003cdiv class=\"container\"\u003e\n      \u003c!-- Bootstrap Alert --\u003e\n      \u003cdiv class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\"\u003e\n        \u003cstrong\u003eHoly guacamole!\u003c/strong\u003e You should check in on some of those fields below.\n        \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"\u003e\n          \u003cspan aria-hidden=\"true\"\u003e\u0026times;\u003c/span\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e \u003c!-- /Bootstrap Alert --\u003e\n\n      \u003c!-- Bootstrap Tooltip --\u003e\n      \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Tooltip on top\"\u003e\n        Tooltip on top\n      \u003c/button\u003e \u003c!-- /Bootstrap Tooltip --\u003e\n    \u003c/div\u003e\n\n    \u003cp\u003e\n      For a guide and recipes on how to configure / customize this project,\u003cbr\u003e\n      check out the\n      \u003ca href=\"https://cli.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003evue-cli documentation\u003c/a\u003e.\n    \u003c/p\u003e\n\n    \u003c!-- ... --\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n這時候畫面會像這樣，但實際上滑鼠移過去並不會有任何效果：\n\n![Imgur](https://i.imgur.com/HcX7u3q.png)\n\n要達到滑鼠移過去有效果的話，需要載入 jQuery 並初始化它。因此我們可以在 `./src/components/HelloWorld.vue` 的 `\u003cscript\u003e\u003c/script\u003e` 內去載入 `jQuery` 並組件 mounted 之後初始化它，像是這樣：\n\n```html\n\u003c!-- ./src/components/HelloWorld.vue --\u003e\n\u003ctemplate\u003e\n  \u003c!-- ... --\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport $ from \"jquery\";    // STEP 1：載入 jQuery\nexport default {\n  name: \"HelloWorld\",\n  props: {\n    msg: String\n  },\n  mounted() {\n    // STEP 2：在 mounted 時初始化 tooltip\n    $(function() {\n      $('[data-toggle=\"tooltip\"]').tooltip();\n    });\n  }\n};\n\u003c/script\u003e\n```\n\n完成後，當滑鼠移過去時，就會出現 Tooltip 的提示文字：\n\n![Imgur](https://i.imgur.com/qmzh9nY.gif)\n\n如此就可以繼續開心的使用 Bootstrap 啦！\n\n## 完整程式碼\n\n完整程式碼可在 [vue-import-bootstrap4](https://github.com/PJCHENder/vue-import-bootstrap4) @ github 檢視。\n\n## 額外補充（將 jQuery 載入到全域環境）\n\n如果我們只是使用 `import 'jquery'` 這種作法，是無法在全域環境（window）下使用 jQuery（這裡抓到的 `$` 是 chrome 中內建的選擇器）：\n\n![img](https://4.bp.blogspot.com/-BL992jd3N-g/WT-PwuHYo4I/AAAAAAAAzvs/EMldHYQ6-QYtl-4bs-9Bwu6Tuk-17CJQACLcB/s1600/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7%2B2017-06-13%2B%25E4%25B8%258B%25E5%258D%25883.09.38.png)\n\n因此如果我們希望在全域環境下也可以使用 jQuery，我們可以使用下面這樣的寫法：\n\n```javascript\n// ./src/main.js\nimport Vue from 'vue'\nimport App from './App.vue'\nimport 'bootstrap/dist/css/bootstrap.css'\nimport 'bootstrap'\n\n// 讓瀏覽器的全域環境可以使用到 $\nimport jQuery from 'jquery'\nwindow.$ = window.jQuery = jQuery\n```\n\n![img](https://4.bp.blogspot.com/-jYIQ1m2MKLs/WT-QqtSDt8I/AAAAAAAAzv0/-_1brQowmUsiN37vjICrQjXhRSNzJYpBACLcB/s1600/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7%2B2017-06-13%2B%25E4%25B8%258B%25E5%258D%25883.13.31.png)\n\n## 參考資料\n\n- [vue-cli 3.0配置jquery](https://juejin.im/post/5cc802ff6fb9a0321b697739) @ 掘金\n- [Using Jquery and Bootstrap with Es6 Import for React App](https://stackoverflow.com/a/40558659/5135452) @ StackOverflow\n- [How to import jquery using ES6 syntax?](https://stackoverflow.com/a/42175610/5135452) @ stackOverflow\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpjchender%2Fvue-import-bootstrap4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpjchender%2Fvue-import-bootstrap4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpjchender%2Fvue-import-bootstrap4/lists"}