Difficulties in understanding vue inner workings #565

thewhitetulip · 2016-11-02T09:56:48Z

Note: this might sound arrogant, but this is a real issue, don't mean to to arrogant!

I have 0 experience in front end dev. There are a host of issues I have for getting started with Vue, despite the detailed and otherwise wonderful docs. I think Vue should have a "tutorial" like the Python tutorial, if you guys are busy to write it, I'll write it (on the lines of this https://github.com/thewhitetulip/web-dev-golang-anti-textbook/), I want a document which teaches vue.js with example. It is one thing to tell how to bind a JS variable to a <p> and how to use vue in general and how it works.

The docs just skip the essential "getting started with vue" part and go ahead teaching the basics, there are 0 docs about how to set up & explain the setup, the docs have the npm install thing, but npm is like magic to me, don't understand a thing about it. I would like to know what that npm does, or what the vue cli does, how things work, I read the docs for three days and yet I can't understand how vue works, do I import it? do I have it in a <script> tag? how do things work?

How exactly is the project run? what if I do not want to have a JS based server? how do I do that in vue? (I think this is an advanced topic, but since the docs don't tell about how to get started, it is difficult for newbies to front end dev like me to understand how to use vue and get started with the front end world which is full of js frameworks)

EDIT: I have begun writing a guide to teach VueJS for new comers https://github.com/thewhitetulip/intro-to-vuejs/

The text was updated successfully, but these errors were encountered:

ghost · 2016-11-02T11:31:16Z

Script tag example:

<body>
  <script src="vue.js"></script>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>

Npm is needed if you want to build more complex web (front-end) apps.
See https://docs.npmjs.com/

And this: https://github.com/lukehoban/es6features
(How the "import" works in JavaScript.)

Then: https://github.com/vuejs/vuex

More: http://webpack.github.io/

thewhitetulip · 2016-11-02T11:42:56Z

@writeee This might suffice if I go ahead and dive deep into the things, but don't you think we need a chapter to explain this in the bare minimum essentials in the docs itself?

You linked to the TODOmvc project, it doesn't have a <script> tag where vue.js is placed as src.

I tried running the basic example somewhat like what your comment says, I got an error that app declared but not used, any thoughts?

ghost · 2016-11-02T13:39:08Z

@thewhitetulip

About the error, try delete the "var app =", should be like this:

<body>
  <script src="vue.js"></script>
  <div id="app">
    {{ message }}
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>

TODOmvc? Do you mean the vuex?
uh......It needs more understandings of ES6, npm and a little basics of webpack.

And I commented earlier because I was confused, too.
I thought maybe helpful someway.

For the dosc thing, I don't know, not a contributor......

Please email [email protected] if I do not show up or the code above still not working.

chrisvfritz · 2016-11-02T18:18:50Z

@thewhitetulip Thanks for bringing this to our attention and sorry to hear you've been having issues getting set up with Vue. We try to help people get set up in the Getting Started section of the Introduction. What do you think went wrong in your case? Did you try the fiddle and it didn't work or some part of it didn't make sense to you?

yyx990803 · 2016-11-02T18:40:31Z

The installation page states:

Simply download and include with a script tag. Vue will be registered as a global variable.

The most basic working example is linked right at the beginning of the Introduction: https://jsfiddle.net/chrisvfritz/50wL7mdz/

thewhitetulip · 2016-11-03T02:02:41Z

That example is abstract! We need an example which we can download via npm and make changes to it and figure out what's up with the code. Jsfiddle is not helpful because it excludes most important aspects of npm and the backend setting up process it is just like an interpreter session and we are left wondering how to trigger the interpreter

thewhitetulip · 2016-11-03T04:38:44Z

We try to help people get set up in the Getting Started section of the Introduction.

This is what the intro tells me:

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

What it does not tell me is, what happens after I run each command, what does npm run dev mean, what does webpack mean, what folders are created after the init, what is the significance of the files/folders

What do you think went wrong in your case?

I started off reading the docs for almost a week to get a hang of vue, I understood few concepts and the syntax is clean. but the problem starts when I have to run any example. The only live example is on jsfiddle. A jsfiddle example isn't that great, we need some example which we can download and install(and edit) on our local machines. This is because I still don't understand how to use vuejs, I know the syntax but no clue about how to realistically use it in building an app. from jquery I know that jquery is to be included in <script> tag but there is no documentation where that is explained.

Did you try the fiddle and it didn't work or some part of it didn't make sense to you?

I wasn't able to get a sample vue project working, I cloned it and it worked, but when I edited it, it said app declared but not used and then the docs had taught me nothing related to that, so I wasn't able to figure that out, hence I came to raise this issue!

simplesmiler · 2016-11-03T11:45:12Z

@thewhitetulip give a look to "The Majesty of Vue.js 2", it appears to provide the kind of content you desire. Also feel free to ask questions on our chat and forum.

thewhitetulip · 2016-11-03T12:17:43Z

@simplesmiler I'll take a look, but don't you think that content like that should be a part of the docs? I know Angular has a nice getting started page where they explain the nuts and bolts starting with the import statements

simplesmiler · 2016-11-03T12:28:46Z

@thewhitetulip maybe the "Installation" page could use more love, but I don't think it is Vue's job to explain what npm and webpack are and how do they work, especially that they are not necessary to get you started.

LinusBorg · 2016-11-03T12:37:07Z

It would be a bit repetitive if every frontend framework explained Javascript modules and all that stuff, even though those things are not specific to the framework at all. That would be a huge wast eof resources to duplicate these explanations in every framework's documentation.

Angular2 might have to provide this because 1. they use typescript and 2. you can't even really use Angular without such a setup.

thewhitetulip · 2016-11-03T14:36:05Z

@LinusBorg I am sorry if I was not clear about my question. I do not want the npm details! I understand npm. My concern is about an easy way to getting started with vue.

When I said nuts and bolts I didn't mean that I expect basics of JS! I want to understand in the docs something like this.

vue init webpack

This initates a blank project. Go ahead and run npm dev run; it starts a server

Now edot the src/main.js and read it. The first linr is the import which'll define the namespace for Vue. We will use that class.

This is the template in index.html, we include vue.js etc
I don't want a jsfiddle example, I want to download and edit that example offline.

thewhitetulip · 2016-11-03T14:39:51Z

@simplesmiler the book is costly, minimum is 24$. I think that the book should really be free to download or a part of the documentation considering it give a considerable boost for newbies who want to run away from other frameworks which don't have a nice getting started guidelines.

My doubts and complaints might sound naive, but the thing is, it is about user acquisition.

For those who already know everything about Angular and frontend, it's unlikely that it they switch to vue and would care about the getting started docs. They'd just care about the actual vue syntax which is explained in the docs.

But for vue to gain new users who have no clue about front end development, there are two things which matter

Great getting started mechanism
Great community

it seems we have the second point, it's time we have the first.

LinusBorg · 2016-11-03T15:06:45Z

I want to understand in the docs something like this.

vue init webpack

This initates a blank project. Go ahead and run npm dev run; it starts a server

Now edot the src/main.js and read it. The first linr is the import which'll define the namespace for Vue. We will use that class.

This is the template in index.html, we include vue.js etc

So essentially your complaint is that this section should be a bit more verbose?

https://vuejs.org/guide/installation.html#CLI

I don't want a jsfiddle example, I want to download and edit that example offline.

Generally our philosophy is to start from the simplest usecases - which is in-browser use and can be sufficiently demonstrated with jsfiddle.

But you can simply install a template with vue-cli and copy the example code into it.

What we won't provide (for a lack of resources) is to provide repositories with every example as templates or something.

chrisvfritz · 2016-11-03T15:22:08Z

@thewhitetulip I think you may be making things more complicated than they need to be, possibly stemming from an assumption that for a real use case, Vue has to be "installed" somehow. This isn't true. You don't need vue-cli, NPM, or Webpack. These are only for an advanced workflow. Vue can just be included in a script tag, like jQuery - as is pointed out on the installation page. There's no magic hidden behind the JSFiddle examples.

If you want to download and edit an example offline, I'd start with vue init simple my-project, rather than going straight to the webpack template. This will just generate an index.html file for you.

yyx990803 · 2016-11-03T15:29:00Z

There is absolutely no need for npm/webpack/vue-cli to "get started" with Vue, in fact, none of the examples in the entire guide requires any of that. "The way to start with Vue" is exactly what is demonstrated in the linked jsfiddle - you can literally just copy and paste that fiddle into an HTML file with <script> and <style> tags and get it working. So your complaint that "jsfiddle is not helpful" seems to be a misunderstanding of how it works.

Vue docs are written with the assumption that the user has basic experience in frontend development. It is not our responsibility to thoroughly explain and teach the entire modern frontend development stack. We do briefly introduce npm/webpack/build systems in the later section of the guide, but it is the users' own responsiblity to familiarize themselves with these additional technologies (they have their own docs for a reason).

@chrisvfritz What we can probably do is more explicitly suggesting a proper learning path for absolute beginners at the start of the guide. ("Don't start with vue-cli, copy and paste this HTML and follow the guide...")

chrisvfritz · 2016-11-03T15:42:41Z

@yyx990803 Sounds good.

thewhitetulip · 2016-11-04T03:47:16Z

If you want to download and edit an example offline, I'd start with vue init simple my-project, rather than going straight to the webpack template. This will just generate an index.html file for you

@chrisvfritz Bingo. Had no way of knowing that from the docs!!

I think you may be making things more complicated than they need to be, possibly stemming from an assumption that for a real use case, Vue has to be "installed" somehow

I ain't, I followed the docs verbatim, everything I know to setup vue is from the installation page of vuejs.org; I, for one, have no clue how front end frameworks work and that's why I started with vue, because it is said to be new user friendly and has excellent docs

So your complaint that "jsfiddle is not helpful" seems to be a misunderstanding of how it works.

@yyx990803

yeah.

Vue docs are written with the assumption that the user has basic experience in frontend development

I do not know about that, I heard of vue because of Gitlab and the first thing I heard was the documentation, that vue has excellent docs. Now, the thing is, when a newbie(to frontend) like me is going to start front end dev, it'd be like React vs angular vs what not vs vue. from HN we hear that Vue has excellent docs and we start reading the docs and there is nothing in the docs which explains getting started, yes the jsfiddle is fine, but how'd I get started with building an app out of vue? From the installation page I felt that the vue init webpack was the only way to use vue and I was confused because of that.

There is absolutely no need for npm/webpack/vue-cli to "get started" with Vue, in fact, none of the examples in the entire guide requires any of that.

And neither does the guide explain that include vue.js in the <script> tag

@LinusBorg

I do understand the lack of resources, if you want me to do that I'll be happy to contribute, we can create a new repo under vuejs if you want

yyx990803 · 2016-11-04T14:18:04Z

Now, the thing is, when a newbie(to frontend) like me is going to start front end dev, it'd be like React vs angular vs what not vs vue.

I think that's exactly what is causing your frustration. Jumping directly into a framework is definitely the wrong way to start learning frontend stuff. You should start with the basics, understand how HTML, CSS and JavaScript work together without a framework before attempting other things.

When you say you "followed the docs verbatim", you probably misunderstood the installation page as steps to follow, when it's in fact listing different options of how to use Vue. The very first option says:

Simply download and include with a script tag. Vue will be registered as a global variable.

And you missed/didn't understand that. I don't blame you because you have 0 frontend knowledge, but blaming that on us seems unfair. Would you blame a high school math textbook for not first explaining how addition and subtraction works? While we can try to improve the doc for users with less experience, there has to be a baseline on what we assume the user already knows. After all, the doc is about explaining Vue itself, not about frontend development in general.

thewhitetulip · 2016-11-04T16:05:59Z

frustration

Nope, wasn't frustrated.

I am not blaming anyone, my apologies if I was sounding like that! I was just pointing out that how it feels for newbies to start using vue.

You should start with the basics, understand how HTML, CSS and JavaScript work together without a framework before attempting other things

Good lord I have tried that, but never went beyond the first AJAX call. http://github.com/thewhitetulip/Tasks/ I was trying with this, but didn't work, all the advice I got was "use some framework", ironically enough, I am not a fan of frameworks, I wrote a book to teach how to write webapps in Go without using a framework.

To be honest, I did follow the docs verbatim, at the middle it said "download it and use it" and at the bottom it showed me npm install, I assumed npm install was important.

I'll get started with the download and let you know. I just want to clear a doubt, if I write a tutorial, would you be interested in hosting it as a part of the official repository?

and thank you for the update!

* master: set correct runtime-only gzipped size scope version-specific pages update tagline in config to match homepage 2.0.5 _common.styl: unify #donate a font-family (vuejs#568) improve visibility of custom input components through the guide, fixes vuejs#563 update vue to 2.0.4 add code examples to components one-way data flow revise react comparison improve intro for absolute beginners (close vuejs#565) # Conflicts: # src/v2/api/index.md # src/v2/guide/comparison.md # src/v2/guide/components.md # src/v2/guide/computed.md # src/v2/guide/custom-directive.md # src/v2/guide/events.md # src/v2/guide/forms.md # src/v2/guide/index.md # src/v2/guide/installation.md # src/v2/guide/instance.md # src/v2/guide/list.md # src/v2/guide/migration-vue-router.md # src/v2/guide/migration-vuex.md # src/v2/guide/migration.md # src/v2/guide/mixins.md # src/v2/guide/reactivity.md # src/v2/guide/render-function.md # src/v2/guide/syntax.md # src/v2/guide/unit-testing.md # themes/vue/_config.yml # themes/vue/layout/index.ejs # themes/vue/layout/partials/main_menu.ejs

* 2.0-cn: set correct runtime-only gzipped size scope version-specific pages update tagline in config to match homepage 2.0.5 _common.styl: unify #donate a font-family (vuejs#568) improve visibility of custom input components through the guide, fixes vuejs#563 update vue to 2.0.4 add code examples to components one-way data flow revise react comparison improve intro for absolute beginners (close vuejs#565) # Conflicts: # themes/vue/_config.yml # themes/vue/layout/partials/main_menu.ejs

thewhitetulip · 2016-11-06T04:33:10Z

Take a look at this guys https://news.ycombinator.com/item?id=12882816

This is the reason the vue book should be a part of documentation! This guy to, is facing issues getting started. Not blaming, just pointing out :)
I'm happy to see that commits are being made!

