There are four primary ways of adding Vue.js to a project:
This will create the following folder and file:
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
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>
Total : 19502
Today :37
Today Visit Country :