Vuetify

提示

Vuetify 3.x 适用于 Vue 3 开发。

引入 Vuetify

按需引入

1. 安装 vuetify

   npm i vuetify

2. 安装 vue-cli-plugin-vuetify

   npm i vite-plugin-vuetify -D

3. 在 vite.config.ts 中添加以下代码

   import vuetify from 'vite-plugin-vuetify'
   
   export default defineConfig({
     // ...
     plugins: [
       // ...
       vuetify({ autoImport: true }),
     ],
   })

4. 在 src/plugins/vuetify.ts 中添加以下代码：

   import { createVuetify } from 'vuetify'
   import 'vuetify/styles'
   
   const vuetify = createVuetify({
     //
   })
   
   export default vuetify

5. 在 main.ts 中添加以下代码

   import vuetify from './plugins/vuetify'
   
   const app = createApp(App)
   app.use(vuetify)
   app.mount('#app')

主题

createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#42b883',
        },
      },
      dark: {
        colors: {
          primary: '#42b883',
        },
      },
    },
  },
})