如何在 Laravel 中实现 vuetify？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48735602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement vuetify in laravel?
提问by Luis Preciado
I'm new with vuetify and i trying to implement it in laravel.
我是 vuetify 的新手，我试图在 Laravel 中实现它。
Does someone have already implement vuetify in laravel and could tell me how?
有人已经在 laravel 中实现了 vuetify 并且可以告诉我如何实现吗？
i have already install with
我已经安装了
npm install vuetify
npm 安装 vuetify
and try this in App.scss
并在 App.scss 中试试这个
@import '~vuetify/dist/vuetify.min.css';
@import '~vuetify/dist/vuetify.min.css';
This is my app.js file
这是我的 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,
},
],
});
but when i try to use some vuetify components it doesn't work.
但是当我尝试使用一些 vuetify 组件时它不起作用。
This is my component.
这是我的组件。
<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>
and try this in App.scss
并在 App.scss 中试试这个
@import '~vuetify/dist/vuetify.min.css';
@import '~vuetify/dist/vuetify.min.css';
but when i try to use some vuetify components it doesn't work.
但是当我尝试使用一些 vuetify 组件时它不起作用。
回答by Elvis gil
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
在javascript中
const app = new Vue({
el: '#admin'
...
});
