如何在 laravel 中实现 vuetify？答案

【问题标题】：How to implement vuetify in laravel?如何在 laravel 中实现 vuetify？
【发布时间】：2018-07-21 23:32:58
【问题描述】：

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

有人已经在 laravel 中实现了 vuetify，可以告诉我怎么做吗？

我已经安装了

npm install vuetify

在 App.scss 中试试这个

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

这是我的 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 '~vuetify/dist/vuetify.min.css';

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

【问题讨论】：

您是否像文档建议的那样将您的应用包装在 v-app 组件中？
你的 JS 是什么样的？ Vuetify 是一个组件包，不仅仅是 CSS，所以你还需要添加他们的 JS。
Al 添加我的 app.js 文件。我需要在那里添加什么？
控制台中是否出现任何错误？我没有立即看到任何错误。
你把路由器挂载到#app了吗？ const app = new Vue({ router }).$mount('#app')??

标签： laravel vue.js vuetify.js

【解决方案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');

希望对你有帮助

【讨论】：

谢谢你！我寻找这些信息的时间比我想承认的要长。它有效，现在我终于可以结合 Laravel、Vue 和 Vuetify 了！！！为什么在 Laravel、Vue 或 Vuetify 文档中的某个地方没有正确记录这一点？还是只是我没看到？
如果我们直接import vuetify/dist/vuetify.min.css，我们还能用自己的变量覆盖吗？

【解决方案2】：

我也遇到了同样的问题，用这个解决了

<body>
    <div id="admin" dark>
    <v-app id="inspire">
    ....
    </v-app>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
    </body>`

在javascript中

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

【讨论】：