- 添加贡献者展示页面 Merge branch '2.0' * 2.0: set correct runtime-only gzipped size scope version-specific pages update tagline in config to match homepage 2.0.5 _common.styl: unify #donate a font-family (vuejs#568) improve visibility of custom input components through the guide, fixes vuejs#563 update vue to 2.0.4 add code examples to components one-way data flow revise react comparison improve intro for absolute beginners (close vuejs#565) # Conflicts: # src/v2/guide/index.md # src/v2/guide/installation.md

thewhitetulip · 2016-11-14T16:40:34Z

https://scotch.io/tutorials/build-a-single-page-time-tracking-app-with-vue-js-introduction

This seems like a true resolution of this issue, I do not know if the docs point to it. @yyx990803

As raised in issue vuejs#565, added few more lines which would immensely help total new comers to front end. Also added about changing the delimiter, because I think the first page itself should contain the information to change the delimiter, so the need to do an internet search for it is saved.

* master: set correct runtime-only gzipped size scope version-specific pages update tagline in config to match homepage 2.0.5 _common.styl: unify #donate a font-family (vuejs#568) improve visibility of custom input components through the guide, fixes vuejs#563 update vue to 2.0.4 add code examples to components one-way data flow revise react comparison improve intro for absolute beginners (close vuejs#565) # Conflicts: # src/v2/api/index.md # src/v2/guide/comparison.md # src/v2/guide/components.md # src/v2/guide/computed.md # src/v2/guide/custom-directive.md # src/v2/guide/events.md # src/v2/guide/forms.md # src/v2/guide/index.md # src/v2/guide/installation.md # src/v2/guide/instance.md # src/v2/guide/list.md # src/v2/guide/migration-vue-router.md # src/v2/guide/migration-vuex.md # src/v2/guide/migration.md # src/v2/guide/mixins.md # src/v2/guide/reactivity.md # src/v2/guide/render-function.md # src/v2/guide/syntax.md # src/v2/guide/unit-testing.md # themes/vue/_config.yml # themes/vue/layout/index.ejs # themes/vue/layout/partials/main_menu.ejs

