海风盒子

Appearance

引入 Vuetify ​

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

安装 ​

本体与插件 ​

  1. 安装依赖
zsh
yarn add vuetify
yarn add -D vite-plugin-vuetify
yarn add vuetify
yarn add -D vite-plugin-vuetify
  1. 配置 Vite：
ts
import vuetify from "vite-plugin-vuetify"; 

export default defineConfig({
  plugins: [
    vue(),
    vuetify(), 
  ],
});
import vuetify from "vite-plugin-vuetify"; 

export default defineConfig({
  plugins: [
    vue(),
    vuetify(), 
  ],
});
  1. 配置 Vue：
ts
import "vuetify/styles";
import { createVuetify } from "vuetify";

const vuetify = createVuetify();

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

const vuetify = createVuetify();

export default vuetify;
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");
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. 安装
zsh
yarn add @mdi/font -D
yarn add @mdi/font -D
  1. 引入
ts
import "vuetify/styles";
import "@mdi/font/css/materialdesignicons.css"; 
import { createVuetify } from "vuetify";

const vuetify = createVuetify();

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

const vuetify = createVuetify();

export default vuetify;

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