.Vue文件挂载CDN，以wangEditor为例

对于一般的Vue前端开发，建议直接在外网开发，很多包可以直接通过npm去install。但是，单位总有要求在内网进行开发的情况，且内网的镜像环境还没给配好，很多包导不进去。这时候就只能去用CDN挂载。我一开始在做的时候，发现网上的教程很多都是教学html文件怎么进行CDN挂载，即如下：

<script src="***CDN文件地址***"></script>

但很多时候，我们用脚手架搭建完，一般的前端页面都是views文件夹里的.vue文件，标准格式如下，即template、script、style三段格式：

<template>
    
</template>

<script>

</script>

<style>

</style>

这个时候要引入CDN，在script这个段引入就可以了，我以wangEditor这个富文本插件为例，去他的官网（wangEditor - 轻量级 web 富文本编辑器）下载CDN（wangEditor.min.js），我个人习惯是CDN都放在public里面

<template>
    <div>
        <!-- id="editor1"对应挂载方式EditorInit1 -->
        <!-- <div style="color:black;" id="editor1"></div> -->
        <!-- ref="editor2"对应挂载方式EditorInit2 -->
        <div style="color:black;text-align: left;" ref="editor2"></div>
        
    </div>
</template>


<script>
import E from '../../public/wangEditor.min.js'
export default {
    
    methods:{
        // WangEditor两种挂载方法，一种挂在id（EditorInit1），一种挂在ref（EditorInit2）

        EditorInit1(){
            const editor1 = new E ('#editor1');
            editor1.create();
        },
        EditorInit2(){
            const temp = this.$refs.editor2;
            const editor2 = new E (temp);
            editor2.create();

        },
    mounted(){
        //记得在生命周期mounted中加上咱们写的函数，这里用EditorInit1或是EditorInit2都可以
        this.EditorInit2();
        },

    }


}
</script>