Question

我最近已从Vuetify 1.5升级到Vuetify 2.0，但无法正常工作。我觉得我想念什么。

我下载了最新的Vuetify软件包和@ mdi / font软件包。据我所知，我已经按照文档中的说明进行操作：我已经在vuetify.js文件中添加了plugins文件夹，并且据我所知，我已将Vuetify实例化为Main.js文件。正确，但所有样式均未出现在我的应用中。我还尝试过在各个位置（我的App.vue文件和其他各个页面文件）向项目中添加一个element标签，但是似乎要做的只是使事情变得更糟。我要么让一个元素没有样式就出现在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

我这样做（vue 3.9，vuetify 2.0）

在main.js中

import vuetify from './plugins/vuetify'
...
new Vue({
  ...
  vuetify,
  render: h => h(App)
}).$mount('#app')

在plugins / vuetify.js中

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

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'md',  // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
  },
  theme: {
    dark: false,
  },
  themes: {
    light: {
      primary: "#4682b4",
      secondary: "#b0bec5",
      accent: "#8c9eff",
      error: "#b71c1c",
    },
  },
})

在App.vue中

<template>
  <v-app>
    ...
  </v-app>
</template>

Answer 2

尝试一下：

在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 3

我固定了

npm install vuetify-loader  vue-cli-plugin-vuetify -D

https://vuetifyjs.com/en/getting-started/frequently-asked-questions/#questions

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

3 个答案: