আজকের ক্লাস টা মূলত আমাদের ফ্রন্টেন্ড এর javascript এর ফ্রেমওয়ার্ক vue.js নিয়ে । vue.js framework টা অনেক লাইট ওয়েট highly customizeable এবং resourcefull.

key components

\==============

---Install process

---tailwind css install and configure

---কিভাবে আমরা আমাদের vue project এ tailwind css install করবো।

--project file & folder

তো চলুন শুরু করা যাক প্রথমেই আমরা আসি install নিয়ে ।আমরা vue এর official website এ যদি আমরা যায় প্রথমেই আমরা আসবো install এ।

-আমরা আমাদের প্রজেক্ট ফোল্ডার এ কমান্ড লাইন ওপেন করে npm init vue@latest এই কমান্ড টি রান করব।

-এরপর আমাদের প্রজেক্টের নাম,এবং অন্যান্য বিষয় গুলো আমরা vue এর সাথে install করব কি না সে বিষয়ে ask করবে তো আমরা যেহেতু প্রথম install করছি তাই শুধু প্রজেক্টের নাম দিয়ে বাদ বাকি সব No করে দিব।

-এবার আমাদের প্রজেক্ট তৈরি হয়ে যাবে এবং আমাদের সাজেশন আসবে আমরা cd করে আমাদের তৈরি কৃত প্রজেক্টের ভিতরে ঢুকবো এবং সেখানে আমাদের npm install and npm run dev কমান্ড রান করব।

-npm install

-npm run dev

-npm run dev কমান্ড দিলে আমাদের প্রয়োজোনীয় css & js file গুলো রেন্ডার হয়ে যাবে ব্রাউজার এ।এবং আমাদের প্রজেক্ট ও রেডি হয়ে যাবে ব্রাউজারে ওপেন করার জন্য।সেখানে একটি url আসবে আমরা সেখানে ক্লিক করলে আমাদের ব্রাউজারে আমাদের প্রজেক্ট টি ওপেন হবে।

-ব্যাস আমাদের vue install করা complete এবার আমরা আমাদের প্রয়োজনীয় css framework install করে নেব।

কিভাবে আমরা আমাদের VUE PROJECT এ TAILWIND CSS INSTALL করবো।

\=======================================================

-প্রথমেই আমরা ব্রাউজার এ যদি সার্চ করি tailwind vue তাহলে আমরা tailwind এর official website পাবো এবং সেখান থেকে আমরা install করে নিতে পারবো।তো চলুন install করি।

-আমরা যেহেতু আমাদের প্রজেক্ট তৈরি করে ফেলেছি এবার আমরা আমাদের অন্য কমান্ড গুলো দিলেই হবে নতুন করে প্রজেক্ট তৈরি করা লাগবে না।

-npm install -D tailwindcss postcss autoprefixer

-npx tailwindcss init -p

--ব্যাস আমাদের tailwind css framework install করা complete

-এবার আমাদের configuration করে নেব আমাদের tailwind.css.config file থেকে।আমাদের content: কে replace করে আমরা

content: [

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}",

],

এই কোড সেখানে paste করবো।

--ব্যাস আমাদের প্রজেক্টে tailwind css ও install করা complete এখন আমরা tailwind css এর বিভিন্ন ক্লাস আমাদের style এ ব্যাবহার করতে পারব।

PROJECT FILE & FOLDER

\=====================

এবার আসি আমরা আমাদের প্রজেক্টের বিভিন্ন ফাইল পরিচিতি নিয়ে ।

প্রথমেই যদি আমরা আমাদের প্রজেক্ট ওপেন করি তাহলে আমরা নিচের ফাইল এবং ফোল্ডার গুলো দেখতে পাবো।

default ভাবে আমাদের ফোল্ডার এর structure এমন হবে পরবর্তিতে আমর আমাদের বিভিন্ন componenets files and folder তৈরি করব এখানে।

-প্রথমেই আসি .vscode নিয়ে এটা আমাদের vs code এর default configuration file এখানে আমাদের প্রয়োজনীয় কোন কাজ নেই।

-এর পরের ফোল্ডার হলো আমাদের node_modules এখানে আমাদের node এর ফাইল গুলো আছে আমরা যে npm install দিয়েছিলাম সেই কমান্ডের folder & files গুলো এখানে রয়েছে এখানেও আমাদের প্রয়োজনীয় কোন কাজ নেই।

-এরপর আমাদের public folder এখানে আমাদের website এর faveicon রয়েছে আমরা চাইলে আমাদের টা সেখানে দিয়ে দিব।

