Vue 3 installation

By ukmodak | May 18th 2022 09:26:00 AM | viewed 18 times

There are four primary ways of adding Vue.js to a project:

  • Import it as a CDN package on the page
  • Download the JavaScript files and host them yourself
  • Install it using npm
  • Use the official CLI to scaffold a project, which provides batteries-included build setups for a modern frontend workflow (e.g., hot-reload, lint-on-save, and much more)

Vuejs Feature:

  • Component
  • Template
  • Blending
  • Rendering
  • Api Call
  • Routing

Installation Command

  • node -v
  • npm -v
  • d/location>npm install -g @vue/cli
  • vue --version
  • d/location>vue create projectName
  • d/location>cd projectName
  • d/location/projectName>vue clean

This will create the following folder and file:

  • node_modules
  • public
    • favicon.ico
    • index.html
  • src
    • assets
    • components
    • App.vue
    • main.js
  • .gitignore
  • babel.config.js
  • package.json
  • package-lock.json
  • README.md
  • d/location/projectName>npm run serve
  • d/location/projectName>npm run build

Run the following command:

d>projectName>vue add router
npm install @aacassandra/vue3-progressbar
npm install --save @kyvg/vue3-notification
npm install vue bootstrap bootstrap-vue
npm i --save @fortawesome/vue-fontawesome@prerelease
npm i @popperjs/core
npm i vue3-lazyload

add necessary images,css in the location:projectName\src\assets\

update index.html from projectName\public as follows:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>logo.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
	<meta name="path" data-path="<%= BASE_URL %>">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

update index.js from src\router as follows:

import { createRouter, createWebHistory } from 'vue-router'
/*import Home from '../views/Home.vue'*/
import HomePage from '../components/page/home/HomePage.vue'

