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

【问题标题】：How do I add Vuetify 2.0 to an existing project?如何将 Vuetify 2.0 添加到现有项目中？
【发布时间】：2019-12-07 09:06:09
【问题描述】：

我最近从 Vuetify 1.5 升级到 Vuetify 2.0，但我无法让它工作。我觉得我错过了什么。

我下载了最新的 Vuetify 包和 @mdi/font 包。据我所知，我已按照文档中的说明进行操作：我已将 plugins 文件夹与 vuetify.js 文件一起添加，据我所知，我已将 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>

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

我想知道我是否遗漏了什么或者我做错了什么。任何帮助深表感谢。提前谢谢你。

【问题讨论】：

相关stackoverflow.com/q/56364965/1981247
你安装SASS package了吗？试试yarn add sass -D // OR npm install sass -D

标签： vue.js vuetify.js vue-cli

【解决方案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");

【讨论】：

【解决方案2】：

我是这样做的（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",
    },
  },
})

在 App.vue 中

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

【讨论】：

【解决方案3】：

我修复了

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

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

【讨论】：