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

Posted

技术标签:

【中文标题】如何将 Vuetify 2.0 添加到现有项目中?【英文标题】:How do I add Vuetify 2.0 to an existing project? 【发布时间】: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>

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

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

【问题讨论】:

相关***.com/q/56364965/1981247 你安装SASS package了吗?试试yarn add sass -D // OR npm install sass -D 【参考方案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

【讨论】:

以上是关于如何将 Vuetify 2.0 添加到现有项目中?的主要内容,如果未能解决你的问题,请参考以下文章

如何避免 Vuetify 覆盖默认 CSS

如何在 2.0 中获取 vuetify 数据表选择的 itemsPerPage?

如何将 vuetify 添加到默认 vuepress 主题

将 Google 字体系列添加到 Nuxt&Vuetify 项目

如何隔离 Vuetify 全局样式

如何将 Vuetify 3 添加到 Laravel 8 Jetstream + 惯性