Giri\u015f: Vue.js, modern ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript framework\u2019\u00fcd\u00fcr. Vue.js, bile\u015fen tabanl\u0131 bir yakla\u015f\u0131m sunar, bu da sayfalar\u0131n\u0131z\u0131 mod\u00fcler par\u00e7alara b\u00f6lebilece\u011finiz anlam\u0131na gelir. Bu blog yaz\u0131s\u0131nda, Vue.js kullanarak nas\u0131l sayfa olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim.<\/p>\n\n\n\n
Ad\u0131m 1: Proje Olu\u015fturma \u00d6ncelikle, Vue.js projesi olu\u015fturman\u0131z gerekiyor. Vue CLI (Command Line Interface) arac\u0131n\u0131 kullanarak kolayca bir projeyi ba\u015flatabilirsiniz. Terminalinizde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak yeni bir Vue.js projesi olu\u015fturun:<\/p>\n\n\n
\nvue create my-project\n<\/pre><\/div>\n\n\nAd\u0131m 2: Yeni Sayfa Bile\u015fenini Olu\u015fturma Vue.js\u2019de her sayfay\u0131 bir bile\u015fen olarak temsil ederiz. Yeni bir sayfa bile\u015feni olu\u015fturmak i\u00e7in src\/views<\/code> klas\u00f6r\u00fcne gidin ve yeni bir Vue bile\u015feni dosyas\u0131 olu\u015fturun. \u00d6rne\u011fin, About.vue<\/code> ad\u0131nda bir dosya olu\u015fturabilirsiniz.<\/p>\n\n\n\n\/src\/views\/Home.vue<\/p>\n\n\n
\n<template>\n <div class="home">\n <h1>Welcome to the Home Page<\/h1>\n <!-- Sayfan\u0131z\u0131n i\u00e7eri\u011fi -->\n <\/div>\n<\/template>\n\n<script>\nexport default {\n name: 'HomePage',\n \/\/ Sayfan\u0131z\u0131n i\u015f mant\u0131\u011f\u0131n\u0131 burada tan\u0131mlayabilirsiniz\n}\n<\/script>\n\n<style scoped>\n\/* Sayfan\u0131z\u0131n \u00f6zel stil tan\u0131mlamalar\u0131n\u0131 burada yapabilirsiniz *\/\n<\/style>\n<\/pre><\/div>\n\n\n\/src\/views\/About.vue<\/p>\n\n\n
\n<template>\n <div class="about">\n <h1>About Page<\/h1>\n <p>This is the About page content.<\/p>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n name: 'AboutPage',\n \/\/ Sayfan\u0131z\u0131n i\u015f mant\u0131\u011f\u0131n\u0131 burada tan\u0131mlayabilirsiniz\n}\n<\/script>\n\n<style scoped>\n\/* Sayfan\u0131z\u0131n \u00f6zel stil tan\u0131mlamalar\u0131n\u0131 burada yapabilirsiniz *\/\n<\/style>\n<\/pre><\/div>\n\n\nYukar\u0131daki \u00f6rnekte, About.vue<\/code> ad\u0131nda bir sayfa bile\u015feni olu\u015fturduk. Bile\u015fenin i\u00e7eri\u011fini <template><\/code> b\u00f6l\u00fcm\u00fcnde ve i\u015f mant\u0131\u011f\u0131n\u0131 <script><\/code> b\u00f6l\u00fcm\u00fcnde tan\u0131mlayabilirsiniz. \u00d6zel stil tan\u0131mlamalar\u0131n\u0131 <style><\/code> b\u00f6l\u00fcm\u00fcnde yapabilirsiniz.<\/p>\n\n\n\nAd\u0131m 3: Yol Y\u00f6nlendirmesi (Route) Sayfalar aras\u0131nda gezinmek i\u00e7in Vue.js\u2019in vue-router<\/code> paketini kullanabilirsiniz. Projenizin k\u00f6k dizininde, src\/router<\/code> ad\u0131nda yeni bir klas\u00f6r olu\u015fturun ve i\u00e7ine index.js<\/code> ad\u0131nda bir dosya olu\u015fturun. Ard\u0131ndan, a\u015fa\u011f\u0131daki kodu index.js<\/code> dosyas\u0131na ekleyin:<\/p>\n\n\n\nimport { createRouter, createWebHistory } from 'vue-router'\nimport Home from '..\/views\/Home.vue'\nimport About from '..\/views\/About.vue'\n\nconst routes = [\n {\n path: '\/',\n name: 'HomePage',\n component: Home,\n },\n {\n path: '\/AboutPage',\n name: 'About',\n component: Home,\n },\n \/\/ Di\u011fer sayfalar\u0131 burada tan\u0131mlayabilirsiniz\n];\n\nconst router = createRouter({\n history: createWebHistory(),\n routes\n})\n\nexport default router\n<\/pre><\/div>\n\n\nYukar\u0131daki kodda, About<\/code> bile\u015fenini sayfam\u0131z\u0131n rotas\u0131 olarak tan\u0131mlad\u0131k. '\/about'<\/code> rotas\u0131, About sayfas\u0131na y\u00f6nlendirecektir. Art\u0131k Vue.js projesinde hem “Home” hem de “About” sayfalar\u0131n\u0131z var. Bu \u015fekilde, Vue.js ile sayfa olu\u015fturma i\u015flemine devam edebilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"Giri\u015f: Vue.js, modern ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript framework\u2019\u00fcd\u00fcr. Vue.js, bile\u015fen … Vue.js ile Sayfa Olu\u015fturma: Bir Ad\u0131m Ad\u0131m Rehber<\/span>Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[51],"tags":[],"class_list":["post-102","post","type-post","status-publish","format-standard","hentry","category-web-tr"],"_links":{"self":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":1,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/102\/revisions\/335"}],"wp:attachment":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}