vue-cli+webpack在產生的項目中使用bootstrap

標籤：效果   assets   uil   icon   logs   out   jquer   app   amp   

在也個html頁面中加入bootstrap是很方便，就是一般的將css和js檔案通過Link和Script標籤就行。

那麼在一個用vue-vli產生的前端項目中如何加入？因為架構不一樣了，略微要適應一下。

 

腳手架產生項目

執行命令用webpack模板產生一個名為vuestrap的項目（名字任意）

vue init webpack vuestrap

 

在出現的各提示選項中，沒什麼要求，為了方便，把不用的ESLint，unit tests，e2e都關掉（這些選項都隨意）。

? Project name vuestrap? Project description A Vue.js project? Author 省略? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? No? Setup unit tests with Karma + Mocha? No? Setup e2e tests with Nightwatch? No

選項選完，項目也就產生了。

 

執行命令，安裝腳手架建立的組件

npm install

 

安裝jquery

bootstrap是依賴jquery的，所以就先裝上jquery，這裡用的版本是1.11.3。

稍後在配置的時候，是以webpack外掛程式的方式進行打包，所以這裡直接用npm進行安裝，因為外掛程式方式打包的組件都是require進來的。

執行命令，並儲存到package.json中

npm install [email protected] --save-dev

註：如果想查看npm上jquery有哪些版本，可以執行命令：

npm view jquery versions

 

下載和安置bootstrap所需的檔案 

下載bootstrap包，這裡用的版本是3.3.0。

下載下來後將fonts，js，css檔案夾分別放到項目目錄/src/assets下。

 

配置jquery 

將jquery以外掛程式打包，需要為webpack的plugins進行外掛程式設定。

在build/webpack.base.conf.js檔案中，在整個設定物件的末尾增加plugins配置。

在webpack.base.conf.js中的配置項，可以在dev和build出來的pro版本中都有效。

下面的配置其實就是變數名的真正指向設定，這樣，在頁面中對jquery的各種名字的調用就會有效，否則bootstrap跑不起來。

  plugins: [    new webpack.ProvidePlugin({      $: "jquery",      jQuery: "jquery",      "windows.jQuery": "jquery"    })  ]

 

引用bootstrap 

在src/main.js檔案的頂部加入如下對bootstrap主要檔案的引用。

import ‘./assets/css/bootstrap.min.css‘import ‘./assets/js/bootstrap.min‘

做完這個，也就配完了。

接下去試試看能不能用，就寫個簡單的頁面。

 

驗證頁面

就在App.vue中寫一個頁面，放一個panel，button，modal。

<template>  <div id="app">    <div class=‘container‘>      <div class=‘row‘>        <div class=‘col-lg-4‘>          <h1>demo</h1>        </div>        <div class=‘col-lg-8‘>          <div class=‘panel panel-default‘ style=‘min-width:500px;box-shadow:4px 4px 10px #888888;‘>            <div class="panel-heading">              <button id=‘btnCreate‘>                <span class="glyphicon glyphicon-plus"></span>              </button>              <span>&nbsp;&nbsp;&nbsp;</span>            </div>            <div class="panel-body">              <div style=‘float: left;width:100%‘>                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">                  Launch demo modal                </button>                <!-- Modal -->                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">                  <div class="modal-dialog" role="document">                    <div class="modal-content">                      <div class="modal-header">                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>                      </div>                      <div class="modal-body">                        ...                      </div>                      <div class="modal-footer">                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                        <button type="button" class="btn btn-primary">Save changes</button>                      </div>                    </div>                  </div>                </div>              </div>            </div>          </div>        </div>      </div>    </div>  </div></template><script>export default {  name: ‘app‘}</script><style>#app {  margin-top: 60px;}</style>

寫完後，執行命令，運行效果。

npm run dev

效果：

點擊按鈕，可以開啟modal。

 

 

代碼

 

End

vue-cli+webpack在產生的項目中使用bootstrap