一. 安裝vuetify
1. vue插件式安裝
首先我們使用vue_cli創(chuàng)建一個(gè)新的vue項(xiàng)目, 進(jìn)入項(xiàng)目, 然后:
vue add vuetify
他會(huì)問一個(gè)git問題, 直接選y
他會(huì)問版本問題, 我們直接選default
vuetify就這么裝好了
2. 項(xiàng)目目錄文件變化
變化1:
我們發(fā)現(xiàn)相比vue-cli默認(rèn)構(gòu)建的項(xiàng)目, 多了一個(gè)plugins/vuetify.js
變化2:
App.Vue中多了一個(gè)APP, 這是vuetify的根組件
變化3:
還重寫了一些helloworld組件??????
二. 屬性化思想
vuetify中很多設(shè)置是通過(guò)給標(biāo)簽添加特定屬性來(lái)實(shí)現(xiàn)的
三. 顏色
在某些控件中, 我們?cè)赾lass中添加對(duì)應(yīng)的代碼就可以控制顏色, 是直接在class中按照colors的要求直接寫就可以哦 https://vuetifyjs.com/zh-Hans/styles/colors/
<p class="pink">這是一個(gè)p</p>
<p class="pink white--text">這是一個(gè)p</p>
<p class="pink lighten-4 white--text">這是一個(gè)p</p>
<p class="pink dark-6 white--text">這是一個(gè)p</p>
<p class="pink lighten-4 blue--text text--darken-3">這是一個(gè)p</p>
2. 標(biāo)準(zhǔn)主題中的顏色
primary: '#1976D2',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107',
<p class="primary">這是一個(gè)p(primary)</p>
<p class="secondary white--text">這是一個(gè)p(secondary)</p>
<p class="accent">這是一個(gè)p(accent)</p>
<p class="error">這是一個(gè)p(error)</p>
<p class="info">這是一個(gè)p(info)</p>
<p class="success">這是一個(gè)p(success)</p>
<p class="warning">這是一個(gè)p(warning)</p>
四. 字體
同樣的,在某些控件中, 我們?cè)赾lass中添加對(duì)應(yīng)的代碼就可以控制字體
https://vuetifyjs.com/zh-Hans/styles/text-and-typography/
1. 字體大小
我們可以用 text-value 實(shí)現(xiàn)響應(yīng)式字體
- value可選值: h1,h2,h3,h4,h5,h6,subtitle-1,subtitle-2,body-1,body-2,button,caption,overline
<p class="display-4 lime">這是一個(gè)p(display-4)</p>
<p class="display-3 lime">這是一個(gè)p(display-3)</p>
<p class="display-2 lime">這是一個(gè)p(display-2)</p>
<p class="display-1 lime">這是一個(gè)p(display-1)</p>
<p class="text-h1 lime">這是一個(gè)p(h1)</p>
<p class="text-h2 lime">這是一個(gè)p(h2)</p>
<p class="text-h3 lime">這是一個(gè)p(h3)</p>
<p class="text-h4 lime">這是一個(gè)p(h4)</p>
<p class="text-h5 lime">這是一個(gè)p(h5)</p>
<p class="text-h6 lime">這是一個(gè)p(h6)</p>
<p class="text-subtitle-1 lime">這是一個(gè)p(subtitle-1)</p>
<p class="text-subtitle-2 lime">這是一個(gè)p(subtitle-2)</p>
<p class="text-body-1 lime">這是一個(gè)p(body-1)</p>
<p class="text-body-2 lime">這是一個(gè)p(body-2)</p>
<p class="text-button lime">這是一個(gè)p(button)</p>
<p class="text-caption lime">這是一個(gè)p(caption )</p>
<p class="text-overline lime">這是一個(gè)p(overline)</p>
2. 自適應(yīng)字體大小
vuetify的自適應(yīng)布局類似bootstrap, 擁有如下布局方式
我們可以用 .text-breakpoint-value 實(shí)現(xiàn)響應(yīng)式字體
- breakpoint可選值: xs, sm, md, lg 和 xl
- value可選值: h1,h2,h3,h4,h5,h6,subtitle-1,subtitle-2,body-1,body-2,button,caption,overline
<p class="text-xs-h6 text-sm-h5 text-md-h4 text-lg-h3 text-xl-h2 lime">這是一個(gè)p(響應(yīng)式顯示)</p>
3. 字體粗細(xì)
我們可以用 font-weight-value 實(shí)現(xiàn)粗細(xì)字體
- value可選值:black , bold , medium , regular , light , thin
<p class="font-weight-black lime">這是一個(gè)p(h加黑加粗體)</p>
<p class="font-weight-bold lime">這是一個(gè)p(粗)</p>
<p class="font-weight-medium lime">這是一個(gè)p(中粗)</p>
<p class="font-weight-regular lime">這是一個(gè)p(常規(guī))</p>
<p class="font-weight-light lime">這是一個(gè)p(細(xì))</p>
<p class="font-weight-thin lime">這是一個(gè)p(極細(xì))</p>
4. 字體斜體
我們可以用font-italic 實(shí)現(xiàn)斜體字體
<p class="font-italic lime">這是一個(gè)p(斜體)</p>
5. 文本對(duì)齊
我們可以用text-value 實(shí)現(xiàn)文本對(duì)齊
- value可選值: left, center, right
<p class="text-left lime">這是一個(gè)p(左對(duì)齊)</p>
<p class="text-right lime">這是一個(gè)p(居中)</p>
<p class="text-center lime">這是一個(gè)p(右對(duì)齊)</p>
6. 響應(yīng)式文本對(duì)齊
我們可以用text-breakpoint-value 實(shí)現(xiàn)響應(yīng)式文本對(duì)齊
- breakpoint可選值: xs, sm, md, lg 和 xl
- value可選值: left, center, right
<p class="text-xs-left text-sm-center text-md-right text-lg-left text-xl-center lime">這是一個(gè)p(響應(yīng)式對(duì)齊)</p>
7. 裝飾線
<p class="text-decoration-none">這是一個(gè)p(無(wú)裝飾)</p>
<p class="text-decoration-line-through">這是一個(gè)p(刪除線)</p>
<p class="text-decoration-overline">這是一個(gè)p(上劃線)</p>
<p class="text-decoration-underline">這是一個(gè)p(下劃線)</p>
8. 透明度
<p class="text--primary">這是一個(gè)p(透明度100%)</p>
<p class="text--secondary">這是一個(gè)p(透明度60%)</p>
<p class="text--disabled">這是一個(gè)p(透明度38%)</p>
9. 大小寫轉(zhuǎn)化
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
10. 文本換行和溢出
(1).文本溢出
<div class="text-no-wrap red" style="width: 8rem">
這個(gè)文本不會(huì)換行, 會(huì)超出它所在div的寬度
</div>
<div class="light-blue" style="width: 8rem">
這個(gè)文本會(huì)換行, 不會(huì)會(huì)超出它所在div的寬度
</div>
<div class="text-truncate yellow" style="width: 8rem">
這個(gè)文本會(huì)縮略, 不會(huì)會(huì)超出它所在div的寬度
</div>
11. 文本對(duì)齊
可以通過(guò)以下格式的文本對(duì)齊輔助類實(shí)現(xiàn): text-{breakpoint}-{direction},
- breakpoint 可以是 sm, md, lg 或 xl,
- direction 可以是 left 或 right, center
<div class="text-center" style="width: 15rem">
<p class="text-left">左對(duì)齊</p>
<p class="text-center">居中對(duì)齊</p>
<p class="text-right">右對(duì)齊</p>
<p class="text-md-left">左對(duì)齊</p>
<p class="text-md-center">居中對(duì)齊</p>
<p class="text-md-right">右對(duì)齊</p>
<p>不對(duì)齊,繼承父對(duì)齊</p>
</div>
