{"id":99,"date":"2025-05-03T16:30:36","date_gmt":"2025-05-03T16:30:36","guid":{"rendered":"https:\/\/www.webmobkey.com\/blog\/?p=99"},"modified":"2025-11-16T10:23:19","modified_gmt":"2025-11-16T10:23:19","slug":"vue-js-ile-hizli-ve-kolay-proje-olusturma-2","status":"publish","type":"post","link":"https:\/\/www.webmobdesign.com\/blog\/tr\/vue-js-ile-hizli-ve-kolay-proje-olusturma-2\/","title":{"rendered":"Vue.js ile H\u0131zl\u0131 ve Kolay Proje Olu\u015fturma"},"content":{"rendered":"\n

Vue.js, modern ve esnek bir JavaScript framework\u2019\u00fcd\u00fcr ve web uygulamalar\u0131n\u0131n geli\u015ftirilmesinde pop\u00fcler bir tercih haline gelmi\u015ftir. Bu blog yaz\u0131s\u0131nda, Vue CLI arac\u0131l\u0131\u011f\u0131yla nas\u0131l h\u0131zl\u0131 ve kolay bir \u015fekilde Vue.js projeleri olu\u015fturabilece\u011fimizi \u00f6\u011frenece\u011fiz.<\/p>\n\n\n\n

Ad\u0131m 1: Node.js Kurulumu: Vue.js projeleri olu\u015fturmak i\u00e7in ilk ad\u0131m, bilgisayar\u0131n\u0131zda Node.js\u2019in y\u00fckl\u00fc olmas\u0131 gerekti\u011fidir. Node.js, npm (Node Package Manager) arac\u0131l\u0131\u011f\u0131yla Vue CLI\u2019yi y\u00fcklememize olanak sa\u011flar. Node.js\u2019i resmi web sitesinden indirip kurabilirsiniz.<\/p>\n\n\n\n

Ad\u0131m 2: Vue CLI Kurulumu: Node.js kurulumu tamamland\u0131ktan sonra, Vue CLI arac\u0131n\u0131 npm arac\u0131l\u0131\u011f\u0131yla y\u00fckleyebilirsiniz. Terminal veya komut istemcisini a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n\n\n

\nnpm install -g @vue\/cli\n<\/pre><\/div>\n\n\n
Bu komut, Vue CLI\u2019nin k\u00fcresel olarak y\u00fcklenmesini sa\u011flar ve projelerinizi olu\u015fturmak i\u00e7in kullanabilece\u011finiz vue<\/code> komutunu kullanman\u0131z\u0131 sa\u011flar.<\/p>\n\n\n\n
Ad\u0131m 3: Vue Projesi Olu\u015fturma: Vue CLI ba\u015far\u0131yla y\u00fcklendikten sonra, yeni bir Vue.js projesi olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n\n\n
\nvue create my-project\n<\/pre><\/div>\n\n\n
Komutu \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra, Vue CLI sizden baz\u0131 se\u00e7eneklerle ilgili bilgiler isteyecektir. \u00d6rne\u011fin, projenizin temel yap\u0131land\u0131rmas\u0131n\u0131 se\u00e7ebilir veya ek \u00f6zellikler ekleyebilirsiniz. \u0130stedi\u011finiz se\u00e7enekleri belirleyin ve projenin olu\u015fturulmas\u0131n\u0131 bekleyin.<\/p>\n\n\n\n
Proje Geli\u015ftirme Sunucusunu Ba\u015flatma: Vue.js projesi olu\u015fturulduktan sonra, geli\u015ftirme sunucusunu ba\u015flatmak i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyin:<\/p>\n\n\n\n
Olu\u015fturulan projenin klas\u00f6r\u00fcne gidin:<\/p>\n\n\n
\ncd my-project\n<\/pre><\/div>\n\n\n
A\u015fa\u011f\u0131daki komutu kullanarak geli\u015ftirme sunucusunu ba\u015flat\u0131n:<\/p>\n\n\n
\nnpm run serve\n<\/pre><\/div>\n\n\n
Geli\u015ftirme sunucusu ba\u015flat\u0131ld\u0131ktan sonra, projenizi taray\u0131c\u0131n\u0131zda a\u00e7abilir ve geli\u015ftirmeye ba\u015flayabilirsiniz. Varsay\u0131lan olarak, projeniz http:\/\/localhost:8080<\/code> adresinde \u00e7al\u0131\u015facakt\u0131r.<\/p>\n\n\n\n
Sonu\u00e7: Bu blog yaz\u0131s\u0131nda, Vue.js projeleri olu\u015fturman\u0131n temel ad\u0131mlar\u0131n\u0131 \u00f6\u011frendik. Node.js ve Vue CLI\u2019nin kurulumuyla ba\u015flayarak, h\u0131zl\u0131 ve kolay bir \u015fekilde Vue.js projeleri olu\u015fturabilirsiniz. Vue.js\u2019in g\u00fc\u00e7l\u00fc \u00f6zelliklerini kullanarak modern ve etkileyici web uygulamalar\u0131 geli\u015ftirmeye ba\u015flayabilirsiniz.<\/p>\n\n\n\n
Bu yaz\u0131da anlat\u0131lan ad\u0131mlar, Vue.js projelerine ba\u015flamak i\u00e7in temel bir rehber sa\u011flamaktad\u0131r. Daha fazla Vue.js \u00f6zelli\u011fi ve derinlemesine bilgi i\u00e7in resmi Vue.js belgelerini ve kaynaklar\u0131n\u0131 ke\u015ffetmeyi unutmay\u0131n. Vue.js, geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131ran bir\u00e7ok ara\u00e7 ve k\u00fct\u00fcphane sunmaktad\u0131r.<\/p>\n\n\n\n
Umar\u0131m bu blog yaz\u0131s\u0131, Vue.js projeleri olu\u015fturmak isteyen geli\u015ftiricilere yard\u0131mc\u0131 olur. Ba\u015far\u0131l\u0131 ve keyifli Vue.js projeleri geli\u015ftirmenizi dilerim!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Vue.js, modern ve esnek bir JavaScript framework\u2019\u00fcd\u00fcr ve web uygulamalar\u0131n\u0131n geli\u015ftirilmesinde pop\u00fcler bir tercih haline gelmi\u015ftir. … Vue.js ile H\u0131zl\u0131 ve Kolay Proje Olu\u015fturma<\/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-99","post","type-post","status-publish","format-standard","hentry","category-web-tr"],"_links":{"self":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/99","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=99"}],"version-history":[{"count":1,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"predecessor-version":[{"id":336,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/99\/revisions\/336"}],"wp:attachment":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}