How to create a Vue.js application in 5 minutes?
12 November 2019
The popularity of Vue.js is making it a competitor to frameworks. It successfully conquers the hearts of junior front-end developers and people who just started learning front-end programming.
As a person who has started to learn front-end, you would like to practice and write a simple app. In this article, I want to show you how to build a simple Vue.js app in 5 minutes, similar to how I built the React.js app in one of the previous articles.
To create this app, you need to have a basic knowledge of all of the above. Basic understanding of Vue.js is helpful. You need to follow the instructions on my computer if you have a Node.js and yarn installed.
If you like to watch videos, check out this episode!
1. Install @vue/cli
The tool that I will install will make our start a lot simpler. We can create a ready to use application with all the necessary dependencies. I will use the following command to install the tool.
yarn global add @vue/cli
You can use this command if you prefer.
npm install -g @vue/cli
It will work in both cases You should see a screen after the installation is complete.
2. Create a project
It is easy to create a project with the help of the Vue CLI tool. Go to the folder where you want to create your app in the command line and then run the following command, where vueapp is the name of the project
vue create vueapp
You have the option of choosing a different name for your app. You can pick a preset and two other options after the command runs.
Press enter if I want to make it easy and not overcomplicious. The installation may take a few seconds. You will be able to run your project after you see a new vueapp folder, depending on the name you choose. Let’s do it
3. Start a project
After you have created a new project, you will see further instructions on what to do next. According to the instructions, we should go to the vueapp folder and then run it.
npm run serve
If you did. You should see the screen in your command line after loading.
If you want, you can change the port number of the app. To check out what’s inside our project, we need to open the browser and use the localhost address. You should see the next screen.
It seems our app works, so let’s create a new component and show it!
4. Create a new component
We want to open our app file in your favorite code editor. You can create a code inside an empty file.
template > h3 > Users : /h3> /template> script best node js course > export default name : ‘Users’
The component will be displayed in the browser. To remove Hello World from the App.vue file, you have to change the component. Your final code should look like this.
template > div id > Users> /div> /template> script > import Users from ‘./components/Users.vue’
If our changes are visible in the browser, it’s time to check. You should see the following content after reloading the app.
It seems like everything went well, now we are going to make a call.
5. Create an API call
I am ready to create a call to theAPI. I’m going to use a fake JSON Placeholder website. I will use the axios. The first thing I have to do is install axios, so I will use the following command to do that.
yarn add axios
npm install axios
If you did. After axios is installed, let’s import it into the Users component.
script > import axios from ‘axios’
Let’s take a look at how the data will be received as a response.
“id” is 1 and “name” is “Leanne Graham.” “username” is “Bret” and “email” is “[email protected]”. 556″, “city”, “ZIP code”, “geo”, “lat”
After I add the data function, I will save the response to the variable, and then I will create an actual call using the axios get method.
import axios from ‘axios’ and export default name, data, and users.
6. Display the data
It is time to use bootstrap to create a template. To update an index.html file, go to the public folder. The link to bootstrap styles can be found in the head section.
meta charset is “utf-8” and meta name is “edge”
I am going to create a template with a table in it. I will use v-bind:key to assign the key to each element.
div class is “container”, h3 is users, table class is “table”, tr is thead.
And voila! Our app is ready!
In this article, I created a simple Vue.js application. To create an app, I used a number of tools. I got an app with a list of users.
I hope you find this helpful and that you use it as a base for your first application training. If you feel more comfortable with this kind of video, you can watch it as a Youtube video.
Have a nice coding! Anna from Duomly
Related readings 📖
Which programming language should I learn?
8 CSS image filters with code examples
Why is it worth learning?