一般情况下，不是前后端分离的项目，或者是传统的jquery导向的网站开发，使用到百度编辑器的功能，直接在html,跟随ueditor官网文档即可非常快速的引入开发引用，
但在前后端分离的项目中，跟前一种模式有一些差异，项目完结，总结一波：

需要记住两点：config.json  serverUrl 这两个东西很重要哦。。。

1.下载ueditor http://ueditor.baidu.com/website/ 把 ueditor包除了jsp之外，放入前端vue项目中的static文件夹当中(当然，遵循， “只要你喜欢，虾米都可以（违法的不可取哦）”，)
2.配置，其一是资源加载地址配置 ueditor.config.js 找到 window.UEDITOR_HOME_URL = '百度编辑器资源对应的文件夹路径，推荐项目根目录'，其二：config.json文件获取的url配置，要从服务端返回，这个可以用代理发请求，也可以直接配置 ueditor.config.js 当中的serverUrl为请求全路径，具体描述见配图

这个是直接配置。。。

这个有用代理的。。。

3.新建ueditor.vue组件，创建编辑器组件，实现复用，上代码 

<template>
    <div class="p-ueditor">
        <div ref="editorId"></div>
    </div>
</template>

<script>
    import '../../static/ueditor/ueditor.config.js'
    import '../../static/ueditor/ueditor.all.js'
    import '../../static/ueditor/lang/zh-cn/zh-cn.js'
    export default {
        data() {
            return {
                editor: null,
                id: 'editor' + new Date().getTime()
            }
        },
        props: {
            value: {
                type: String,
                default: null,
            },
            config: {
                type: Object,
                default: {},
            }
        },
        watch: {
            'value': function (val) {
                this.editor.setContent(val)
            }
        },
        methods:{
            resetContent () {
                this.editor.setContent('')
            }
        },
        mounted() {
            this.$nextTick(function f1() {
                // 保证 this.$el 已经插入文档
                this.$refs.editorId.id = this.id //创建动态id
                this.editor = UE.getEditor(this.id, this.config)
                this.editor.ready(function f2() {
                    this.editor.setContent(this.value)
                    this.editor.addListener("contentChange", function () {
                        const wordCount = this.editor.getContentLength(true)
                        const content = this.editor.getContent()
                        const plainTxt = this.editor.getPlainTxt()
                        const htmlCont = this.editor.getAllHtml()
                        // 编辑器内容有变动,通知父组件
                        this.$emit('input', { wordCount: wordCount, content: content, plainTxt: plainTxt ,htmlCont:htmlCont });
                    }.bind(this))
                    // editor初始化后操作
                    this.$emit('ready', this.editor)
                }.bind(this))
            })
        }

    }
</script>

4.引用组件，上代码

<template>
    <div>
        <u-editor ref="child" v-bind:value=defaultMsg v-bind:config=config v-on:input="input" v-on:ready="ready"></u-editor>
    </div>
</template>
<script>
    // 导入百度编辑器组件
    import UEditor from '@/components/ueditor.vue'
    export default {
        components: { UEditor },
        data: () {
            return {
                defaultMsg: 'test',
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 150,
                }
            }
        },
        methods: {
            input(obj){
                // 编辑器内容有变动，具体处理自行修改
                console.log(obj)
            },
            ready(){
                // 编辑器初始化后事件绑定
                // console.log('ueditor init')
            },
        }
    }
</script>

5.如果console有错误提示，请认真理解重复上述步骤，再有问题请留言
6.针对图片上传及图片回显是否成功的问题，请跟后端人员沟通后，仍然不成功，请再次留言，单图上传，在百度编辑器的源码是用的form传统提交，会有跨域问题，请修改为ajax请求，若需修改后的源码，请留言哦
7.码字完毕，收工。。。