引入 Vuetify

Vuetify 是一个基于 Metarial Design 设计的 Vue 组件库。

安装

本体与插件

1. 安装依赖

yarn add vuetify
yarn add -D vite-plugin-vuetify

2. 配置 Vite：

vite.config.ts

import vuetify from "vite-plugin-vuetify"; 

export default defineConfig({
  plugins: [
    vue(),
    vuetify(), 
  ],
});

3. 配置 Vue：

plugins/vuetify.ts

import "vuetify/styles";
import { createVuetify } from "vuetify";

const vuetify = createVuetify();

export default vuetify;

main.ts

import "./assets/main.css";

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";
import vuetify from "./plugins/vuetify"; 

const app = createApp(App);

app.use(createPinia());
app.use(router);
app.use(vuetify); 

app.mount("#app");

图标库

参考文档

1. 安装

yarn add @mdi/font -D

2. 引入

plugins/vuetify.ts

import "vuetify/styles";
import "@mdi/font/css/materialdesignicons.css"; 
import { createVuetify } from "vuetify";

const vuetify = createVuetify();

export default vuetify;

至此，Vuetify 安装完毕，你可以在代码中使用 Vuetify 提供的组件了。