const routes = [
  {
    path: '/',
    name: 'HomePage',
    component: HomePage
  },
  /*{
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },*/
  {
    path: '/bus',
    name: 'BusSearch',
    component: () => import('../components/page/bus/BusSearchPage.vue')
  },
  {
    path: '/launch',
    name: 'TrainSearch',
    component: () => import('../components/page/launch/LaunchSearchPage.vue')
  },
  {
    path: '/biman',
    name: 'BimanSearch',
    component: () => import('../components/page/biman/BimanSearchPage.vue')
  }
  
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

update main.js from src\ as follows:


import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import VueProgressBar from "@aacassandra/vue3-progressbar";
import Notifications from '@kyvg/vue3-notification'
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
import '@/assets/styles.css';

import { FontAwesomeIcon } from "@/plugins/font-awesome";

const options = {
  color: "#18AAF8",
  failedColor: "#874b4b",
  thickness: "5px",
  transition: {
    speed: "0.2s",
    opacity: "0.6s",
    termination: 300,
  },
  autoRevert: true,
  location: "top",
  inverse: false,
};
 



//library.add(fas);

createApp(App)
.component("fa", FontAwesomeIcon)
.use(VueProgressBar, options)
.use(Notifications)
.use(router)
.mount('#app');

Create the following folder in the location:projectName\src\components

  • block
  • config
  • layout
  • page

Create a page HomePage.vue in the location:projectName\src\components\page\home

<template>
       <div>
         <HomeLayout>
		            <div>
					
					<div class="bannerArea" align="center">
                          <a href="#"><img class="img-fluid" src="@/assets/images/landing_banner_3.png"></a>
                    </div>
                   <div class="highlight" align="center">

							 <div class="container">
								 
								   <div class="row">
											 
											<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
														   <ul class="hightLightDes">
															   <li> 5000 
																 <p>Bus Transsaction</p>
															   </li>
														   </ul> 
											 </div>

											 <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
															<ul class="hightLightDes">
															   <li> 2000
																	 <p>Launch Transsaction</p>
																</li>
														   </ul> 
											 </div>

											 <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
														  <ul class="hightLightDes">

															   <li>1000
																   <p>Air Transaction </p>
															   </li>
														   </ul> 
											 </div>
								  </div>
								 
							</div>

                    </div>

					<div class="gallary" align="center">

								 <div class="container">
									 <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 nopaddingLeft nopaddingRight">

												 <div class="row">
												   <h1 class="gallary_title_one">Introducing you to the Amar Ashon life</h1>
												   <h4 class="gallary_title_two">A one-stop solution for your travel needs</h4>

												   <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 nopaddingLeft">

													  <ul class="gallaryImage">
														  <li> <a href="#"><img   src="@/assets/images/bus_gallery.jpg"></a>
															  <p>Bus</p>
														 </li>
													  </ul>
												  </div>

												  <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4">

													  <ul class="gallaryImage">
														  <li> <a href="#"><img   src="@/assets/images/launch_gallery.jpg"></a>
															  <p>Launch</p>
														 </li>
													   </ul>
												  </div>
												   <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 col-xxl-4 nopaddingRight">

													  <ul class="gallaryImage">
															<li> <a href="#"><img  src="@/assets/images/air_gallery.jpg"></a>
															   <p>Air</p>
															</li>
													  </ul>
												  </div>

											 </div>

												   
									  </div>
								</div>

						</div>
						
						
						<div class="paymentPartner" align="center">
							<div class="container paymentPartnerPadding">
								 <div class="row__">
									 <div class="col-0 col-sm-0 col-md-2 col-lg-2 col-xl-2 col-xxl-2 desktopMobile">
									 </div>
									 <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 col-xxl-8 nopaddingLeft nopaddingRight">
										 <div class="row">
											  <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
												 <img class="img-fluid partner_image" src="@/assets/images/partner.png">
											   </div> 
										 </div>
									 </div>
									 <div class="col-0 col-sm-0 col-md-2 col-lg-2 col-xl-2 col-xxl-2 desktopMobile">
									 </div>
								</div>
							</div>
						</div>
						
				</div>
         </HomeLayout>
        </div>
</template>

<script>

 import HomeLayout from "../../layout/HomeLayout.vue"


  export default {
        data:()=>({
          }),
          components:{
           HomeLayout
          }
  };
</script>

<style scopped>

</style>

Create a layout HomeLayout.vue in the location:projectName\src\components\layout


<template>
<div class="headTitle">
    <div class="container">
      <ProgressBarBlock />
      <notifications width="100px" group="message1" position="top center"/>
      <notifications width="100px" group="message2" position="bottom right" />
      <div class="row">
         <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2 col-xxl-2">

                <div class="img-fluid logoAlign">
                   <a :href="baseUrl"><img class="logoSize img-fluid" src="@/assets/logo.png"></a>
                </div>
           
         </div>
        <div class="col-0 col-sm-0 col-md-8 col-lg-8 col-xl-8 col-xxl-8 desktopMobile">
		            	<div class="menuBlock">
						   <MenuBlock/>
					</div>
        </div>
        
       <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2 col-xxl-2">
                           <div class="language">
                               <select class="form-select lbg" aria-label="Default select example">
                                <option value="en" selected>English</option>
                                <option value="bn">Bangla</option>
                              </select>
                           </div>
      </div>
     <div class="col-4 col-sm-4 col-md-0 col-lg-0 col-xl-0 col-xxl-0 borderLine mobileOption">

                <div class="mobileOption">
                                <div class="ukMobileButton" type="button" @click="toggleMobile">
                                  <div class="line"></div>
                                  <div class="line"></div>
                                  <div class="line"></div>
                                  <div class="line"></div>
                                  <div class="line"></div>

                                </div>
               </div>
     </div>


      </div>
   </div>

<div class="mobileOption">
         <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 borderLine">

				<div class="menuBlock">
						 <div :class="mobileOnOff? 'active':'inactive'">
						   <MenuBlock/>
					   </div>
				</div>

        </div>
</div>


 <slot></slot>


<div class="footer" align="center">
    <div class="container paymentPartnerPadding">
         <div class="row">
             <div class="col-0 col-sm-0 col-md-2 col-lg-2 col-xl-2 col-xxl-2 desktopMobile">
             </div>
             <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 col-xxl-8 nopaddingLeft nopaddingRight">
                
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                         <p class="footer_para">© 2021 Hongbao. All rights reserved. </p>
                       </div> 
                
             </div>
             <div class="col-0 col-sm-0 col-md-2 col-lg-2 col-xl-2 col-xxl-2 desktopMobile">
             </div>
        </div>
    </div>
</div>


 </div> <!-- end header -->   

</template>

<script>

import ProgressBarBlock from "../block/ProgressBarBlock.vue";
import MenuBlock from "../block/MenuBlock.vue";

export default {
       data:() =>({
           mobileOnOff:false,
		   baseUrl:window.location.origin,
        }),
        components:{
          ProgressBarBlock,
		  MenuBlock,
         },
		 created(){
          /*this.$Progress.start();*/
		  /*this.$notify("Hello user!");*/
		 
        },
        methods:{
            toggleMobile(){  
                   	
                   return this.mobileOnOff = ! this.mobileOnOff;
            },
       }
  };
</script>

<style scoped>

</style>

Create a block MenuBlock.vue in the location:projectName\src\components\block

<template>
		  <ul class="menu">
			  <li><router-link to="/"><fa icon="home" class="menuIconcoloSize"></fa>Home</router-link></li>
			  <li><router-link to="/bus"><fa icon="bus" class="menuIconcoloSize"></fa>Bus</router-link></li>
			  <li><router-link to="/launch"><fa icon="ship" class="menuIconcoloSize"></fa>Launch</router-link></li>
			 <li><router-link to="/biman">Air</router-link></li>
		  </ul>
</template>
<script>
  export default {
  };
</script>
<style scopped>
</style>

Create a block ProgressBarBlock.vue in the location:projectName\src\components\block


<template>
        <vue-progress-bar></vue-progress-bar>
</template>

<script>

export default {
  mounted () {
    
  },
  created () {
          
  }
}
</script>

bONEandALL
Visitor

Total : 4242

Today :38

Today Visit Country :

  • United States