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 },
})