How to create Vue applications

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

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2 Then you can create the vue project named vue-routing-example

vue create vue-routing-example

After creating the project you can check whether your project running properly. Use the following command in your terminal

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

npm install vue-router --save

4 Now you have to add some code to main.js file to work routing

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

Your Home.vue file will have the following code

6 Now you can the following code to main.js to configure the routing of your application

const routes = [
  {
    path:'/home',
    component: Home
  },

  {
    path:'/about',
    component: About
  }
];

7 Now you can add the following code to App.vue to work routing

Now you check with following URLs
http://localhost:8080/home
http://localhost:8080/about