ভিউ জেএস সেটাপ এবং ইন্সটলেশন

ভিউ জেএস সেটাপ এবং ইন্সটলেশনঃ

mkdir Vue

cd Vue

touch index.html

index.html ফাইলে নিচের কোড লিখিঃ 

<!DOCTYPE html>
<html>
<head>
	<title>This is Vue Example:</title>
</head>
<body>

<div id="app">
	{{messege}}
	
	
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
	var a = new Vue({
		el: "#app",
		data: {
			messege: "Hello World!" 
		}

	});

</script>

</body>
</html>

আমাদের ফাইলে Vue Js লাইব্রেরী অ্যাড করার জন্য আমরা চাইলে Vue Js cdn অনলাইন লিংক (<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>) দিয়ে দিতে পারি নতুবা এই লিংকে(https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js) গিয়ে পুরো কোডটা কপি করে vue.js নামে সেভ করতে পারি index.html ফাইল যেই ডিরেক্টরিতে আছে সেখানে।

তারপর index.html ফাইল রান করুন ক্রোম ব্রাইউজারে।রান করার পর নিচের পেইজের মত দেখতে পাবেনঃ

ব্যাস, আপনার Vue Js এর ফার্স্ট প্রোগ্রাম সফলভাবে রান করলো।

এখন ক্রোম ব্রাউজারে Vue.Js devtools(https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) এক্সটেনশন অ্যাড করে নেই।

তারপর, index.html রিফ্রেশ করি। তাহলে ব্রাউজারের কর্নারে Vue Js এর আইকনটা দেখা যাবে আর ব্রাইজার আপনার Vue Js কোড ডিটেক্ট করতে পারবে। আইকনটা ক্লিক করলে এই লিখাটা দেখা যাবেঃ Vue.js is detected on this page. Open DevTools and look for the Vue panel.

এখন আমরা Inspect Element করে কনসলে ক্লিক করলে নিচের উইন্ডোর মত দেখবঃ

আবার Vue তে ক্লিক করলে নিচের উইন্ডোর মত দেখবোঃ

তারমানে আমাদের বানানো এপটা যে Vue Js এপ, সে এটা সহজেই ডিটেক্ট করতে পেরেছে। এবং আমাদের মেসেজটাও দেখাচ্ছে ডাটাতে।

এতোটুকু পর্যন্ত করলে আমাদের সেটাপ এবং ইন্সতলেশন মোটামুটি শেষ। এখন আমরা নিশ্চিন্তে আমাদের Vue Js এপগুলো রান করতে পারবো।

#এই পর্যন্ত আসতে কারো কোথাও সমস্যা হলে কমেন্টে জানাও।

Previousকন্টেন্টসNextডাটা বাইন্ডিং

Last updated