我开始了一个VueJS 2项目，我尝试导入一个我发现我需要的js并被称为Moon Map但是因为看起来VueJS正在使用ES6 javascript而我尝试导入一个ES5 javascript文件它赢了＃39; t编译，我收到错误。
这里的任何人都可以告诉我或向我展示在我的VueJS项目中导入ES5脚本的示例吗？
感谢。
编辑 - 仍然相关
我尝试在socialCircle中实现。
Home.vue
<template>
<div class="home">
<div class="wrapper">
<div class="box header"><div v-html="logo" class="logo"></div></div>
<div class="box content">
<div class="circle"></div>
<div class="socialCircle" v-for="social in socials">{{social.name}}</div>
</div>
<div class="box footer">Footer</div>
</div>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
logo: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="29.094 45.2 229.507 71.651"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(29.094 45.2)"><g transform="translate(0)"><path class="a" d="M40.978,28.779V53.461a75.52,75.52,0,0,1-12.461,1.2c-9.585,0-16.775-2.157-21.328-6.47C2.4,43.876,0,37.406,0,28.3,0,19.433,2.4,12.723,7.189,8.41S18.931,1.7,28.037,1.7a44.489,44.489,0,0,1,11.5,1.438v7.668a41.366,41.366,0,0,0-10.784-1.2,25.908,25.908,0,0,0-10.544,1.917,13.688,13.688,0,0,0-6.231,5.991c-1.438,2.636-2.157,6.47-2.157,10.784,0,6.47,1.438,11.023,4.313,14.139q4.313,4.313,13.659,4.313a26.045,26.045,0,0,0,4.313-.24V28.779Z" transform="translate(0 2.374)"/><path class="a" d="M21.838,9.287A4.877,4.877,0,0,1,20.4,5.693,4.521,4.521,0,0,1,21.838,2.1C22.8,1.14,24.234.9,26.151.9a7.115,7.115,0,0,1,4.313,1.2A4.877,4.877,0,0,1,31.9,5.693a4.113,4.113,0,0,1-1.438,3.595c-.959.959-2.4,1.2-4.313,1.2A7.115,7.115,0,0,1,21.838,9.287Zm-.24,45.77v-38.1H30.7v38.1Z" transform="translate(28.486 1.257)"/><path class="a" d="M28.5,56.314V0h9.106V56.314Z" transform="translate(39.796)"/><path class="a" d="M59.5,8.838a10.314,10.314,0,0,1,5.272,4.793c1.2,2.157,1.677,5.272,1.677,9.106V46.221H58.784l-.719-3.834h-.479a11.712,11.712,0,0,1-4.313,3.355,16.686,16.686,0,0,1-5.991,1.2,14.268,14.268,0,0,1-6.47-1.438,9.052,9.052,0,0,1-4.074-3.834A11.385,11.385,0,0,1,35.3,35.917c0-3.595,1.2-6.231,3.595-8.148s6.231-3.115,11.5-3.595l7.189-.719V22.018a8.568,8.568,0,0,0-.959-4.553,5.6,5.6,0,0,0-2.876-2.4,15.488,15.488,0,0,0-5.272-.719,35.751,35.751,0,0,0-5.032.479,34.006,34.006,0,0,0-5.272,1.2V9.077a34.578,34.578,0,0,1,5.751-1.2A54.772,54.772,0,0,1,49.918,7.4,26.926,26.926,0,0,1,59.5,8.838ZM54.231,39.511a10.8,10.8,0,0,0,3.355-2.4V28.967l-6.231.479c-2.4.24-4.074.719-5.272,1.677a4.469,4.469,0,0,0-1.677,3.834,5.059,5.059,0,0,0,1.438,3.834,5.858,5.858,0,0,0,4.313,1.438A12.172,12.172,0,0,0,54.231,39.511Z" transform="translate(49.291 10.333)"/><path class="a" d="M52,7.879h7.668l.719,4.074h.479A14.274,14.274,0,0,1,65.9,8.6a18,18,0,0,1,6.231-1.2,13.509,13.509,0,0,1,9.346,3.355c2.4,2.157,3.355,5.991,3.355,11.023v24.2H75.724V22.257c0-2.636-.479-4.313-1.677-5.512-.959-1.2-2.636-1.677-4.793-1.677a10.384,10.384,0,0,0-4.553.959A14.619,14.619,0,0,0,60.867,18.9V45.742H52Z" transform="translate(72.611 10.333)"/><path class="a" d="M97.454,7.6,87.15,37.794,77.085,7.6H67.5L81.4,45.7h2.636L78.284,61.039H87.15L106.561,7.6H97.454ZM84.993,59.841a3.406,3.406,0,0,1-1.438.479,2.026,2.026,0,0,1-1.438-.479c-.479-.24-.479-.719-.479-1.438a2.569,2.569,0,0,1,.479-1.438,3.406,3.406,0,0,1,1.438-.479,2.026,2.026,0,0,1,1.438.479c.479.24.479.719.479,1.438S85.473,59.6,84.993,59.841Z" transform="translate(94.254 10.612)"/></g><g transform="translate(185.174 54.397)"><path class="a" d="M87.015,37.557h8.627v2.4H83.9V22.7H95.4v2.4H86.776v4.553H94.2v2.4H86.776v5.512Z" transform="translate(-66.407 -22.7)"/><path class="a" d="M94.712,39.954V25.336H89.2V22.7h14.139v2.636H97.827V39.954Z" transform="translate(-59.006 -22.7)"/><g transform="translate(0 0)"><path class="a" d="M76.6,33.248V36.6h2.876V25.1Z" transform="translate(-76.6 -19.349)"/><path class="a" d="M86.048,35.4,79.1,24.617l-1.2,3.115,7.908,12.221h3.115V22.7H86.048Z" transform="translate(-74.785 -22.7)"/></g></g></g></svg>',
socials: []
}
},
created () {
this.$http.get('/static/json/data.json').then(function ({data}) {
this.socials = data.frontPage.social
console.log(this.data)
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.logo {
width: 250px;
margin: 15px;
}
.circle {
background: #fff url(/static/img/me.acf533d.svg) no-repeat -40px 20px;
height: 350px;
width: 350px;
border-radius: 50%;
}
.socialCircle {
background: #fff;
height: 25px;
width: 25px;
border-radius: 50%;
}
.wrapper {
display: grid;
grid-template-areas:
"header header header"
"content content content"
"footer footer footer";
color: #444;
align-items: stretch;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
display: flex;
align-items: center;
justify-content: center;
}
.header {
grid-area: header;
justify-content: flex-start;
height: 100px;
}
.content {
grid-area: content;
height: calc(100vh - 200px);
background: #333;
}
.footer {
grid-area: footer;
height: 100px;
background: #222;
}
</style>