一. 安装vuetify
1. vue插件式安装
首先我们使用vue_cli创建一个新的vue项目, 进入项目, 然后:
vue add vuetify
他会问一个git问题, 直接选y
他会问版本问题, 我们直接选default
vuetify就这么装好了
2. 项目目录文件变化
变化1:
我们发现相比vue-cli默认构建的项目, 多了一个plugins/vuetify.js
变化2:
App.Vue中多了一个APP, 这是vuetify的根组件
变化3:
还重写了一些helloworld组件😂😂😂
二. 属性化思想
vuetify中很多设置是通过给标签添加特定属性来实现的
三. 颜色
在某些控件中, 我们在class中添加对应的代码就可以控制颜色, 是直接在class中按照colors的要求直接写就可以哦 https://vuetifyjs.com/zh-Hans/styles/colors/
<p class="pink">这是一个p</p>
<p class="pink white--text">这是一个p</p>
<p class="pink lighten-4 white--text">这是一个p</p>
<p class="pink dark-6 white--text">这是一个p</p>
<p class="pink lighten-4 blue--text text--darken-3">这是一个p</p>
2. 标准主题中的颜色
primary: '#1976D2',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107',
<p class="primary">这是一个p(primary)</p>
<p class="secondary white--text">这是一个p(secondary)</p>
<p class="accent">这是一个p(accent)</p>
<p class="error">这是一个p(error)</p>
<p class="info">这是一个p(info)</p>
<p class="success">这是一个p(success)</p>
<p class="warning">这是一个p(warning)</p>
四. 字体
同样的,在某些控件中, 我们在class中添加对应的代码就可以控制字体
https://vuetifyjs.com/zh-Hans/styles/text-and-typography/
1. 字体大小
我们可以用 text-value 实现响应式字体
- value可选值: h1,h2,h3,h4,h5,h6,subtitle-1,subtitle-2,body-1,body-2,button,caption,overline
<p class="display-4 lime">这是一个p(display-4)</p>
<p class="display-3 lime">这是一个p(display-3)</p>
<p class="display-2 lime">这是一个p(display-2)</p>
<p class="display-1 lime">这是一个p(display-1)</p>
<p class="text-h1 lime">这是一个p(h1)</p>
<p class="text-h2 lime">这是一个p(h2)</p>
<p class="text-h3 lime">这是一个p(h3)</p>
<p class="text-h4 lime">这是一个p(h4)</p>
<p class="text-h5 lime">这是一个p(h5)</p>
<p class="text-h6 lime">这是一个p(h6)</p>
<p class="text-subtitle-1 lime">这是一个p(subtitle-1)</p>
<p class="text-subtitle-2 lime">这是一个p(subtitle-2)</p>
<p class="text-body-1 lime">这是一个p(body-1)</p>
<p class="text-body-2 lime">这是一个p(body-2)</p>
<p class="text-button lime">这是一个p(button)</p>
<p class="text-caption lime">这是一个p(caption )</p>
<p class="text-overline lime">这是一个p(overline)</p>
2. 自适应字体大小
vuetify的自适应布局类似bootstrap, 拥有如下布局方式
我们可以用 .text-breakpoint-value 实现响应式字体
- 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">这是一个p(响应式显示)</p>
3. 字体粗细
我们可以用 font-weight-value 实现粗细字体
- value可选值:black , bold , medium , regular , light , thin
<p class="font-weight-black lime">这是一个p(h加黑加粗体)</p>
<p class="font-weight-bold lime">这是一个p(粗)</p>
<p class="font-weight-medium lime">这是一个p(中粗)</p>
<p class="font-weight-regular lime">这是一个p(常规)</p>
<p class="font-weight-light lime">这是一个p(细)</p>
<p class="font-weight-thin lime">这是一个p(极细)</p>
4. 字体斜体
我们可以用font-italic 实现斜体字体
<p class="font-italic lime">这是一个p(斜体)</p>
5. 文本对齐
我们可以用text-value 实现文本对齐
- value可选值: left, center, right
<p class="text-left lime">这是一个p(左对齐)</p>
<p class="text-right lime">这是一个p(居中)</p>
<p class="text-center lime">这是一个p(右对齐)</p>
6. 响应式文本对齐
我们可以用text-breakpoint-value 实现响应式文本对齐
- 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">这是一个p(响应式对齐)</p>
7. 装饰线
<p class="text-decoration-none">这是一个p(无装饰)</p>
<p class="text-decoration-line-through">这是一个p(删除线)</p>
<p class="text-decoration-overline">这是一个p(上划线)</p>
<p class="text-decoration-underline">这是一个p(下划线)</p>
8. 透明度
<p class="text--primary">这是一个p(透明度100%)</p>
<p class="text--secondary">这是一个p(透明度60%)</p>
<p class="text--disabled">这是一个p(透明度38%)</p>
9. 大小写转化
<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">
这个文本不会换行, 会超出它所在div的宽度
</div>
<div class="light-blue" style="width: 8rem">
这个文本会换行, 不会会超出它所在div的宽度
</div>
<div class="text-truncate yellow" style="width: 8rem">
这个文本会缩略, 不会会超出它所在div的宽度
</div>
11. 文本对齐
可以通过以下格式的文本对齐辅助类实现: text-{breakpoint}-{direction},
- breakpoint 可以是 sm, md, lg 或 xl,
- direction 可以是 left 或 right, center
<div class="text-center" style="width: 15rem">
<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-md-left">左对齐</p>
<p class="text-md-center">居中对齐</p>
<p class="text-md-right">右对齐</p>
<p>不对齐,继承父对齐</p>
</div>
