for a front-end dev in a complete hurry
Disclaimer
Here, I’m writing the bare-bone-basics to understand and start dev work on an already created vue.js project, but the official documentation is really good and covers a dozen fold more stuff. When you get some time, or if some confusion pops up, give some of the sections a read: https://v3.vuejs.org/guide/introduction.html
or from here: https://www.javatpoint.com/vue-js-template
First, Definitions
Vue.js is a JavaScript framework, it creates all the basic folders and organizes them so that the code is structured and maintainable
Vue CLI is the command line interface that lets us use terminal (or bash shell) commands to create the application, run the application, install plugins, etc. using ‘npm’ (node package manager)
Node.js is the runtime environment that handles all the backend JavaScript code you write and serves the vue application
Packages and JS libraries will help us by providing scripts that we can use to speed up the dev work. These, with their version numbers, are stored in the ‘package.json’ file and sometimes referred to as ‘dependencies’
MVC: the vue.js framework is an MVC framework; ie Model-View-Controller. This means some code files handle the behavior of the component (the model), the others handle the viewable front end UI components (the ‘view’), and others modify the component (the ‘controller’)
What it Looks Like
Most of the folders are self explanatory, but the ones I want to point out are:
The router: lists all the accessible pages and their URL paths
Views: these are the viewable pages themselves. In here you need to import the components the pages need.
Components: Pages contain components. Each front end object is a component that has a template that models the object, a script that controls some action or some ‘method’ to modify the object, and a style that's basically the css properties
App.vue: basically any code in here is applied globally, ie to the entire app
Assets: usually developers put images or logos or tables of styles here
Creating a Page
When creating a page you need to 1)declare it and create its path in the router folder 2)create the page (pageName.vue) in the views folder 3)make the components it will use in the components folder and tag/list these components inside the pageName.vue in the views folder
Creating a Component
Components can be as small as a title or a container, to as complex as an entire calculator. To create a component, create the componentName.vue in the component folder.
Within the <template></template> tags you can create the tags for divisions or sections. This can be image tags if its a div containing an image, link or header tags if its showing some text, components from external libraries etc. They can have arguments to specify what the div should do.
There are a lot of vue arguments that can be done directly on the tag of the divs (like v-on:click, onload, etc), you can read some of the documentation here
https://vuejs.org/v2/guide/syntax.html#Arguments
If you need the behavior of the component to change, write the JavaScript inside the <script></script> tags.
To change the styling of the component, add the attributes inside the <style></style> tags of its page.
The easiest way to learn the dev process is probably by following someone making a project. And youtube has got you covered!
Here’s an entire setup to deployment video sectioned off into chapters
https://www.youtube.com/watch?v=ZqgiuPt5QZo
I would probably watch the chapters 3, 4 and 6.
Overall, vue is pretty good at organizing the files and folders. It can need some getting used to, but eventually it will start becoming intuitive.
Happy developing :)
