正文 

当前位置： 首页 > 源码 >

如何在 laravel 中实现 vuetify？

     2023-02-22     127

关键词：

【中文标题】如何在 laravel 中实现 vuetify？【英文标题】：How to implement vuetify in laravel? 【发布时间】：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')?? 【参考方案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'
...
);

【讨论】：

如何在 Vue 应用程序（使用 Vuetify.js）中实现带有验证的简单表单？

】如何在Vue应用程序（使用Vuetify.js）中实现带有验证的简单表单？【英文标题】：HowtoimplementasimpleformwithvalidationinaVueapp(withVuetify.js)?【发布时间】：2018-06-0912:32:08【问题描述】：我正在尝试使用Vuetify.js示例在使用Vue.js构建的网... 查看详情

无法使用 Vuetify 和 Laravel 读取未定义的属性“t”

】无法使用Vuetify和Laravel读取未定义的属性“t”【英文标题】：Cannotreadproperty\'t\'ofundefinedusingVuetifyandLaravel【发布时间】：2020-01-2400:15:06【问题描述】：尝试使用开箱即用的Vuetify组件时出现此错误。也许只是我对如何在Laravel中... 查看详情

如何在 Laravel 网站中实现主题选项？

】如何在Laravel网站中实现主题选项？【英文标题】：HowtoimplementthemeoptionsinLaravelWebsite?【发布时间】：2018-03-1623:35:43【问题描述】：我想在我的网站中实现主题选项模块，这显然是由Laravel提供支持的。我想知道在哪里存储选项，... 查看详情

如何使用 Laravel 在网站中实现 OCR

】如何使用Laravel在网站中实现OCR【英文标题】：HowtoimplementOCRinwebsiteusingLaravel【发布时间】：2018-10-2811:55:20【问题描述】：我需要使用Laravel在我的网站上实现OCR（光学字符识别）搜索。如何在Laravel中实现这一点？这只能通过开... 查看详情

如何在 Laravel 关系中实现 SUM()？

】如何在Laravel关系中实现SUM()？【英文标题】：HowcanIimplementSUM()inLaravelrelations?【发布时间】：2018-08-0506:54:35【问题描述】：这是我的查询，也可以：SELECTsum(r.rating)asrank,b.*FROMbooksasbLEFTJOINranksasrONb.id=r.book_idWHERE1GROUPBY(b.id)ORDERBYrankD... 查看详情

如何在 laravel 中实现这个查询？

】如何在laravel中实现这个查询？【英文标题】：Howtoimplementthisqueryinlaravel?【发布时间】：2019-05-1012:11:12【问题描述】：select*fromtr_sewaiklanwhere\'2018-12-09\'BETWEENtgl_mulaiANDtgl_selesai【问题讨论】：你应该添加你的模型的代码和你迄今... 查看详情

如何在 laravel 5.1 中实现“记住我”？

】如何在laravel5.1中实现“记住我”？【英文标题】：Howimplement\'rememberme\'inlaravel5.1?【发布时间】：2016-04-1115:31:45【问题描述】：如何在laravel5.1中实现rememeberme功能？谁能举个例子？【问题讨论】：你有没有尝试寻找或做某事，... 查看详情

如何在 Laravel 中实现管理面板和客户面板

】如何在Laravel中实现管理面板和客户面板【英文标题】：HowtoimplementboththeAdmin&CustomerPanelinLaravel【发布时间】：2019-10-0108:28:08【问题描述】：**新蜜蜂**Laravel我想使用URLhttp://127.0.0.1:8000/admin访问管理面板，使用URLhttp://127.0.0.1:80... 查看详情

如何在 Laravel Lumen 中实现事件

】如何在LaravelLumen中实现事件【英文标题】：HowtoimplementEventsinLaravelLumen【发布时间】：2015-07-1607:04:21【问题描述】：我已经用Homestead安装了Lumen，我正在尝试实现事件。在thedocumentation中说..在bootstrap/app.php中取消注释$app->withFac... 查看详情

如何在 laravel 5.4 中实现 HTTPS

】如何在laravel5.4中实现HTTPS【英文标题】：HowtoimplementHTTPSinlaravel5.4【发布时间】：2017-10-2204:04:49【问题描述】：我与OVH(France)共享主机，并且我的域拥有“Let\'sEncrypt”证书。但是，我到处寻找在laravel5.4中将所有请求从HTTP重定向... 查看详情

如何在 Lumen 6x 中实现默认 Laravel 重置密码

】如何在Lumen6x中实现默认Laravel重置密码【英文标题】：HowtoImplementDefaultLaravelResetPasswordinLumen6x【发布时间】：2020-03-1101:50:02【问题描述】：我是Laravel/Lumen框架的新手，我正在尝试将Laravelhttps://laravel.com/docs/5.7/passwords的默认重置... 查看详情

如何在 Laravel 中实现自己的 Faker 提供程序

】如何在Laravel中实现自己的Faker提供程序【英文标题】：HowtoimplementyourownFakerproviderinLaravel【发布时间】：2016-11-1002:02:45【问题描述】：我想在Laravel中为Faker创建一个自定义提供程序（例如，一个用于随机建筑物名称的提供程序... 查看详情

如何在 laravel 护照中实现多身份验证

】如何在laravel护照中实现多身份验证【英文标题】：howtoimplementmultiauthinlaravelpassport【发布时间】：2018-09-0120:51:57【问题描述】：我有两个用户admin/user我想验证这两个用户的api，它适用于一个用户，但不适用于管理员看看我尝试... 查看详情

如何使用 Laravel 5.6 在 Laravel Eloquent 中实现嵌套 MySQL 查询

】如何使用Laravel5.6在LaravelEloquent中实现嵌套MySQL查询【英文标题】：HowtoimplementnestedMySQLqueryinLaravelEloquentusingLaravel5.6【发布时间】：2019-07-2614:43:34【问题描述】：这是我的MySQL查询：SELECT*FROMcc_calendersWHEREcc_calenders.user_id=1ORcc_calende... 查看详情

如何在 Laravel 中实现“用户只能编辑自己的帖子/模型”

】如何在Laravel中实现“用户只能编辑自己的帖子/模型”【英文标题】：Howtoimplement\'usercanonlyedithisownpost/model\'inLaravel【发布时间】：2014-04-2322:36:45【问题描述】：某些模型只能由其所有者编辑/删除：$model->user_id这是我应该如... 查看详情

如何在 Laravel 5.5 中实现多个多对多关系？

】如何在Laravel5.5中实现多个多对多关系？【英文标题】：HowcanIimplementmultiplemany-to-manyrelationshipinLaravel5.5?【发布时间】：2019-02-0221:02:08【问题描述】：我正在制作一个小型laravel项目来实现Eloquent关系，我主要有多个模型（项目、... 查看详情

如何在模型中实现 owen-it/laravel-auditing

】如何在模型中实现owen-it/laravel-auditing【英文标题】：Howtoimplementowen-it/laravel-auditinginamodel【发布时间】：2017-10-1317:27:21【问题描述】：我想在我的模型中创建审计跟踪。我已经通过Composer安装了owen-it/laravel-auditing包。我的问题是... 查看详情

我们如何在 Laravel 中实现自定义的仅 API 身份验证

】我们如何在Laravel中实现自定义的仅API身份验证【英文标题】：HowdoweimplementcustomAPI-onlyauthenticationinLaravel【发布时间】：2020-09-1019:04:42【问题描述】：这不是一个非常需要答案的问题，但欢迎提供进一步的建议和答案和建议。我... 查看详情