Vuetify学习记录（一）-- 安装和配置

Vuetify安装

1. 不同的安装办法

• Vuetify官方推荐使用vue add命令安装

// 前提是已经运行vue create进行初始化项目，并且一定要cd到项目文件夹下
vue add vuetify

此方法适用于刚初始化的项目，会为你创建好vuetify需要用到的配置文件。如果是相对成熟的项目，尽量不要使用该命令，因为会改变项目结构，造成不必要的麻烦。

• 通过npm或者yarn安装依赖

npm install vuetify
// 或者
yarn add vuetify

下一步安装sass文件依赖，Vuetify样式建立在sass/scss上

npm install sass@~1.32 sass-loader deepmerge -D
// 或者
yarn add sass@~1.32 sass-loader deepmerge -D

但是我在这里遇到sass版本问题，以上是官网推荐的版本，如果出错，就下载以下版本

npm install sass-loader@7.3.1 node-sass@4.14.1
// 或者
yarn add sass-loader@7.3.1 node-sass@4.14.1

问题解决来源

2. 在main.js中引入

• 如果只是单纯的引用Vuetify插件，不进行其他配置的话，用如下方法,，跟使用其他插件一样的方式

import vuetify from 'vuetify'

• 如果需要在项目里配置关于Vuetify的设置，则需要在vue实例中关联vuetify

//如果是通过vue add安装的vuetify,会为你自动创建好配置文件
import vuetify from './plugins/vuetify'
const app = new Vue({
    
    
  vuetify,
  render: (h) => h(App)
})

• 如果使用Vuetify配置报错，可以尝试以下代码：

import vuetify from './plugins/vuetify'
const app = new Vue({
    
    
  vuetify： new Vuetify,// 这一段代码不一定必须，但是会解决一部分bug
  render: (h) => h(App)
})

Vuetify全局配置

如上文所示，我们可以对Vuetify进行全局配置，但是操作步骤必须把Vuetify和Vue实例化相结合

1. index.js文件配置

• 在项目的plugins文件夹下新建vuetify文件夹，在index.js文件中进行配置，如果想要修改字体配置，加iconfont选项

// import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
    
    
  icons: {
    
    
    iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  },
})

这些都是Vuetify自带的字体样式，如果使用不了，则需要安装依赖来进行使用

例如：

npm install @mdi/js -D

• Vuetify.config是一个包含修改全局引导配置的对象。

import Vuetify from 'vuetify/lib'
// silent 将停止所有的Vuetify日志和警告
Vuetify.config.silent = true

2. 主题配置

• theme控制主题

// src/plugins/vuetify/index.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
    
    
  //应用暗色主题
  theme: {
    
     dark: true },
})

• 自定义配置主题

// src/plugins/vuetify/index.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const vuetify = new Vuetify({
    
    
  theme: {
    
    
    themes: {
    
    
      light: {
    
    
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c',
      },
    },
  },
})

Vuetidy预设

• Vuetidy提供了预设的样式，需要通过下载依赖包来实现
  

官方文档推荐使用vue add vuetify-preset-{Basil}来安装，但是我这里报错（），如果有小伙伴跟我遇到一样的问题，建议使用npm 或者yarn来安装依赖

报错提示：

推荐方法：

npm install vue-cli-plugin-vuetify-preset-basil
// 或者
yarn add vue-cli-plugin-vuetify-preset-basil

安装成功之后，在/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则代表文本从右向左展示
  rtl: true,
  theme: {
    
     dark: true },
})