Question

我是vuetify的新人，我试图在laravel中实现它。

有人已经在laravel中实施了vuetify并且可以告诉我怎么做？

我已经安装了

npm install vuetify

并在App.scss中尝试此操作

@import＆＃39; ~vuetify / dist / vuetify.min.css＆＃39;;

这是我的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中尝试此操作

@import＆＃39; ~vuetify / dist / vuetify.min.css＆＃39;;

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

Answer 1

我将为您提供在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/font@5.x/css/materialdesignicons.min.css');

希望这对您有帮助

Answer 2

我现在正在使用 Vuetify 和 Laravel 开发一个 SPA 博客。公共 git 存储库是 https://github.com/scar-2018/Laravel-vuetify-SPA-Blog

Answer 3

    i too had the same problem which solve with this`<body>
    <div id="admin" dark>
    <v-app id="inspire">
    ....
    </v-app>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
    </body>`
    in the javascript



const app = new Vue({
el: '#admin'
...
});

如何在laravel中实现vuetify？

3 个答案: