Vuetify学习笔记(壹)：Vuetify的安装、字体颜色及样式、按钮和图标、不同尺寸设备的适配


一、介绍

Vuetify是什么

Vuetify是Vue.js的头号组件库
其通过一致的更新周期 对以前版本的长期支持 响应式社区参与 丰富的资源生态系统和对高质量组件的贡献来为用户提供构建丰富且引人入胜的web应用程序所需的一切

二、安装

Choose - 1：若用vue-cli 则输入vue add vuetify安装

Choose - 2：若用webpack 则输入npm install vuetify安装
安装完还需输入npm install sass sass-loader fibers deepmerge -D安装sass的loader
然后配置webpack.config.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
module.exports = {
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // 若sass-loader版本是^7.0.0 用此套配置
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
          // 若sass-loader版本是^8.0.0 用此套配置
          options: {
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
  ],
}

再创建一个Vuetify的配置文件src/plugins/vuetify.js：

1
2
3
4
5
6
7
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)

最后 在main.js实例化Vue实例并将Vuetify对象作为选项传递进来：

1
2
3
4
5
6
import Vue from 'vue'
import vuetify from '@/plugins/vuetify'

new Vue({
  vuetify,
}).$mount('#app')

三、使用

Vuetify 需要使用组件包裹着整个应用程序
并用包裹着主体内容
若不这么做 则样式会发生错乱

▲字体颜色

在Vuetify组件里 是没有