Question

我使用了laravel 6.2并进行了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>

Answer 1

首先在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。访问页面，现在您应该可以看到所有内容。

Answer 2

正如我在this reply中所说的那样，在Vuetify 2中，当您创建Vue距离时，还必须创建一个新的Vuetify距离。

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

我建议您在导入Vuetify之后也添加此代码：

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

前端未在laravel 6.2中成形

2 个答案: