如何在Laravel工程中正确安装Vuetify
我已经挣扎了几个小时，试图在我的laravel项目中安装Vuetify，但我无法让它正常工作，Vuetify组件运行良好，但图标和断点不是，我尝试了所有方法，现在我有点厌倦了，我希望有人能帮助我…
根据证明文档，我在我的app.js中写下了这段代码
require('./bootstrap');
import Vue from 'vue';
import Vuex from 'vuex';
import router from './router'
import vuetify from './plugins/vuetify.js' // path to vuetify export
Vue.use(Vuex);
new Vue({
vuetify,
router,
}).$mount('#app')和一个单独的vuetify.js文件
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
})并将验证加载程序添加到我的webpack.mix.js中
const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
new VuetifyLoaderPlugin(),
]
}).sourceMaps();
mix.disableSuccessNotifications();首先，有了这个配置，项目甚至不会运行，我得到了这个错误："Error: Conflict: Multiple assets emit to the same filename fonts/vendor/@mdi/materialdesignicons-webfont.eot?a32fa1f27abbfa96ff2f79e1ade723d5"
因此，我从vuetify.js文件中删除了import "@mdi/font/css/materialdesignicons.css"，没有错误，但图标不可见。
我从Toolbar的文档中提取代码并粘贴到我的项目中，如下所示
这是那个空工具栏的代码
<template>
<v-card
color="grey lighten-4" flat height="200px" tile>
<v-toolbar dense>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</template>如果我将vuetify.js文件中的iconfont从'mdi‘更改为'mdiSvg’，我会得到一个图标，但其他图标仍然缺失
根据文档，此工具栏应如下所示：
但这还不是问题所在，我甚至不能使用像$vuetify.breakpoint.smAndUp这样的实例化断点，我在控制台中得到了一个未定义的错误
回答 2
Stack Overflow用户
发布于 2019-09-22 10:07:44
将Vuetify与Laravel一起使用与文档略有不同。并依赖于Vuetify版本，以及如何为最后两个版本安装它
Vutify v1.5.x
// /resources/js/app.js file
import 'vuetify/dist/vuetify.min.css'; // vuetify style css
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify); // to access $vuetify inside your Vue components在Vuetify v2.0.x中略有不同
// /resources/js/app.js file
import 'vuetify/dist/vuetify.min.css'; // vuetify style css
import Vue from 'vue';
import Vuetify from 'vuetify';
const app = new Vue({
vuetify: new Vuetify(), // to access $vuetify inside your Vue components
});如果您喜欢，也可以在app.scss文件中的资源/sass文件夹中添加vuetify.min.css以及材质图标，如下所示：
// /resources/sass/app.scss
// Fonts
@import '~@mdi/font/css/materialdesignicons.min.css';
// Vuetify
@import '~vuetify/dist/vuetify.min.css';Stack Overflow用户
发布于 2021-12-08 10:35:41
去vuetifyjs网站上建树的方法是最好的方法！https://vuetifyjs.com/en/getting-started/installation/
就像咆哮一样！
import Vuetify, {
VApp,
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VMain,
VNavigationDrawer,
VFadeTransition,
VContainer,
VCol,
VRow,
VSpacer,
VLayout,
VFlex,
VContent,
VDivider,
VProgressCircular,
VAvatar,
VChip,
VMenu
} from 'vuetify/lib'
import fa from 'vuetify/lib/locale/fa'
Vue.use(Vuetify, {
components: {
VApp,
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VMain,
VNavigationDrawer,
VFadeTransition,
VContainer,
VCol,
VRow,
VSpacer,
VLayout,
VFlex,
VContent,
VDivider,
VProgressCircular,
VAvatar,
VChip,
VMenu
},
});
new Vue({
el: '#yourappid',
router: router,
render: h => h(App),
vuetify: new Vuetify({
rtl: true,
lang: {
locales: { fa },
current: 'fa',
},
}),
data() {
return {
breadcrumbs: [],
sidebarBg: "deep-purple"
}
}
});https://stackoverflow.com/questions/58043850
复制相似问题
腾讯云开发者