chrisvfritz added the question label Nov 2, 2016

yyx990803 closed this as completed in b11cf02 Nov 4, 2016

thewhitetulip mentioned this issue Nov 18, 2016

Update index.md #591

Closed

Peter-WF pushed a commit to Peter-WF/vuefe.github.io that referenced this issue Nov 18, 2016

improve intro for absolute beginners (close vuejs#565)

f53bcb1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Difficulties in understanding vue inner workings #565

Difficulties in understanding vue inner workings #565

thewhitetulip commented Nov 2, 2016 •

edited

Loading

ghost commented Nov 2, 2016

thewhitetulip commented Nov 2, 2016 •

edited

Loading

ghost commented Nov 2, 2016 •

edited by ghost

Loading

chrisvfritz commented Nov 2, 2016

yyx990803 commented Nov 2, 2016

thewhitetulip commented Nov 3, 2016

thewhitetulip commented Nov 3, 2016

simplesmiler commented Nov 3, 2016

thewhitetulip commented Nov 3, 2016

simplesmiler commented Nov 3, 2016 •

edited

Loading

LinusBorg commented Nov 3, 2016

thewhitetulip commented Nov 3, 2016

thewhitetulip commented Nov 3, 2016 •

edited

Loading

LinusBorg commented Nov 3, 2016 •

edited

Loading

chrisvfritz commented Nov 3, 2016 •

edited

Loading

yyx990803 commented Nov 3, 2016

chrisvfritz commented Nov 3, 2016

thewhitetulip commented Nov 4, 2016 •

edited

Loading

yyx990803 commented Nov 4, 2016 •

edited

Loading

thewhitetulip commented Nov 4, 2016 •

edited

Loading

thewhitetulip commented Nov 6, 2016

thewhitetulip commented Nov 14, 2016 •

edited

Loading

Difficulties in understanding vue inner workings #565

Difficulties in understanding vue inner workings #565

Comments

thewhitetulip commented Nov 2, 2016 • edited Loading

ghost commented Nov 2, 2016

thewhitetulip commented Nov 2, 2016 • edited Loading

ghost commented Nov 2, 2016 • edited by ghost Loading

chrisvfritz commented Nov 2, 2016

yyx990803 commented Nov 2, 2016

thewhitetulip commented Nov 3, 2016

thewhitetulip commented Nov 3, 2016

simplesmiler commented Nov 3, 2016

thewhitetulip commented Nov 3, 2016

simplesmiler commented Nov 3, 2016 • edited Loading

LinusBorg commented Nov 3, 2016

thewhitetulip commented Nov 3, 2016

thewhitetulip commented Nov 3, 2016 • edited Loading

LinusBorg commented Nov 3, 2016 • edited Loading

chrisvfritz commented Nov 3, 2016 • edited Loading

yyx990803 commented Nov 3, 2016

chrisvfritz commented Nov 3, 2016

thewhitetulip commented Nov 4, 2016 • edited Loading

yyx990803 commented Nov 4, 2016 • edited Loading

thewhitetulip commented Nov 4, 2016 • edited Loading

thewhitetulip commented Nov 6, 2016

thewhitetulip commented Nov 14, 2016 • edited Loading

thewhitetulip commented Nov 2, 2016 •

edited

Loading

thewhitetulip commented Nov 2, 2016 •

edited

Loading

ghost commented Nov 2, 2016 •

edited by ghost

Loading

simplesmiler commented Nov 3, 2016 •

edited

Loading

thewhitetulip commented Nov 3, 2016 •

edited

Loading

LinusBorg commented Nov 3, 2016 •

edited

Loading

chrisvfritz commented Nov 3, 2016 •

edited

Loading

thewhitetulip commented Nov 4, 2016 •

edited

Loading

yyx990803 commented Nov 4, 2016 •

edited

Loading

thewhitetulip commented Nov 4, 2016 •

edited

Loading

thewhitetulip commented Nov 14, 2016 •

edited

Loading