search

Akryum / meteor-vue2-example

Meteor & Vue 2.0 example
44 stars 22 forks source link

Install #3

Closed EMHmark7 closed 7 years ago

EMHmark7 commented 7 years ago

@Akryum , first, Happy end of this year & New Year!

Here is what I did to install this project. but it does not work. (empty browser): (only the page name gets in on the tab). Maybe you have a better way to install it.

Other behaviour: If I add Hello! in <body> before the <app> tag, it displays shortly at top left corner a fraction of second, then disapears and is displayed about 2 lines billow and a bit indented to the right. Nothing else appears.

If I copy my custom files from my previous project of version 1, it does not work, so I prefer to investigate first with your code only.

What I dit: In Git Windows PowerShell: git clone git@github.com:Akryum/meteor-vue2-example.git In DOS shell:

cd meteor-vue2-example
meteor-vue2-example>meteor npm install
meteor-vue2-example>meteor update --patch

meteor (app startup)

Your help would be very appreciated on this.

Thanks

Marc

EMHmark7 commented 7 years ago

@Akryum, not shure, but I do not see where you import MyButton in App.vue. It is not in the imports folder.

Akryum commented 7 years ago

It's here. It works as explained in the documentation.

Do you still have an empty browser? If so, what is the browser console output?

EMHmark7 commented 7 years ago

Thanks for reply! 1) About MyButton, I can find it in ui folder, but it is not explicitly imported in the code. So, I am surprised that it should work this way.

2) Console says : [HMR] Dev client disconnected akryum_vue-component-dev-client.js:136 You are running Vue in dev mode. Vue warn Error when rendering anonymous component modules.js:1203 <unavailable> modules.js:1116 ReferenceError: h is not defined app.js:154:71

In main.js, you refer to h in render: h =>h(app) I suppose it is the alias of createElement as documented in vue doc But I am not shure how to declare it or where it is declared.

Also, I suppose render: h =>h(app) refers to a syntax from a precompiler (Coffee or ES6,I do not know, I do not know if pure JS). Does the project include the right precompiler?

Marc

nizulzaim commented 7 years ago

You need to run meteor npm install --save vue@^2.1.6. Otherwise, it is not going to work.

EMHmark7 commented 7 years ago

Same behaviour.

In console:

Vue warn: Error rendering Anonymous component: moludles.js:1200
Uncaught ReferenceError: _h is not defined
    at Proxy.__vue_options__.render (app.js:154)
    at VueComponent.Vue._render (modules.js:3633)
    at VueComponent.<anonymous> (modules.js:2870)
    at Watcher.get (modules.js:2333)
    at new Watcher (modules.js:2325)
    at VueComponent.Vue._mount (modules.js:2869)
    at VueComponent.Vue$2.$mount (modules.js:6659)
    at init (modules.js:3181)
    at createComponent (modules.js:4733)
    at createElm (modules.js:4676)
modules.js:1114 TypeError: Cannot read property 'child' of null
    at isPatchable (modules.js:4792)
    at patchVnode (modules.js:5003)
    at Vue$2.patch [as __patch__] (modules.js:5132)
    at Vue$2.Vue._update (modules.js:2903)
    at Vue$2.<anonymous> (modules.js:2870)
    at Watcher.get (modules.js:2333)
    at Watcher.run (modules.js:2402)
    at flushSchedulerQueue (modules.js:2220)
    at Array.<anonymous> (modules.js:1152)
    at nextTickHandler (modules.js:1101)
logError @ modules.js:1114
[HMR] Dev client connected     akryum_vue-component-dev-client.js:133
Akryum commented 7 years ago

I updated the packages to vue 2.1.8, let me know if it's better.

Akryum commented 7 years ago

@MarcTe

About MyButton, I can find it in ui folder, but it is not explicitly imported in the code. So, I am surprised that it should work this way.

As explained in the doc, if you put a .vue file outside of imports, it will automatically register it as a global component.

ghost commented 7 years ago

Strange. Before you bumped a version, the project didn't work properly in Vue versions higher than 2.1.6. Meteor helper in the chat component was giving undefined as if it wasn't finding anything. What's more, code based on this project resulted with similar issue on my private projects too, until I explicitly set the Vue version to 2.1.6. Now you just bump it and it works again.

Was the messages: [] in data() the solution?

Akryum commented 7 years ago

I don't know. I didn't have any error before.

EMHmark7 commented 7 years ago

Sorry for delay, Got internet problem all day long, nobody was on duty at the ISP!

I reinstalled the project and it works now! It would be nice to know, besides having an updated project, how to update it if comes a new Vue version or other.

I do not know NPM enough to understand things, such as things discussed on this topic: Vue forum such as when to manually modify package.json or when add --save.

Now I will try to make d3 run on that.

Thanks for the help. You made my year (the ending one and hopefully my new one and your new one. Happy New Year!

What I dit: In Git Windows PowerShell: git clone git@github.com:Akryum/meteor-vue2-example.git In DOS shell:

cd meteor-vue2-example
meteor-vue2-example>meteor npm install
meteor-vue2-example>meteor update --patch        (it said it was already up to date)
Akryum commented 7 years ago

Thanks, happy New Year too! 🎉 The --save flag in the npm install --save vue@^2.1.8 command will tell npm to update the version string in the package.json for you. For example, when vue 2.2.0 will be released, update meteor with meteor update to check for potential updates to my vue/meteor packages, and use meteor npm install --save vue@^2.2.0 (here we add meteor to use the meteor version of npm, and ^ in the version number to allow the update/installation of newer minor versions starting from 2.2.0).