如何将 Vuetify 2.0 添加到现有项目中？

Question

我最近从 Vuetify 1.5 升级到 Vuetify 2.0，但无法正常工作。我觉得我错过了一些东西。

我下载了最新的 Vuetify 包和 @mdi/font 包。据我所知，我已经按照文档中的说明操作：我已经添加了带有 vuetify.js 文件的 plugins 文件夹，据我所知，我已经将 Vuetify 实例化到我的 Main.js 文件中正确，但没有任何样式出现在我的应用程序中。我还尝试在我的项目的各个位置（我的 App.vue 文件和各种其他页面文件）中添加元素标记，但似乎所做的只是破坏了更多内容；我要么让一个元素出现在没有样式的 DOM 上，要么 DOM 出现完全白色。

这是我的 vuetify.js 文件：

import Vue from "vue";
import Vuetify from "vuetify";
import "@mdi/font/css/materialdesignicons.css";

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "mdi"
  }
});

这是我的 main.js 文件：

import Vue from "vue";
import App from "./App.vue";
import router from "./Router";
import Vuetify from "@/plugins/vuetify";
import 'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false;

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

这是我的 App.vue 文件：

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

<script>
import Header from "./components/Layout/Header";
import Home from "./components/Home";
import InstructorProfile from "./components/InstructorProfile";
import ClassRoster from "./components/ClassRoster";
import Footer from "./components/Layout/Footer";

export default {
  name: "app",
  components: {
    Header,
    Home,
    InstructorProfile,
    ClassRoster,
    Footer
  },
  data() {
    return {};
  }
};
</script>

正如我之前提到的，我尝试向该文件添加元素，如下所示：

<v-app>
    <div id="app">...</div>
</v-app>

像这样：

<div id="app">
     <v-app>...</v-app>
</div>

但似乎两者都没有比另一个更好。

我想知道我是否遗漏了什么或我做错了什么。任何帮助深表感谢。先感谢您。

Answer 1

试试这个：

在 vuetify.js 文件中：

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css"; // Add this line

Vue.use(Vuetify);
const opts = {
  theme: {
    dark: false
  },
  options: {
    customProperties: true
  },
  icons: {
    iconfont: "mdi"
  }
};

export default new Vuetify(opts);

在 main.js 文件中：

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

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

Answer 2

我只需运行：vue add vuetify。