javascript - 如果我们使用 vue-cli 用 webpack-simple 初始化一个 vue 项目，我们在编码时使用 ES5 还是 ES6？

Question

我对 vue 很陌生，我正在尝试使用 Vue。浏览器一直给我这个错误编译失败。

./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

我试过做 data={...} 但它给了我另一个错误“data ... undefined”可能是因为我使用了错误的 vue-cli 或 ECMAScript？我目前使用的是 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>

我期待的是打印 progLang 的列表。

标签： javascriptvue.jssyntax

Answer 1

您缺少第二个参数周围的对象括号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(){