如何在 laravel 中实现 vuetify？
Posted
技术标签:
【中文标题】如何在 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>© 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>`
const app = new Vue(
el: '#admin'
...
);
【讨论】：
以上是关于如何在 laravel 中实现 vuetify？的主要内容，如果未能解决你的问题，请参考以下文章