目錄
準備工作
安裝並集成 Bootstrap 4
安裝並集成 Bulma
安裝並集成 Foundation
在 Vue中 的最佳做法
創建自己的樣式
注意組件的可重用性
不好的例子
好的例子
總結
❞
CSS 框架之所以出色是有很多原因的:比如代碼更容易理解、Web 應用更容易維護、簡化實現原型時的步驟等。一般來說在 VUE 中集成 CSS 框架的方法是相同的,本文以被廣泛使用的 Bootstrap 4 為例。
準備工作
在下載 CSS 框架之前,先用 Vue CLI 創建一個新項目:
<code>npm
install
project
-name
/<code>安裝並集成 Bootstrap 4
創建並初始化新的 Vue 項目後,用 npm 下載 Bootstrap 4。由於 Bootstrap 4 的 JavaScript 依賴於 jQuery,所以還需要安裝 jQuery。
<code>npm
install
bootstrap jquery /<code>你需要在自己的 Vue 的 main.js 文件中添加 Bootstrap 依賴項,這樣就可以在整個程序中全部使用。
<code>
import
'./../node_modules/jquery/dist/jquery.min.js'
;import
'./../node_modules/bootstrap/dist/css/bootstrap.min.css'
;import
'./../node_modules/bootstrap/dist/js/bootstrap.min.js'
; /<code>如果你的程序構建失敗,應該安裝 popper.js 依賴項。之後應該就不會報錯了。
<code>npm
install
/<code>這樣 Bootstrap 4 就被集成到 Vue 重了。
安裝並集成 Bulma
Bulma 一個是基於 Flexbox 的輕巧靈活的 CSS 框架。它在 GitHub 上的 star 已有超過了 25K。
與 Bootstrap 不同,Bulma 中僅包含 CSS,沒有 jQuery 或 JavaScript 的依賴項。
安裝 Bulma:
<code>
npm
install bulma /<code>在下載Bulma之後,打開你的 main.js 並將其導入。
<code>
import
'./../node_modules/bulma/css/bulma.css'
; /<code>這樣就把 Bulma 集成到你的 Vue.js 程序中了。
安裝並集成 Foundation
Foundation 是一個優秀的 CSS 框架。它有兩個框架:一個用於電子郵件,一個用於網站。我們需要的是 Foundation Sites 框架,因為我們只關心在 Web 中使用 Foundation。
安裝 Foundation Sites 並將其導入到你的 main.js 文件中:
<code>$ npm
install
foundation-sites /<code>將其導入到你的 main.js 文件中:
<code>
import
'./../node_modules/foundation-sites/dist/css/foundation.min.css'
;import
'./../node_modules/foundation-sites/dist/js/foundation.min.js'
; /<code>在 Vue中 的最佳做法
以上這三個框架非常類似:它們都基於行和列來創建“網格”的,你可以用它來創建用戶界面。通過網格,你只需添加或更改附加到元素的類,就能輕鬆地基於設備寬度更改列的寬度。
注意: 下面的例子用的是 Bootstrap4。但是這種基於行列框架的做法適用於所有的 CSS 框架。
最好儘可能使用框架的類。為了易於使用,這些框架中都經過精心的設計,可以進行擴展和自定義。與其使用自己的類創建自己的按鈕,不如用 Bootstrap、Bulma 或 Foundation 來做同樣的事。
<code>
<
button
class
="btn btn-primary btn-lg"
>Bootstrap 大按鈕button
><
button
class
="button is-primary is-large"
>Bulma 大按鈕button
> /<code>你可以配置每種顏色,以便 btn-primary (Bootstrap) 或 is-primary (Bulma) 引用你自己樣式的顏色,而不是用 Bootstrap 和 Bulma 附帶的默認顏色。
如果你需要使用自己的樣式來創建自己的主題,可以創建一個覆蓋框架全局樣式的全局樣式表;因為我們並不想直接修改框架。
創建自己的樣式
如果想要創建自己的 CSS 主題,需要先創建一個新的 CSS 文件,並將其放在 assets 目錄中,然後將其導入到 App.vue 文件中。
<code>
import
'@/assets/styles.css'
; ... /<code>試著將一些與你自己的樣式相匹配的默認樣式映射到 Bootstrap 組件:
<code>
.btn-primary
{background
:#00462e
;color
:#fff
; }.btn-secondary
{background
:#a1b11a
;color
:#fff
; }.btn-tertiary
{background
:#00b2e2
;color
:#fff
; }.btn-cta
{background
:#f7931d
;color
:#fff
.form-control
{border-radius
:2px
;border
:1px
solid#ccc
; }.form-control
:focus
,.form-control
:active
{outline
: none;box-shadow
: none;background
:#ccc
;border
:1px
solid#000
; } /<code>注意組件的可重用性
在 Vue.js 中使用 CSS 框架時,要務必牢記組件的可重用性。我們不能把佈局 CSS 和組件本身混合在一起使用。有時你可能只需要重用這個組件,而有時可能需要其他的佈局。
不好的例子
<code>
<
template
><
div
class
="row"
><
div
class
="col"
><
nav
><
ul
><
li
><
a
href
="#"
a
>li
><
li
><
a
href
="#"
>Navigation Item #2a
>li
><
li
><
a
href
="#"
>Navigation Item #3a
>li
>ul
>nav
>div
>div
>template
/> /<code><code>
<
template
><
div
> ...<
Navigation
/>div
>template
/> /<code>這個組件可能會同時用在頁眉和頁腳中,兩者看起來應該不一樣,但是會包含相同的信息。讓我們刪除佈局 HTML,然後將其移至其父級或基礎組件。
好的例子
<code>
<
template
><
nav
><
ul
><
li
><
a
href
="#"
>Navigation Item #1a
>li
><
li
><
a
href
="#"
>Navigation Item #2a
>li
><
li
><
a
href
="#"
>Navigation Item #3a
>li
>ul
>nav
>template
/> /<code><code>
<
template
> ...<
div
class
="row"
><
div
class
="col"
><
Navigation
/>div
>div
>template
/> /<code><code>
<
template
> ...<
div
class
="row"
><
div
class
="col"
><
Navigation
/>div
>div
>template
/> /<code>總結
CSS 框架使我們的開發工作更加輕鬆。它們使你的模板代碼保持一致並易於維護和編寫。你可以專注於程序的功能和整體設計,而不是把時間浪費在常見的任務中,例如從頭創建按鈕。
Bootstrap,Bulma 和 Foundation 只是常用的三個框架,但是不限於這些。還有許多框架供你探索,比如 Semantic UI 和 UI Kit 等。