《Laravel 实战开发知乎》第42节《上传头像组件》 的问题

《Laravel 实战开发知乎》第42节《上传头像组件》 的问题：

使用vue-image-crop-upload这个package的时候，运行npm install vue-image-crop-upload命令安装这个包后，需要在resources\assets\js\bootstrap.js中引入这个包吗？

看视频中没有这一步操作，照着视频的步骤view中显示不出写的组件来。

写demo的步骤：我用的laravel 5.4

1、创建项目

composer create-project laravel/laravel laravel-5-4-demo

2、安装需要的包

npm install
npm install vue-image-crop-upload
npm install babel-polyfill

3、需要先运行的命令

php artisan make:auth

4、新建路由

Route::get('/avatar', 'UsersController@avatar');

5、新建控制器UsersController

php artisan make:controller UsersController

6、写控制器方法

    public function avatar()
    {
        return view('users.avatar');
    }

7、新建视图views/users/avatar.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <user-avatar></user-avatar>
    </div>
@endsection

8、新建vue组件Avatar.vue

<template>
    <div class="text-center">
        <my-upload field="img"
                   @crop-success="cropSuccess"
                   @crop-upload-success="cropUploadSuccess"
                   @crop-upload-fail="cropUploadFail"
                   v-model="show"
                   :width="300"
                   :height="300"
                   url="/avatar"
                   :params="params"
                   :headers="headers"
                   img-format="png"></my-upload>
        <img :src="imgDataUrl" width="80px">
        <div style="margin-top: 20px">
            <a class="btn btn-primary" @click="toggleShow">修改头像</a>
        </div>
    </div>
</template>

<script>
    import 'babel-polyfill';
    import myUpload from 'vue-image-crop-upload/upload-2.vue';

    export default {
        props:['avatar'],
        data(){
            return {
                show: true,
                params: {
                    _token: Laravel.csrfToken,
                    name: 'img'
                },
                headers: {
                    smail: '*_~'
                },
                imgDataUrl: this.avatar
            }
        },
        components: {
            'my-upload': myUpload
        },
        methods: {
            toggleShow() {
                this.show = !this.show;
            },

            cropSuccess(imgDataUrl, field){
                this.imgDataUrl = imgDataUrl;
            },

            cropUploadSuccess(response, field){
                this.imgDataUrl=response.url;
                this.toggleShow();
            },

            cropUploadFail(status, field){
                console.log('-------- upload fail --------');
                console.log(status);
                console.log('field: ' + field);
            }
        }
    }
</script>

9、在app.js中注册组件

Vue.component('user-avatar', require('./components/Avatar.vue'));

10、webpack.mix.js保持不变

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

11、用npm run dev命令编译文件。

问题：
组件不能显示，在chrome控制台中是这样显示的：

<user-avatar></user-avatar>

重试了一遍，可以了，此问题已关闭。