In this article we will learn about a progressive framework known as Vue. We will also learn about the basic concepts of Vue and how to create a new Vue project. We will also understand the basic concepts of Vue. This article is for the beginners to Vue but it is expected that you have knowledge of HTML, CSS and JavaScript for getting started with the Vue framework.
What is Vue?
As per Vue's documentation, Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
Installation
For creating a Vue project let's first setup the environment to create a Vue project if you already have the basic setup in your system then you can skip this step. We would require Node.js installed in our system so that we can execute the JS code.
Node.js Installation
Download Node.js from its
official website as per your operating system. Click on “Recommended for Most Users” to download the stable version. You can also install nvm for switching between multiple npm versions.
Npm includes a tool known as npx that runs the executable packages. Npx will help to create a react application in the directory that we run the command. We can create a new project by running the npx command which will also install the required dependencies. In simple words, npx is a package runner tool that’s included in npm.
To check the version of the node run the command
Node –v
To check the version of npm run the command
Npm -v
NVM
To download NVM visit the
link and download the nvm-setup.zip file.
Once the file is downloaded open the folder and run the file nvm-setup.exe file. Follow the steps and go through all the steps required for setup.
Click on the Next button and follow the steps required.
As you follow the steps you will finally come to the window asking for installation. Click on the install button to install your NVM setup.
Once the installation is complete, let's check for the versions of the node available in our system. To check that use the command
nvm list
This will show the list of all the installed versions of the node. Currently, in my system, only one version is installed that is 10.15.1
To check for all the versions available run the command,
nvm list available
There are multiple ways for integrating Vue in our projects, we can follow as per our project requirements. Three ways are listed below to add Vue to our projects,
Using CDN
We can add the script tag in our development environment and start
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
If we want to use the CDN approach in our production environment then we can add the script
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
Using npm
To install Vue using npm we need to use the command
npm install vue@next
Using is approach when we want to build large scale applications as webpack or Rollup module bundlers can nicely be paired with it.
Using CLI
For using this approach, we need to have the Node.js installed in our system. We will be using this approach to create our application. Let's start installation of Vue-cli in our next section.
Installing vue-cli
As per Vue documentation, Vue-cli provides quick scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds.
Command to install Vue-cli
npm install -g @vue/cli
To check the version of Vue run the command where the flag “V” stands for version. We can also use –version flag instead of –v.
vue – V
By running the command, we are able to get the version of Vue cli installed in our system, so now we have environment ready for creating our first Vue project. Let’s create our first Vue project.
Creating new Vue project
To create a new Vue project navigate to the directory in which we want to create the project. Open command terminal in that folder and run the command
vue create project-name
Here “project-name" is a variable where the user can provide the project name as required. In our case we have named the project as getting-started so instead of project-name we will provide getting-started. The command will look like,
vue create getting-started
As we run the command, a list of options will appear. There will be three options such as babel and eslint with version 2 of Vue, babel and eslint with Version 3 of Vue and manually selecting the features. Here we will select the latest version of Vue, that is Vue3. To select the options, use the up and down arrow keys. Click enter as your arrow points to the desired option.
As the project generation completes you will see a directory created with the project name as the name of the directory. Navigate to the directory using the command,
cd getting-started
Exploring the Project structure
The project created has the default project as shown in the image below,
Let’s try to understand the project structure. Main.js file is the entry point of the project that has the to create a Vue application. The Main.js file is as shown below,
Here it imports the CreateApp from the vue that is used for creating a new application. App is imported from the App file located in the src folder. Let’s have a look at the code of the App file.
Here the template section includes the html that will be viewed by the user. Scripts section includes the life cycle methods, variables and other logics used in the app, and at last the styling section includes the styles for the component. The approach that is generated is known as single file component.
Package.json file includes a JSON object that contains the dependencies required for our project, scripts used to run our project and other required project configurations.
Running the project
To run the project let’s not make any changes and see how the default project looks. To run the project let's run the command
Npm run serve
Run this command and wait for the project to compile successfully. As the project compiles successfully we would be able to see some message as shown below,
Visit the url http://localhost:8080/ to see our project running on development server. This will be the landing page of the default project that we created.
Try to create any changes in the App component’s template section such as adding any HTML tag or modifying the text in the template and save the file. The browser window will refresh automatically as we save the file and we will be able to see our changes in the browser.
Summary
In this article we learned about Vue framework and how to create applications using vue-cli. We also learnt about installing Node and NVM in our system to setup the development environment. We also tried to understand the basic structure of the Vue component file and the sections in the single file component. We also learned how to run the project in our system.