Difficulties in understanding vue inner workings

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/

[yyx990803]

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]

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