mobxjs / mobx-vue

🐉 Vue bindings for MobX
MIT License
475 stars 22 forks source link

Need boilerplate projects #24

Closed suenot closed 5 years ago

suenot commented 5 years ago

Need some start boilerplates vue with mobx-vue. I tried to put to work vue-cli 3.0.4 (vue 2.5.17) with mobx-vue 2.0.7 and mobx 5.5.0 with babel or ts and had unsolved problems with decorators:

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in data(): "Error: Decorating class property failed. Please ensure that proposal-class-properties is enabled and set to use loose mode. To use proposal-class-properties in spec mode with decorators, wait for the next major version of decorators in stage 2."

found in

---> <Object> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:587
vue.runtime.esm.js?2b0e:1737 Error: Decorating class property failed. Please ensure that proposal-class-properties is enabled and set to use loose mode. To use proposal-class-properties in spec mode with decorators, wait for the next major version of decorators in stage 2.
    at _initializerWarningHelper (initializerWarningHelper.js?ec94:2)
    at new ViewModel (ViewModel.js?b643:2)
    at VueComponent.data (App.vue?234e:7)
    at collectData (collectData.js?2679:8)
    at VueComponent.data (observer.js?3172:17)
    at getData (vue.runtime.esm.js?2b0e:3413)
    at initData (vue.runtime.esm.js?2b0e:3370)
    at initState (vue.runtime.esm.js?2b0e:3307)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:4624)
    at new Object (vue.runtime.esm.js?2b0e:4794)
logError @ vue.runtime.esm.js?2b0e:1737
kuitos commented 5 years ago

Thanks for your feedback! vue cli 3 doesn't support decorated class property out of box, u may need to add the proposal-class-properties plugin to babel configuration as the error message said.

suenot commented 5 years ago

Thanks, you really help me. With this babel.config.js vue-cli works with mobx-vue:

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}