-এরপর আমাদের assets folder এখানে আমাদের default css file and logo আছে।আমরা আমাদের প্রয়োজোন মত এখানে add করব।

-এরপর আমাদের components folder এখানে আমরা আমাদের তৈরিকৃত বিভিন্ন coomponents রাখবো।components কি ,কিভাবে কাজ করে সেটা চাইলে আপনি সার্চ করে জানতে পারেন।

-এবার আমাদের সব থেকে মেইন ফাইল টা হলো আমাদের App.vue file এখানেই আমাদের প্রয়োজনীয় বিভিন্ন components,সাইট এর মেইন structure একান থেকেই গঠন হবে।

বিভিন্ন ধরনের কোড ব্লক আমরা এই ফাইল এ import করে সেগুলোকে এই ফাইল এর মধ্যে ব্যাবহার করব।

চলুন দেখে নেই।

আমরা যদি app.vue file এর মধ্যে যায় সেখানে আমরা আমাদের অন্য ফাইল এর কোড গুলো এখানে import করা দেখতে পাবো।

<script setup>

import HelloWorld from './components/HelloWorld.vue'

import TheWelcome from './components/TheWelcome.vue'

</script>

এখানে

-HelloWorld

-TheWelcome

এই দুইটা আমাদের নিজের দেওয়া ট্যাগ আমরা চাইলে এটা অন্য নাম ও দিতে পারি তবে মনে রাখবেন এটা আমার কোডের সাথে মিলিয়ে নাম দেওয়া ভাল যাতে করে আমাদের মনে থাকে আমরা কেন এটা ব্যাবহার করেছি।

এবং এই দুইটা ট্যাগ app.vue file এ ব্যাবহার করার জন্য আমরা একটা template tag এর মধ্যে নিয়ে ব্যাবহার করব।

<template>

<header>

<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

<div class="wrapper">

<HelloWorld msg="You did it!" />

</div>

</header>

<main>

<TheWelcome />

</main>

</template>

এখানে একটা ট্যাগ <HelloWorld msg="You did it!" /> এই msg আমরা কোথায় পেলাম এটা একটা অবশ্যয় প্রশ্ন বিগিনারদের তো চলুন দেখে আসি।

-আমরা যদি components folder এর মধ্যে HelloWorld.vue ফাইল এ যায় সেখানে দেখবো আমাদের একটা components তৈরি আছে।

যেটা আমাদের এই ফাইল এ props আকারে পাঠানো হয়েছে।

<script setup>

defineProps({

msg: {

type: String,

required: true

}

})

</script>

আর এর html form টা হলো।

<template>

<div class="greetings">

<h1 class="green">{{ msg }}</h1>

<h3>

You’ve successfully created a project with

<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +

<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.

</h3>

</div>

</template>

<h1 class="green">{{ msg }}</h1>

msg নামের props আমরা এই ডেটা কে পাঠিয়েছি।

যা আমরা আমাদের তৈরিকৃত ট্যাগের মধ্যে msg আকারে ব্যাবহার করতে পারি।

\===ঠিক ওপরের এই বিষয়ের মতোই আমাদের অন্যান্য ফাইল গুলোর ডেটা ব্যাবহার হচ্ছে,।

মোটামুটি আমাদের ফাইল,ফোল্ডার এবং কোডের বিস্তারিত এটা ।এবার যদি আমরা আমাদের app.vue file এ আমাদের প্রয়োজন কাস্টম কোড করতে চাই তাহলে আমরা নিচের প্রসেস অনুযায়ী কাজ করব।

<template>

<h1 class="text-red-500 font-bold">

{{ mss }}

</h1>

</template>

এখানে আমরা template tag টা নিয়ে আমাদের তৈরি কৃত props পাঠিয়ে ব্যাবহার করছি।

<script>

export default {

name:'App',

data() {

return {

mss:"Hello and welcome to vue family!"

}

},

}

</script>

এভাবে আমরা প্রাথমিক ভাবে ডেটা পাঠাতে পারি।

আশা করি vue.js এর প্রাথমিক ফাইল,ফোল্ডার স্ট্রাকচার বুঝতে পেরেছেন এবং কিভাবে কোড কাজ করে সেটা সম্পর্কে জানতে পেরেছেন এবং কাস্টম ভাবে আপনি কিভাবে কোড ব্লক তৈরি করবেন সেটা ভাল ভাবে জানতে পেরেছেন।

so happy learning

keep practice

___RAKIBUL ISLAM___