how to install vue boiler plate from vite

 install vite

npm init vite

npm create vue@latrest

https://vueschool.io/lessons/creating-the-project-with-vue-cli-vue-cli-only

ides vs cde, ides,intellij ultimate, webstorm, jetbrains,sublime, text ++

win root

we have .gitignore

and pacakge.json -> it is javascript dependencies INSTALLAED VIA NPM

vite.config.js

vue plugin for vite

vite can be used for otherframeworks also in this it is vue

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [vue()],

})

==============

vite.config.js

@ =src 

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

import path from 'path'; // Import path as an ES module

// https://vitejs.dev/config/

export default defineConfig({

resolve: {

alias: {

'@': path.resolve(__dirname, './src'),

},

},

plugins: [vue()],

});

MAKE VS CODE BETTER

create jsconfig.json

{

"include":[

"./src/**/*"

],

"compilerOptions": {

"baseUrl":".",

"paths":{

"@/*":["./src/*"],

}

}

}

src directory where we write code 

npm install vue-router@4 --save

app.vue is single pag applicaiton

whatever we doing its reflected into this page

hwnever user visits about page, router-view renders the about vue

link between two pages using router-link or navigation

spa or single page applicaiton load what data changes instead of loading total page

spa make smaller requiests -> fetsh only what data changes

if we load what data changed -> make faster loading 

regular websites => fetch total application

acnhor tag refrsh total page, router-link not refreshtotal page

common pratice

router folder 

index.js

vue cli 

command line interface

whatever we wannn install npm pacakges, we cann cinstallusing this 

npm install -g@vue/cli

vue create vue-school-trip

babel gives lateste language featrues before hit the borwser

liner or formmater -> keep our code clean

router

select vue 3

use hiostory mode for router

error formater 

lint on save 

save this presets or configs for futiure projects no

router view renders the matched component

remaing all are like normal vue installation

====r