laravel - 如何在Laravel中实现Vuetify？

我是vuetify的新手，我想在laravel中实现它。

有人已经在laravel中实现了vuetify，可以告诉我如何吗？

我已经安装了



并在App.scss中尝试



这是我的app.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'

Vue.use(Vuetify)
Vue.use(VueRouter)


// parents componenets
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('example', require('./components/example.vue'));

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
    ],
});

但是，当我尝试使用某些vuetify组件时，它不起作用。

这是我的组件。

<template>
  <v-app id="inspire" dark>
    <v-navigation-drawer
      clipped
      fixed
      v-model="drawer"
      app
    >
      <v-list dense>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>dashboard</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Dashboard</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Settings</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app fixed clipped-left>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <v-tooltip right>
            <v-btn icon large :href="source" target="_blank" slot="activator">
              <v-icon large>code</v-icon>
            </v-btn>
            <span>Source</span>
          </v-tooltip>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer app fixed>
      <span>&copy; 2017</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      drawer: null
    }),
    props: {
      source: String
    }
  }
</script>

并在App.scss中尝试



但是，当我尝试使用某些vuetify组件时，它不起作用。

最佳答案

我将为您提供在laravel中实现vuetify的所有步骤
-1运行npm命令在您的laravel项目中安装vuetify

npm install vuetify

-2转到app.js文件并添加此代码

import Vuetify from 'vuetify';
   Vue.use(Vuetify);

   const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),

});

-3转到app.scss文件并添加此代码

@import "~vuetify/dist/vuetify.min.css";

-4最后，您可以在app.scss中为vuetify字体添加此代码，因为如果不添加以下代码，则无法使用vuetify字体，并且不会显示

 @import url('https://fonts.googleapis.com/css?family=Material+Icons');
   @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url('https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css');

希望这对您有帮助

关于laravel - 如何在Laravel中实现Vuetify？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48735602/