We start our journey with three simple steps:
The first step: install differents tools to develop in Vuejs.
The second step: implement an application.
The third step: Deploy the application on the cloud.
Ok, We are ready to action we start with the task obtain all the tools to achieve working in our environment. Mainly we need Vuejs also the client Vue and one IDE to programing. In this case, I prefer Visual Code as IDE to develop.
Execute the following command from a terminal:
$ npm install vue
Now we should add the client vue also from a terminal:
$ npm install -g @vue/cli
Also, we need a reliable tool for debugging the app. One excellent option is the extension Vue.js devtools of browser Chrome we can download this link: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en.
Finally, to finish the first step, we download the IDE Visual Code to programing. Here the link https://code.visualstudio.com/download.
In this step, we create the application with the client, and then we should type the following command in the terminal:
$ vue create appvue
The client will generate all structure our project in Vuejs, in the process, we shoulds chose different options to complete the initial setup of the application.
After that, We deep in develop the app. The main idea is developing CRUD (Create, read, update, and delete); more specifically, we programing an app to a pet store, where we have a list of pets, and we can create new pets, also update and delete.
We have the structure of our project in Vuejs. I will explain how is it built. Then this way, I summarize the construction of the project.
What is this about, the project has four folders:
1) dist: contains compiles for production.
2) node modules: Where are all dependencies of the project.
3) public: Here is the file index.html.
4) src: Folder as contains different folders of the project, for example :
Assets: images of the app.
Components: components create in-app.
Router: handle navigation of the application.
Store: It serves as a centralized store for all the components in an application.
Views: This folder holds views.
The pet store we can input new members and update your data also watch the list complete of pets, and delete members. In our project, we have in the folder views two components home.vue and about.vue these views show the full functionality of the pet store.
The more important component is home.vue because this has all the logic of our program. Now I will explain this component in deep. All component vue has three parts: the first we are coding the view of the page; that is where we put code HTML between tags . The second is where we mainly develop our methods and variables, and the code is between tags
Vue.js is a great framework but so is React. So why did I choose to go to Vue.js rather than React? In this video I discuss why I think Vue.js is the better option over React.
In this Vue.js tutorial, how easy it is to get started with Vue Router and we'll setup a simple SPA that will show some information about popular cryptocurrencies. We'll call it "Crypto Info". It will have a few pages and link those pages using vue-router.
There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.