In this article we will see how to create vue application with Vue CLI
1 First you install the VUE CLI in your computer. If you already have installed you can skip this step
|
1 2 3 |
npm install -g @vue/cli # OR yarn global add @vue/cli |
2 Then you can create the vue project named vue-routing-example
|
1 |
vue create vue-routing-example |
After creating the project you can check whether your project running properly. Use the following command in your terminal
|
1 |
npm run serve |
Then you can open the URL http://localhost:8080/ on your browser. Make sure your project is working properly
3 you can use following command to install the vue-router in your app
|
1 |
npm install vue-router --save |
4 Now you have to add some code to main.js file to work routing
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' Vue.config.productionTip = false Vue.use(VueRouter) const routes = [ ]; const router = new VueRouter({ mode: 'history', routes: routes }); new Vue({ router, render: h => h(App), }).$mount('#app') |
5 Now you can create the About.vue and Home.vue components
Your About.vue file will have the following code
|
1 2 3 4 5 6 7 8 9 |
<template> <p> I am at About </p> </template> <script> export default{} </script> |
Your Home.vue file will have the following code
|
1 2 3 4 5 6 7 8 9 |
<template> <h1> I am at Home </h1> </template> <script> export default{} </script> |
6 Now you can the following code to main.js to configure the routing of your application
|
1 2 3 4 5 6 7 8 9 10 11 |
const routes = [ { path:'/home', component: Home }, { path:'/about', component: About } ]; |
7 Now you can add the following code to App.vue to work routing
|
1 2 3 4 5 6 7 8 |
<div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <router-view> </router-view> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> |
Now you check with following URLs
http://localhost:8080/home
http://localhost:8080/about