Vue3+vite使用vuetify框架

vuetify框架介绍

自 2014 年首次发布以来， Vue.js 已经发展成为世界上最受欢迎的 JavaScript 框架之一。这种受欢迎程度的原因之一是广泛使用 组件 它使开发人员能够创建小模块，以便在整个应用程序中使用和重用。Vuetify 是预制组件的集合，具有强大的功能，例如 动态主题 , 全局默认值 , 应用程序布局 ，等等。它的目标是为开发人员提供所有必要的工具，以构建丰富且引人入胜的用户体验。

官网链接：Vuetify —— 一个 Vue 的 UI 组件框架 (vuetifyjs.com)

为什么我推荐使用vuetify？

vuetify非常完善，这使得我们仅需要这一个ui框架即可解决前端样式布局的所有，包括页面布局、动画过渡、各种好用的组件、字体与排版、主题配色、日期时间等等等等。而且它所提供的解决方案是完善的、快速的，这使得我们的开发更加的便捷与迅速。相较于国内的其他框架，这款框架在完善度，使用体验，动画效果等方面都是非常优秀的，我想只要你使用过以后一定会有舒畅的感觉！

事前准备工作：

请提前搭建好vue3+vite的项目框架，安装好npm或yarn

配置：

1、安装vuetify

控制台运行：

npm create vuetify@latest

2、引入依赖

在我们项目的main.js(或ts)中配置以下内容：
 

import App from './App.vue'

import 'vuetify/styles'
import { createVuetify } from 'vuetify'

const app = createApp(App)

app.use(vuetify)

app.mount('#app')

3、配置自动引入

如果不配置自动引入的话我们就需要手动按需引入，这样是非常麻烦的。要配置自动引入，我们需要再安装一个官方推荐的自动导工具vite-plugin-vuetify， 控制台执行：

npm unistall vite-plugin-vuetify

在vite.config.js(或ts)文件进行以下配置：
 

import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'


 plugins: [
    vue(),
    vuetify({ autoImport: true }), // Enabled by default
  ],

配置好以后我们就不需要再手动进行引入，可以直接使用框架内容

4、拓展

主题切换：

如果要进行主题切换，官方提供的主题切换的事件内容是这样：
 

theme.global.name = theme.global.current.dark ? 'light' : 'dark'

链接：主题 — Vuetify (vuetifyjs.com)

但是经过博主测试直接修改global的name值并不能切换主题颜色方案，正确的格式应该是修改theme.global.name.value，语句如下：
 

theme.global.name.value = theme.global.name.value == 'dark' ? 'light' : 'dark'

light或dark可以修改为自己的主题方案名，这样就能轻松实现主题的切换

总结

vuetify的使用还是比较方便的，相信大家在使用了以后就会知道为什么推荐使用vuetify！