What is Vue.js?
VueJs can be included in your HTML files via Cd you can use the following code for the same.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
However, I highly suggest you go the longer route and set up your project with npm and nodejs.
You can refer to the following article to install nodejs and npm on your system. Once you are done with that we can install Vue’s command line interface with the following command.
npm install -g @vue/cli
Or, if you have a Linux system simply add sudo before the command.
sudo npm install -g @vue/cli
That is pretty much it, easy wasn’t it. No we need to create a project and this is where it gets a little complicated but don’t worry just follow as I say.
Creating your first Vue.js project
Once your vue cli is installed, you can begin creating your first vue js project. It is as simple as typing the following command.
vue create theitstuff
Here, you can replace theitstuff with any name of your choice. You will then be greeted with the following message.
We will go with manually selecting features. Just hit enter and the next set up options will show up.
It has many options for our projects, but for now. We will simply go with Babel, Router, and Vuex. You can use arrow keys to go to a particular selection and space key to check uncheck options.
The cli will now ask you whether you wish to use history mode for the router. For now, just click on Y to allow the history mode. We will discuss this later in the routing section.
Next, the cli will ask you where should it place the configurations for various features. Just leave it to default and hit enter.
Finally, it will ask whether you want to save your currently chosen settings as a preset for future projects. Hit N for now. The cli will do some processing and downloading work. It should take no more than a minute or two at best. Once the processing is done. You should see similar output.
Our project has been set. Now, all we gotta do is start it. We will simply use the commands given at the end of the terminal screen. For this, we will cd into the folder and run npm run serve.
This will take some time but in under a minute, you should see the following output on your terminal.
You can see that the app is running at localhost port 8080. Now, we can open our web browsers to see our vue project. Simply browse to localhost:8080 and you should see something similar.
Congratulations, if you’ve followed all the steps you should see a webpage like the one above. You have successfully created your first vue project.
Vue.js is a modern-day framework for building websites and web apps. It is extremely easy to set up. Experience with nodejs and npm is greatly helpful in working with vue. We just created our first vue app and launched it in our browsers. I hope you have followed everything up until now. If you get stuck anywhere let me know in the comment section and I’ll be there for you. Also, check out other articles from this series where we learn more about vue.