bootstrap的完整引入
創建好項目,初始化項目
檢查npm,vue,node,
cd到當前目錄,
npm install bootstrap --save --save-exact
// --save是做為依賴庫存到package.json中,后面的命令會精確版本號(就是版本前面沒有尖括號),在項目開發中還是很需要的,這步比較重要
main.js中進行引入
import ‘bootstrap/dist/css/bootstrap.min.css’
在app.vue中進行布局,然后寫大致樣式,對其按鈕進行測試,
看是否引入成功
運行項目
一定要是當前目錄才有效,並且第一次要npm install
引入bootstrap的css文件。如果你是要Vue-cli創建的項目,那么項目中應該已經包含了bootstrap(在node_modules文件夾中)。接下來只要在main.js中引入就可以了。
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import store from './store/store'
import 'bootstrap/dist/css/bootstrap.css'
在hbulider中安裝bootstrap是先要在命令層下載bootstrap(CSS和js)以及jQuery,引入三個文件
需要引入自定義css樣式的話在該組件的script 中進行引入
從githup下載完開源項目后的操作還有解決方案
1. 我是昨天晚上在辦公室用 vue-cli 初始化了一個項目,然后把項目上傳到我的 github 倉庫
2. 回到家用自己的電腦,從 github 上 clone 下來,之后 npm isntall npm run dev 能正常運行
3. 然后改了一些文件,增加了一些文件,能正常運行,然后又 push 進 github 倉庫了
4. 今天早上來到辦公室 把 github 倉庫內的項目 pull 到昨天的那個項目目錄里,之后 又 npm install,npm run dev,接着就報錯了,模塊沒有安裝 然后安裝,安裝完成之后,還是報錯新的模塊沒有安裝,就一直沒完沒了了
然后,我把 項目中 的 node_modules 目錄給刪除了,接着重新 npm install , npm run dev ,就正常運行了