前端在 Laravel 6.2 中未成形

我使用了 laravel 6.2 和 vuetify。但是，我的 vuetify 不起作用。我没有看到任何针对 Vuejs 的设计。没有任何错误我做错了什么??.请帮助我。

"vuetify": "^2.1.12"  
"laravel/framework": "^6.2"

下面的代码是我的脚本：

app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});

在引导中使用 app.scss：

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons');
@import '~vuetify/dist/vuetify.min.css';

以下代码是我的网页：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id ="app">
<v-toolbar>
<v-toolbar-items>
<v-btn text>Link one</v-btn>
<v-btn text>Link two</v-btn>
<v-btn text>Link three</v-btn>
</v-toolbar-items>
<script> src ="{{ asset('js/app.js') }}" </script>
</body>
</html>

首先assets/js/components文件夹中创建一个名为Navbar.vue的新文件。然后在Navbar.vue写

<template>
<v-toolbar>
<v-toolbar-items>
<v-btn text>Link one</v-btn>
<v-btn text>Link two</v-btn>
<v-btn text>Link three</v-btn>
</v-toolbar-items>
</template>
<script>
</script>

在你app.js像这样添加新创建的组件

require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.component('navbar', require('./components/Navbar.vue').default);
const app = new Vue({
el: '#app',
});

然后在您的index.blade.php文件中将其更改为以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id ="app">
<navbar></navbar>
</div>
<script> src ="{{ asset('js/app.js') }}" </script>
</body>
</html>

最后跑npm run dev.访问该页面，现在您应该能够看到应有的所有内容。

正如我在这个回复中所说，在 Vuetify 2 中，当你创建你的 Vue istance 时，你也必须创建一个新的 Vuetify istance。

const app = new Vue({
el: '#app',
vuetify: new Vuetify()
});

我建议您在导入 Vuetify 后也添加它：

import 'vuetify/dist/vuetify.min.css'

相关内容

最新更新

热门标签：