Lui*_*ado 6 laravel vue.js vuetify.js
我是 vuetify 的新手，我试图在 laravel 中实现它。
有人已经在 Laravel 中实现了 vuetify 并且可以告诉我如何实现吗？
我已经安装了
npm 安装 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 组件时它不起作用。
我会给你在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');
希望这对你有帮助
小智 -1
我也遇到了同样的问题，用这个解决了
<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'
...
});
| 归档时间： |
|
| 查看次数： |
12333 次 |
| 最近记录： |