封装vue组件保错 Component template should contain exactly one root element. If you are using v-if ......

创建vue 公共组件时报错

原因：缺少根元素！
组件中不管写多少内容，最外层一定要给一个div标签把所有包含起来
示例 将上传附件封装为组件
html中引入vue封装组件时，组件名字必须全部使用小写，大写无法编译
webpack组建化形式开发 名字可大写

Vue.component('upload-file',{
    template:'<div>\n' +
        '    <div class="row ten">\n' +
        '        <div class="first">附件</div>\n' +
        '        <div class="file_box">\n' +
        '            <div class="file">\n' +
        '                <div>文件名</div>\n' +
        '                <div>类型</div>\n' +
        '                <div>大小(kb)</div>\n' +
        '                <div>\n' +
        '                    <el-upload \n' +
        '                        class="avatar-uploader" \n' +
        '                        multiple\n' +
        '                        :action="uploadUrl()"\n' +
        '                        :headers="headers"\n' +
        '                        :show-file-list="false" \n' +
        '                        :on-success="handleAvatarSuccess" \n' +
        '                        :before-upload="beforeAvatarUpload"\n' +
        '                        accept=".pdf, .doc, .docx, .xls, .xlsx" \n' +
        '                        :file-list="fileList"\n' +
        '                        :limit="5">\n' +
        '                        <span style="color: #409EFF">上传</span>\n' +
        '                    </el-upload>\n' +
        '                </div>\n' +
        '            </div>\n' +
        '            <div class="file lastFile" v-for="(item,key) in uploadData" :key="key">\n' +
        '                <el-tooltip class="item" effect="dark" :content="item.fileName" placement="top">\n' +
        '                    <div>{{item.fileName}}</div>\n' +
        '                </el-tooltip>\n' +
        '                <div>{{item.fileType}}</div>\n' +
        '                <div>{{item.fileSize}}</div>\n' +
        '                <div style="display:flex;justify-content:space-around;">\n' +
        '                    <el-button type="text" @click="previewFile(item)">查看</el-button>\n' +
        '                    <el-button type="text" class="fontRed" @click="handleRemove(item)">删除</el-button>\n' +
        '                </div>\n' +
        '            </div>\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    \n' +
        '    <div class="remind fontRed">\n' +
        '        <h4>上传附件须知</h4>\n' +
        '        <p>1：上传word、excel文件内容必须在纸张大小范围内(默认A4)</p>\n' +
        '        <p>2：内容超出，调整布局并更改纸张大小(页面布局-纸张大小)</p>\n' +
        '        <p>3：尽量上传.docx .xlsx格式文档</p>\n' +
        '    </div>\n' +
        '  </div>',

    data: function () {
        return {
            headers: { Authorization: '' }, //上传组件的头部token请求验证
            fileList: [],
            uploadData: [], //上传列表
        }
    },
    methods: {
        // 上传
        uploadUrl() {
            return  ctx+"file/uploadFile";
        },
        //文件上传之前的验证
        beforeAvatarUpload(file) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error("上传文件大小不能超过 10 MB！");
            }
            return isLt10M;
        },
        //上传文件
        handleAvatarSuccess(res,file) {
            const files = {
                uid:file.uid,
                fileName: res.data.fileName, //文件名称
                fileType: res.data.fileType, //后缀名.jpg
                fileSize: res.data.fileSize, //文件大小
                filePath: res.data.filePath,  //预览url
                url: file.url
            };
            this.uploadData.push(files);
            this.sendData();
        },
        //删除附件
        handleRemove(file) {
            for(var i = 0; i < this.uploadData.length; i++){
                if(file.uid == this.uploadData[i].uid || file.url == this.uploadData[i].url){
                    this.uploadData.splice(i,1)
                }
            }
        },
        //预览附件
        previewFile(file) {
            if(file.url){
                window.open(ctx+"upload/"+file.url, '_blank');
            }else{
                var url = file.response.data.filePath;
                window.open(ctx+"upload/"+url, '_blank');
            }
        },

        // 上传的附件
        getUploadData(){
            var data = {};
            data.fileList = this.fileList;
            data.uploadData = this.uploadData;
            return data;
        },
        //向父组件传值
        sendData(){
            this.$emit('onchange',this.getUploadData());
        }
    }
})