typescript - Vuetify 不应用默认颜色，组件为白色

Question

我正在为我的项目使用 Vuetify。问题是默认主题是白色的，或者带有道具“黑色”的黑色。

我检查了这篇文章：Vuetify：颜色没有显示 即使我将组件代码放在 v-app 中，它仍然是黑色的。

我没有改变任何东西，我想？

我使用路由器-vue。

下面是我的代码：App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss"></style>

我的组件：

<template>
  <v-card max-width="400">
    <v-app-bar dark>
      <v-toolbar-title>Formulaire de connexion</v-toolbar-title>
    </v-app-bar>
    <v-col>
      <v-form v-model="valid" lazy-validation ref="form">
        <v-row>
          <v-text-field
            :rules="rulesLogin"
            label="Identifiant"
            v-model="identifiant"
          ></v-text-field>
        </v-row>
        <v-row>
          <v-text-field
            :rules="rulesLogin"
            type="password"
            label="Mot de passe"
            v-model="motDePasse"
          ></v-text-field>
        </v-row>
        <v-row>
          <v-btn color="primary" dark @click="seConnecter">Se connecter</v-btn>
        </v-row>
        <v-row>
          <v-btn color="primary" dark>Mot de passe oublié ?</v-btn>
        </v-row>
        <v-row>
          <v-btn color="primary" dark>Pas de compte ? Créer un compte</v-btn>
        </v-row>
      </v-form>
    </v-col>
  </v-card>
</template>

<script>
import service from "@/services/login.services";
export default {
  name: "LoginForm",
  data() {
    return {
      valid: true,
      identifiant: "",
      motDePasse: ""
    };
  },
  computed: {
    rulesLogin() {
      return [v => !!v || "Ce champ est obligatoire"];
    }
  },
  methods: {
    seConnecter() {
      if (this.$refs.form.validate()) {
        const params = {
          identifiant: this.identifiant,
          motDePasse: this.motDePasse
        };
        service.connexion(params);
      }
    }
  }
};
</script>

<style></style>

插件/vuetify.js：

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({});

main.js

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount("#app");

谢谢 =)

标签： typescriptvue.jsvuejs2vuetify.js