VueJS වලින් වෙබ් අඩවි හදමු

READ IN 4 MINS

VueJS කියන්නේ Advanced Javascript Web Application Development Framework එකක්. මූලිකව පරිශීලක අතුරු මුහුණත් නිර්මාණය කරන්න පාවිච්චි කරන්න පුලුවන් ගොඩක් හොඳ framework එකක්.

ඒ වගේම මේකේ පටන් ගැන්ම බැලුවොත් 2014 අවුරුද්දේ තමා මේක මුලින්ම එළියට එන්නේ. ඒ වගේම මේක හදල තියෙන්නෙත් google එකෙන්ම තමයි.

ඉතින් ඔයාල Angular Article එක කියවලා තියෙනවා නම් ඔයාට මේක තේරුම් ගන්න ගොඩක් ලේසී..

මම නම් කියන්නේ ඒ Article එකත් කියවන්න මොකද දෙකේම තියෙන කරුණු එක හා සමානයි හුඟක් වෙලාවට. හැබැයි මේ දෙකේ පැහැදිලි වෙනසක් තියෙනවා.

හැබැයි මේකෙදි නම් TypeScript යොදා ගන්නේ නෑ. මේකෙදි මූලික වශයෙන්ම code කරන්නෙ HTML, CSS, JavaScript කියන 3ත් එක්ක. ඒ හින්දා TypeScript දැනුමක් ඕනෙ නැහැ ලොකුවට.

ඒ වගේම මේකේ කොටස් දෙකක් නෑ Angular වල වගෙ. VueJS විතරයි.

දැන් බලමු Vue app එකක් නිර්මාණය කරගන්නේ කොහොමද කියලා.

මුලින් CMD එක විවෘත කරන් npm install -g @vue/cli කියලා type කරල enter කරන්න.

ඉන්ටර්නෙට් කනෙක්ට් කරන් ඉන්න.  ඊට පස්සෙ download වෙල ඉවර උනාම, Vue create myapp කියලා type  කරල enter කරලා නිර්මාණය කරගන්න පුලුවන්.

ඒ වගේම vue ui කියන command එක හරහාත් නිර්මාණය කරගන්න පුලුවන්. එතකොට ඔයාලට UI එකක් browser එකෙ display වෙනවා. ඒකෙන් ඔයාලට තේරෙන විදිහට  Project එකක් හදාගන්න පුලුවන්. Vue create myapp or vue ui කියන command දෙකෙන් එකක් පාවිච්චි කරන්න.

ඊට පස්සෙ cmd එකේ display වෙන හැම එකක්ම default දෙන්න. දැනට ඉගෙන ගන්න නිසා එහෙම කරන එක ලේසී..

Project එක හැදිලා ඉවර උනාම ඒක cmd එකේ display වෙයි.

ඊට පස්සෙ cd myApp කියලා type කරලා project එක locate කරගෙන npm run serve කියන command එක දීලා project එක run කරගන්න.

ඒකත් node server එකේ run වෙලා ඉවර උනාම browser එක open කරගෙන http://localhost:8080 කියලා type කරලා run කරගන්න.

Angular වලට වඩා මේකේ file type එකේ වෙනස්කම් කිහිපයක් තියෙන්වා. ඔයාලට මේකත් visual studio code එකෙන් open කරගන්න.

Src folder එකේ component කියන folder එකේ HelloWorld.vue හා වෙනම තියෙන app.vue කියන files දෙක edit කරලා ඔයාලට ඕනෙ output එකක් ගන්න පුලුවන්.

ඉතින් ඔයාලට මේ IDE එකත් එක්ක component drag & drop කරන්න පහසුකමක් නැති උනාට ඉගෙන ගන්න කෙනෙක්ට මේක හොදටම හොදයි..

Angular, React වගේ framework වල code කරන්නේ ‘ .html ‘ ‘ .css ‘ ‘ . js ‘ ‘ .ts ‘ කියන විවිධාකාර file types තුල උනාට, vue වලදී ‘ .vue ‘ කියන තනි file එක තුල html, css & JavaScript කියන සියල්ලම code කිරීමක් සිදුවෙන්නේ. ඒ නිසා මේක ඇතුලේ තියෙන files හොයාගන්න ලේසී වගේම  එක කොටසකට අදාළ codes එක තැනක තියෙන නිසා පිරිසිදුයි වගේ පෙනුමක් තියෙනවා. ඒ වගේම ඔයාට කැමතිනම් html, css, js වලට වෙන වෙනම files භාවිතා කරලා කේතනය කරන්න පුලුවන්.

ඒ වගේම Angualr හා VueJS යොදාගෙන එකම project එකක් නිර්මාණය කළ විට angular node Server එකේ execute වෙන්න යන කාලයෙන් භාගයක වගේ කාලයක් වගේ තමයි යන්නෙ . මේකට ලොකුම හේතුව තම project එක තුළ තිබෙන files ප්‍රමාණය අඩු වීම.

රැල්ලට Angular, React හොදයි කියලා ඒවම අත්හදා බලන්නෙ නැතුව මේකත් අත්හදා බලන්න. මේක ගොඩක් සරලව තේරුම් ගන්න පුලුවන්..

ඉතින් ඔයාලා මූලික වෙබ් පිටුව සකසා ගත්තා නම් එතනින් එහාට ඔයාලට මේක ටිකක් advanced විදිහට හදාගන්න ආසනම් ඒ සඳහා නිර්මාණය උනු ගොඩක් node module තියෙනවා. ඔයාලට ඒවා download කරගෙන ඔයාලගෙ project එකේ ඉතාමත් අඩු code ගණනකින් ඒවා පාවිච්චි කරන්න පුලුවන් වගේම සාමාන්‍ය විදිහට කේත ලියලා භාවිතා කරන්නත් පුලුවන්.

Clean coding වලට කැමතිනම් මේක අත්හදා බලන්න..

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *