Problem
Get started with Vue Js single page application using Vue CLI and how to add routers to Vue Js application or project.
Final output
After you finish reading the article you will be able to setup and run your first Vue Js single page application with routing.
Before getting started with Vue Js we should know about what is the use of it. So, the below definition is precisely describe about Vue Js feature and properties.
What is Vue.js?
Vue.js (commonly referred to as Vue; pronounced /vjuː/, like “view”) is an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications.
Vue also provides with amazing Graphical user interface to manage the application instead of using Command line.
Vue provides an official CLI for quickly 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. See the Vue CLI docs for more details.
First of all please make sure that you have node Js installed in your system by simply visit to Node Js official website and follow the instructions. To verify the node installation just write the below command inside command prompt.
node -v
So, Let’s get started by installing and setup Vue Js step by step.
Solution
1. Open the Command prompt, Enter the below instructions and hit Enter to install Vue Js globally.
npm install -g vue-cli
To confirm the Vue has been installed properly check by entering
vue --version
2. Open Vue CLI to manage Vue applications using graphical user interface (GUI).
Simply write vue ui in command prompt and hit Enter.
3. Vue CLI will be appear in localhost. Now lets create a project.
1. Go to Create tab and select the path where you want to create a project and click on Create a new project here.
2. Enter project name (Without spaces), select npm as package manager and hit Next.
3. Select Default preset and click Create project.
4. Awesome 🙂 you have successfully create a Vue Js project. and the project structure will be like that.
Finally let’s try to run our first Vue Js application using Vue CLI.
Simply go to Vue CLI then Tasks -> serve -> Run task and after successfully build the application click on Open app.
Note: If you wish to use routing later in the project then after creating the project instantly add routers, otherwise you may face difficulties.
Its very simple to add using Vue CLI.
Simply go to Vue CLI, Plugins -> click on Add vue-router -> continue.
That’s it 🙂
