如何将 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 添加到现有项目中?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 2.0 中获取 vuetify 数据表选择的 itemsPerPage?