Why does vue init remove {{mydata}} from my template fork?

I created a fork of the webpack-simple template.

In this template I defined the following vue single file component:

page1.vue

<template lang="jade">
  f7-page(hide-bars-on-scroll='')
    f7-navbar(back-link='Back', title='Page 1', sliding='')
    f7-block This is page 1.
      br
      | Data-binding {{mydata}}!
      p.red This text is 
       span red
      p.cursive This is 
        span cursive
</template>

<script>
export default {
  name: 'page1',
  data () {
    return {
      mydata: 'works'
    }
  }
}
</script>

<style lang="sass?indentedSyntax">
  .red
    span
      color: red

  .cursive
    span
      font-style: italic
</style>

As you can see, I have bound the string “works” to {{mydata}}.

However, if I download the template via vue cli like this…

vue init valnub/vue-framework7-webpack-template temptest
cd temptest
npm install
npm run dev

… then the following line:

| Data-binding {{mydata}}!

has changed to this:

| Data-binding !

What’s going on? How is it possible, that {{mydata}} exists in the template but after using vue cli it’s gone?

[LinusBorg]

our member egoist has made a tool similar to vue-cli, but also a bit more flexible, and it’s using EJS instead of handlebars (<% %>):

https://github.com/egoist/sao

That would mean your users have to install another CLI tool, but it works very similar and would get your going.

[bachi76]

Thanks a lot @LinusBorg, SAO indeed solves my immediate problem. Already created #546 though, feel free to close it (though the change still might be considerable given the probs it would solve 😃.