预设

预设

对于第 2 版 Material Design 规范，Google 创建了 Material studies，目的是通过虚构的应用程序来探索现实世界的设计局限性，每个应用程序都有自己独特的属性和用例。Vuetify 预设通过预先配置的框架选项、SASS 变量和自定义样式整合了这些研究，这些预设可以立即改变你的应用程序的外观和感觉。

默认预设

默认的 Vuetify 预设提供了所有框架服务的基线值。每个对象键(object key) 对应于 $vuetify 对象上的一个服务，并且可以通过 Vuetify 构造函数中的 preset 或自定义 user options 来覆盖。

// Styles
import '../../styles/main.sass'
// Locale
import { en } from '../../locale'
// Types
import { VuetifyPreset } from 'vuetify/types/services/presets'
export const preset: VuetifyPreset = {
  breakpoint: {
    scrollBarWidth: 16,
    thresholds: {
      xs: 600,
      sm: 960,
      md: 1280,
      lg: 1920,
    },
  },
  icons: {
    iconfont: 'mdi',
    values: {},
  },
  lang: {
    current: 'en',
    locales: { en },
    t: undefined as any,
  },
  rtl: false,
  theme: {
    dark: false,
    default: 'light',
    disable: false,
    options: {
      cspNonce: undefined,
      customProperties: undefined,
      minifyTheme: undefined,
      themeCache: undefined,
    },
    themes: {
      light: {
        primary: '#1976D2',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FB8C00',
      },
      dark: {
        primary: '#2196F3',
        secondary: '#424242',
        accent: '#FF4081',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FB8C00',
      },
    },
  },
}

Material Studies

Material Design 是一种固执己见的视觉语言，在实现高度定制的设计时，可能难以使用。新的研究展示了材料主题化的灵活性，并告诉你在没有默认材料外观的情况下创建 独特的 应用程序是多么容易。

Vuetify 预设是一个正在进行中的功能，随着 Vuetify 获得新功能，它将随着时间的推移得到增强。

目前共有 7 个 Material Studies，每个都有相应的预设插件：

安装

在你的控制台中键入 vue add vuetify-preset-{name}, 其中 {name} 对应于可用的 Material Studies 之一。安装插件后，您的 vuetify.js 文件将更新为包括所选的预设。

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { preset } from 'vue-cli-plugin-vuetify-preset-basil/preset'
Vue.use(Vuetify)
export default new Vuetify({
  preset,
  rtl: true,
  theme: { dark: true },
})

要开始开发，命令行里需要键入 yarn serve 或者 npm run serve。 Vuetify 服务插件将引导到 Vue CLI 并自动应用预设变量和风格的所有更改。欲了解更多关于生成器和服务插件如何工作的信息，请查看 Plugin Development Guide。

合并策略

Vuetify 选项从上往下合并 — _Defaults, Preset and User_。default 预设首先会与 Vuetify 构造函数选项中提供的 preset 属性合并。如果适用，用户提供的选项将与全局默认值和预设合并。

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { preset } from 'vue-cli-plugin-vuetify-preset-shrine/preset'
Vue.use(Vuetify)
const options = {
  breakpoint: { scrollbarWidth: 12 },
  theme: {
    themes: {
      light: { primary: 'blue' },
    },
  },
}
export default new Vuetify({
  // The provided global preset is first merged with defaults
  preset,
  // User options are then merged, overwriting defaults and the global preset
  ...options,
})

局限性

由于 studies 更多的是可视化而不是技术性的，所以预设是我们的 best-guess 实现。在许多情况下，由于缺乏研究报告中的信息，风格和功能必须由研究报告中的准则来推断。也有一些情况下，研究报告的部分内容不能或者不被支持。

需要对框架进行修改
目前无法使用 CSS
我们还没有找到支持它的方法

Google 字体

当您安装预设时，它将只用它所需要的字体和权重更新您的主要 public/index.html 文件。例如，一个研究报告可能只需要 400,500,600 字体权重。这将导致 Vuetify 中的一些辅助类无法工作；例如 font-weight-thin 需要 300 字体权重。权重可以通过更新你的 public.html 中的字体链接来修改。

<!-- You can add or remove font weights after the fact; e.g. Rubik:100,300,400,500 -->
<!-- The available weights for each font can be found on https://
fonts.google.com/ -->
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap" rel="stylesheet">

编译时间

为了更新Vuetify中的SASS变量，在开发过程中以及当你的应用程序为生产模式构建时，样式会被重新编译。这将会增加你的初始编译时间，并且会在你编辑 variables 文件时被触发。如果你的应用程序没有受到任何 Vuetify加载器限制的影响，你可以选择从 vuetify/lib/framework 导入 Vuetify。这可以将编译时间减少 _50%_。

