Vue.js laravel 6.2中前端未成形_Vue.js_Vuetify.js_Laravel 6.2

Vue.js laravel 6.2中前端未成形

vue.js

Vue.js laravel 6.2中前端未成形,vue.js,vuetify.js,laravel-6.2,Vue.js,Vuetify.js,Laravel 6.2,我使用了Laravel6.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 'vu

我使用了Laravel6.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>


链接一
链接二
链接三
src=“{asset（'js/app.js'）}”

首先在

资产/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>

然后在

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>



src=“{asset（'js/app.js'）}”

最后运行npm运行dev
。访问该页面，现在您应该可以看到所有内容了。
正如我在中所说的，在Vuetify 2中创建Vue距离时，您还必须创建一个新的Vuetify距离
const-app=新的Vue({
el:“#应用程序”，
vuetify：新的vuetify（）
});

我建议您在导入Vuetify后也添加以下内容：
导入'vuetify/dist/vuetify.min.css'
您是否运行了npm run dev
？是的，没有任何错误。您编写的HTML代码是vue模板还是刀片文件？这是刀片文件。在下面的链接上。但是，我在下面的行src=“{{asset（'js/app.js'）}}”中写道，这是错误的。您应该首先创建一个vue模板，然后将其包含在刀片文件中，然后运行npm run dev
<!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>