Visual Studio Code nedir?

Microsoft tarafından geliştirilmiş açık kaynak kod editörüdür. Bir çok programlama dilini destekler ve Windows harici işletim sistemlerinde de çalışmaktadır.

Vue.js nedir?

Web uygulaması kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesidir.

Visual Studio Code kullanarak ilk Vue.js projemizi oluşturalım.

Visual Studio Code uygulamasını kurun. Vue uygulamalarını çalıştırmak için Node.js kurun.

Kurulum işlemleri tamamlandıktan sonra Visual Studio Code uygulamasını açın. View menüsünden Terminal seçeneğini tıklayın.

Ekranın alt bölümünde açılan terminal sekmesini göreceksiniz. Node.js ve beraberinde nmp paket yöneticisinin doğru şekilde yüklendiğini kontrol etmek için terminal kısmına aşağıdaki kodları yazıp enter tuşuna basın.

node --version
npm --version

Ekran çıktısı şuna benzer olmalı:

Vue CLI kurulumu gerçekleştirmek için aşağıdaki adımları izleyeceğiz.

npm install -g @vue/cli

Bu işlem biraz zaman alabilir. Kurulum tamamlandıktan sonra vue versiyonunu kontrol edelim.

vue --version

Ekran çıktısı şuna benzer olmalıdır:

Şimdi yeni bir uygulama oluşturmaya geçelim. Uygulama oluşturmak için yine terminali kullanacağız.

vue create my-app

Burada my-app uygulamamızın yolu ve adı olacaktır. Kodu çalıştırdıktan sonra gelen seçeneklerden default (babel, eslint) seçeneğini işaretleyip enter tuşuna basın. Bu işlem biraz zaman alabilir.

Kurulum tamamlandıktan sonra uygulamanızı Vs Code editörde açmak için File menüsünden Open Folder seçeneğini kullanabilirsiniz. Oluşturduğunuz uygulama c:/users/sizinkullaniciadi/my-app dizininde olmalı.

Veya uygulamanızı VS Code editörde açmak için terminali kullanabilirsiniz.

cd my-app
my-app code .

Kodlarını yazarak uygulamanızı editörde açabilirsiniz.

Projenizi açtıktan sonra vue uzantılı dosyalarda yer alan kodların editör tarafından çözümlenmediğini görebilirsiniz. Bunun için Vetur eklentisini yükleyin. Ekranda çıkan uyarıya Install diyerek devam edin.

Sizde ekrandaki uyarı çıkmıyorsa veya yanlışlıkla kapattıysanız aşağıdaki adımları izleyin.

Visual Studio Code editöründe sol bölümden Extensions sekmesini açın ve arama kutusuna Vetur yazın. Buradan Install diyerek kurabilirsiniz.

Eklentiyi kurduktan sonra Vue uzantılı sayfamızdaki kodların çözümlendiğini görebilirsiniz. Sizde hala çözümlenmemiş olarak görünüyorsa editörü kapatıp yeniden açın.

Uygulamamızı çalıştırmak için aşağıdaki kodu terminale yazınız.

npm run serve

Link üzerine Ctrl tuşu ile birlikte tıklayıp tarayıcıda açabilirsiniz. Veya linki kopyalayıp tarayıcınızın adres çubuğuna yapıştırıp açabilirsiniz.

Sunucuyu durdurmak için Ctrl + C tuşlarına basın.

Visual Studio Code ile ilk vue projemizi oluşturduk. Sonraki yazımızda git ile birlikte kullanımından bahsedeceğiz.