如果我们使用vue-cli和webpack-simple来初始化一个vue项目，那么在编码时是否使用ES5或ES6？

Question

I am pretty new with vue and I was trying to play with Vue. The browser kept giving me this error Failed to compile.

./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/intro.vue Module build failed: SyntaxError: Unexpected token, expected , (13:10)   11 | import Vue from 'vue'
  12 | var Skill = Vue.component('Skill',
> 13 |   template: `
     |           ^
  14 |     <div class="skill">
  15 |       <li v-for="lang, in this.progLang">
  16 |         <ul>{{ lang }}</ul> @ ./src/intro.vue 8:0-102 9:0-115 @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I've tried doing data={...} but it gives me another error "data ... undefined" Is it probably because I am using the wrong vue-cli or ECMAScript? the one I am currently using is version 2.9.x

<template>
  <div id="intro">
    <h1>{{ name }}</h1>
    <p>{{ msg }}</p>
    <Skill></Skill>
  </div>
</template>
<script>


import Vue from 'vue'
var Skill = Vue.component('Skill',
  template: `
    <div class="skill">
      <li v-for="lang, in this.progLang">
        <ul>{{ lang }}</ul>
      </li>
    </div>
  `,
  data(){
      return {
        progLang: ['Java', 'Vue', 'React', 'C', 'Python', 'Shell', 'Perl'],
      lang: [{
              name: 'Bahasa Indonesia',
              proficiency: 'Native speaker'
            }, {
              name: 'English',
              proficiency: 'Proficient'
            }]
          }

  }

)
export default {
  name: 'intro',
  components: { Skill },
  data () {
    return {
      name: 'Foo Bar',
      msg: 'Hello everyone, my name is Foo and I am a software engineer.',
      experience: {
        intern: {
          workplace: 'Foo.co',
          period: '3nd Nov 2018 - 1st Jan 2020',
          resp: ['a',
                  'b',
                  'c']
        }
      }
    }
  }
}



</script>

<style>

#intro {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

What I am expecting is to print the list of progLang.

Answer 1

You're missing the object brackets around the second argument to Vue.component :

var Skill = Vue.component('Skill', { // <-- this bracket
template: `
<div class="skill">
  <li v-for="lang, in this.progLang">
    <ul>{{ lang }}</ul>
  </li>
</div>
`,
data(){