// src/plugins/vuetify.js
// CORRECT
import Vuetify from 'vuetify/lib/framework'
// INCORRECT
import Vuetify, { VRow } from 'vuetify/lib/framework'
export default new Vuetify()

插件开发指南

Vuetify 预设是一个 npm 包，它提供了框架范围内的选项和使用 Vue CLI 进行自定义风格设计。它由一个 SASS 变量文件、一个 CSS 覆盖文件以及 Vue CLI Generator 和 Plugin Service 组成。预设所提供的一些功能包括：

使用 预定义的 值配置框架选项 - 可以使用任何可用的 Vuetify 选项的组合。
注入 自定义 SASS 变量，用于配置现有的 Vuetify 功能；例如组件。预设在编译时使用 Vue CLI 插件API 来提升 SASS 变量。
提供 全局覆盖 的样式无法通过变量覆盖。
修改 Vuetify 应用程序的风格和选项的 简化方法

# Vuetify preset plugin structure
.
├── generator.js        # generator (optional)
├── index.js            # service plugin
└── preset
    ├── index.js        # preset object
    ├── overrides.sass  # global overrides
    └── variables.scss  # SASS variables

自定义预设不能本身包含一个 preset 属性。

generator.js

此文件是 Vue CLI Generator，用于更新您应用程序中的 vuetify.js 文件以包含定义的预设。

// Imports
const {
  generatePreset,
  injectGoogleFontLink,
} = require('@vuetify/cli-plugin-utils')
// Updates the Vuetify object with provided preset
module.exports = api => generatePreset(api, 'preset-name', () => {
  // Invoked after the generator has completed.
  // A common use-case is adding font links
  // Will automatically apply the default font-weights
  // 100,300,400,500,700,900
  injectGoogleFontLink(api, 'Rubik')
  // Will only use the defined font-weights
  injectGoogleFontLink(api, 'Roboto:100,300,700')
  // Works the same as the above, but accepts multiple values
  injectGoogleFontLink(api, [
    'Rubik',
    'Roboto:100,300,700',
  ])
})

index.js

此文件是 Vue CLI Plugin Service，在运行 yarn serve 或 npm run serve 时将绑定到您的应用程序中。 injectSassVariables 方法将目标文件的变量注入到所有 SASS/SCSS 文件中。

// Imports
const { injectSassVariables } = require('@vuetify/cli-plugin-utils')
// Bootstraps Vue CLI with the target SASS variables
module.exports = api => injectSassVariables(
  api,
  // Path to the variables file
  'path/to/preset-plugin-variables.scss',
  // Modules to inject variables
  ['vue-modules', 'vue', 'normal-modules', 'normal'], // default
)

preset/index.js

这包含了传递给 Vuetify 构造函数的框架配置选项。这些选项与任何用户提供的值和框架默认值相结合。

// preset/index.js
require('./overrides.sass')
const preset = {
  theme: {
    themes: {
      light: {
        primary: '#5D1049',
        secondary: '#E30425',
        accent: '#720D5D',
        error: '#F57C00',
      },
    },
  },
}
module.exports = { preset }

preset/overrides.sass

这是对没有相应的变量的样式修改的全部内容。当你需要在现有组件中添加新的 CSS 属性时，这很有用。

// preset/overrides.sass
@import './variables.scss'
.theme--light
  .v-chip
    border-radius: $shrine-chip-border-radius
    border: $shrine-chip-border
    font-weight: $shrine-chip-font-weight
    padding: $shrine-chip-padding
    +elevation(0)

preset/variables.scss

这是一个 SASS/SCSS 变量文件，它将覆盖现有的框架值。你可以在 Vuetify SASS变量文档页面或组件的 API 部分找到更多关于可用变量的信息。

// preset/variables.scss
// Shrine specific variables
$shrine-chip-border-radius: 4px;
$shrine-chip-border: thin solid black;
$shrine-chip-font-weight: 900;
$shrine-chip-padding: 0 8px;
// Preset variables
$body-font-family: 'Work Sans', sans-serif;
$border-radius-root: 6px;
$headings: (
  'h1': (
    'font-family': 'Roboto', sans-serif;
    'letter-spacing': 0
  )
);
$material-light: (
  'cards': #E0E0E0,
  'text': (
    'primary': rgba(0, 0, 0, .76),
    'secondary': grey
  )
);

Presets（预设）new

预设