Question

我正在尝试将vuetify导入现有的vue项目。 Laravel被用作后端。

Laravel-mix webpack.mix.js文件：

thead

基本app.js：

<table style="border-collapse: collapse;width: 100%;">
    <tr style="border: 1px solid #dddddd;text-align: left;padding: 8px;font-size:20px;color: gray">
        <th>Book Name</th>
        <th>Author Name</th>
        <th>Book Amount</th>
        <th>Price</th>
        <th>Action</th>
        <th>Action</th>
    </tr>
@foreach($cart_items as $data)
    <tr>
        <td>{{ show_books_name($data->book_id) }}</td>
        <td>{{ show_books_author($data->book_id)  }}</td>
        <td>&nbsp; <!-- Here we have empty td now --> </td>
        <td>{{ $data->price }} tk</td>
        <td>
            <!-- Form is here now -->
            <form action="{{ route('change_item_amount',[$cart_info->id,$data->book_id]) }}" method="POST">
                <input type="number" name="amount" id="amount" value="{{ $data->item_amount }}">
                <button type="submit" class="btn btn-success">Change</button>
            </form>
        </td>
        <td><a class="btn btn-success" href="{{ route('delete_book',[$cart_info->id,$data->book_id] ) }}">Delete</a></td>
@endforeach
</table>

App.vue：

let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')

访问网页vue时产生错误：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import App from './App'

Vue.use(Vuetify)

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

因此，似乎vue找不到veutify vApp组件，但是我看到vuetify代码及其组件代码包含在已编译的app.js中。可能是webpack.mix.js的配置错误。

请告知还应检查哪些内容，尤其是在laravelmix-vue-vuetify一堆方面？

Answer 1

我没有专心。 Vue导入了两次：
1.通过<script src>在HTML中
2.通过导入

在app.js中

删除<script src>之后，问题就消失了。

Vuetify组件导入问题

1 个答案: