Vuetify2.x学习笔记(壹)：Vuetify的安装、颜色(color)及字体样式、按钮(button)和图标(icon)、不同尺寸设备的适配(xs sm md lg xl)

一、介绍

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：

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：

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对象作为选项传递进来：

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' 

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

三、使用

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

▲颜色

在Vuetify组件里 是没有<style>标签的 因而无法像以往一样在<style>标签中自定义样式

Vuetify提供了内置颜色属性 开箱即用
默认使用的是Sass色彩包 当然 也提供可选的Javascript色彩包

导入：

<style lang="sass">
  $color-pack: false;

  @import '~vuetify/src/styles/main.sass';
</style>
</