在Vue專案中使用npm安裝bootstrap以及jquery
經過我好多次的查詢和實驗,總結了一下在vue專案中使用bootstrap框架,npm安裝注意.
bootstrap中js外掛依賴於jquery,所以在這之前必須安裝jquery。
jquery安裝
1、在package.json中新增一行程式碼:“jquery”: “^2.2.3”"dependencies": {
"element-ui": "^2.0.5",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"jquery": "^2.2.3"
}
- 1
- 2
- 3
- 4
- 5
- 6
2、在build檔案webpack.base.conf.js中新增一行資料:
//注:...代表省略自有的,
//必定事先宣告webpack,不然下面會不識別webpack
const webpack = require('webpack')
...
module.exports = {
resolve: {
...
alias: {
...
'jquery': 'jquery'
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
],
...
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
3、在main.js中加入:import $ from ‘jquery’
4、使用npm install jquery@2.2.3 –save-dev
這樣jquery就安裝完成了。
bootstrap安裝:
1、使用npm install bootstrap@3.3.0 –save-dev
2、在需要的頁面引入
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
- 1
- 2
popper 安裝
在高版本中,還需要popper 依賴,所以還需要下載 popper
cnpm i popper
最後npm run dev啟動專案,就ok啦。
相關文章
- vue踩坑記-在專案中安裝依賴模組npm install報錯VueNPM
- 在vue下引入jquery bootstrapVuejQueryboot
- 在 vue-cli 腳手架中引用 jQuery、bootstrap 以及使用 sass、less 編寫 css [vue-cli配置入門]VuejQuerybootCSS
- vue.js 使用NPM建立專案Vue.jsNPM
- vue3專案中安裝lessVue
- 在vue專案中jsPlumb製作流程圖,拖拽複製使用 jquery 和 jquery UIVueJS流程圖jQueryUI
- vue專案安裝lessVue
- 在React專案中安裝並使用Less(用法總結)React
- 在vue專案中優雅的使用SvgVueSVG
- bing Map 在vue專案中的使用Vue
- jQuery UI Bootstrap:在jQuery UI上整合BootstrapjQueryUIboot
- vue專案引入jqueryVuejQuery
- 在vue專案中使用elementUIVueUI
- 安裝npm 解除安裝npm 安裝apidocNPMAPI
- 使用webpack建立vue專案,安裝vue-router和不安裝vue-router的區別WebVue
- 在vue專案中mock資料VueMock
- vue專案打包:npm run build 程式卡死VueNPMUI
- 在vue專案中使用骨架屏Vue
- vue 專案 webpack 中 NPM 傳遞引數配置不同域名介面VueWebNPM
- Ruby on rails專案中 引入BootstrapAIboot
- Angular專案中如何引入 bootstrapAngularboot
- npm安裝NPM
- 在 Laradock 中開發 Vue 專案Vue
- vue專案部署(npm run build二級域名)VueNPMUI
- 在vue-cli專案中使用echartsVueEcharts
- CentOS 安裝 laradock 以及執行 Laravel 專案CentOSLaravel
- vue(16)vue-cli建立專案以及專案結構解析Vue
- 在Vue專案中使用Echarts(三): Echarts中的其他常用圖VueEcharts
- 使用淘寶NPM映象快速安裝CordovaNPM
- nvm和npm的安裝與使用NPM
- 安裝使用VUEVue
- CentOSmysql安裝以及使用CentOSMySql
- 像 npm 一樣在 Andriod 專案中引入 Gradle 依賴NPMGradle
- vue專案中前端判斷使用者登入狀態以及驗權Vue前端
- vue-ssr在專案中的實踐Vue
- 如何在專案中用 Vue 取代 jQueryVuejQuery
- vue入門(安裝環境與搭建專案)Vue
- 在Vue專案中使用snapshot測試Vue