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

gj3fmq9x 于 2022-11-17 发布在 Vue.js

关注(0)|答案(5)|浏览(187)

我最近从Vuetify 1.5升级到了Vuetify 2.0，但我无法让它正常工作。我觉得我错过了什么。
我下载了最新的Vuetify软件包和@mdi/font软件包。据我所知，我已经按照文档中的说明进行了操作：我已经添加了vuetify.js文件的plugins文件夹，就我所知，我已经将Vuetify正确地示例化到了Main.js文件中，但是没有任何样式出现在我的应用程序中。我要么让一个元素不带样式地出现在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>

但两种方法似乎都不奏效。
我想知道我是否遗漏了什么或做错了什么。任何帮助都是非常感谢的。提前感谢你。

vue.js

来源：https://stackoverflow.com/questions/57263757/how-do-i-add-vuetify-2-0-to-an-existing-project

5条答案

按热度按时间

guz6ccqo1#

请尝试以下操作：
在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");

赞(0）回复(0）举报 2022-11-17

iklwldmw2#

我这样做（vue 3.9，vuetify 2.0）
在main.js中

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

在插件/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",
    },
  },
})

应用程序版本

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

赞(0）回复(0）举报 2022-11-17

z8dt9xmd3#

我用

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

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

赞(0）回复(0）举报 2022-11-17

uemypmqf4#

我只好跑了：请添加验证。

赞(0）回复(0）举报 2022-11-17

laik7k3q5#

来自Vuetify 3的文档

例如，如果您要将Vuetify添加到现有项目，或者只是不想使用scaffolding工具，请按照以下步骤操作。

yarn add vuetify@^3.0.0

在创建Vue应用程序的文件中，添加以下代码

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

createApp(App).use(vuetify).mount('#app')

更多信息请参见文档。

赞(0）回复(0）举报 2022-11-17

我来回答

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

5条答案

相关问题

热门标签

最新问答