Vue CLI 3 ile projesi nasıl oluşturulur? – Tasarım Kodlama
JavaScript Vue.js

Vue CLI 3 ile projesi nasıl oluşturulur?

Bu derste, Vue CLI (komut satırı arayüzü) ve Vue UI kullanarak bir Vue projesi oluşturmayı öğreneceğiz.

Vuejs, vue projelerini hızlı bir şekilde üretmek için bize Komut Satırı arayüzü sunuyor.

Vue Cli’yu Kurma

Terminalinizde aşağıdaki komutu çalıştırarak Vue cli’yu yükleyelim. Bilgisayarınızda nodeJS yüklü olduğundan emin olun.

Bir mac kullanıyorsanız, npm’den önce sudo eklemeniz gerekir.

Vue Projemizi Yaratmak

Vue-cli’yi başarıyla yükledikten sonra komut satırınızdaki vue binary’e erişebilirsiniz.

Aşağıdaki komutu çalıştırarak vue projemizi oluşturalım.

Bu komut projeyle ilgili dosyalarımızı vueapp klasörüne indirecektir.

Bu komutu bir kez çalıştırdığınızda farklı sorular soracaksınız.

Aşağı ok tuşlarını kullanarak Manually select features seçeneğini seçin ve enter tuşuna basın.

Şimdi projemize eklemek için çeşitli eklentiler isteyecektir. CSS Pre-processors seçmek için boşluk tuşunu kullanın, sonra enter tuşuna basın.

Şimdi en sevdiğiniz ön işlemciyi seçmek için ok tuşlarını kullanarak CSS pre-processor seçmenizi isteyecek.

Daha sonra projemiz için ESLint + Prettier seçeneğini seçeceğiz.

Şimdi ek tiftik özellikleri seçeneği ile istekte bulunacak “Lint on save” seçeneğini seçin ve enter tuşuna basın.

Şimdi “dedicated config files options” seçeneğini seçin.

Gelecekteki projeler için bunu önceden ayarlanmış olarak kaydedin diye soracak N deyin.

Not: Bu seçenekleri önceden ayarlanmış olarak kaydetmek isterseniz, “Y” yazın; böylece bir dahaki sefere bir vue projesi oluştururken vue projenizi hızlı bir şekilde oluşturmak için bu hazır ayarı seçebilirsiniz.

Proje ile ilgili dosyalarımızı vueapp klasörüne başarıyla indirdikten sonra, şimdi çalışan dizini aşağıdaki komutu kullanarak değiştirmemiz gerekiyor.

Geliştirme sunucumuzu çalıştırma

Geliştirme sunucumuzu çalıştırarak vue projemize hizmet edelim.

Terminalinizde geliştirme sunucusunu başlatmak için aşağıdaki komutu çalıştırın.

Şimdi tarayıcınızı açın ve vue uygulamamızı görmek için localhost:8080 girin.

 

Vue UI

Şimdiye kadar komut satırı arayüzünü kullanarak Vue uygulaması oluşturmayı öğrendik, şimdi Vue grafik kullanıcı arayüzü ile aynı vue projesini oluşturalım.

Terminalinizi açın ve Vue GUI’yi tarayıcınızda başlatmak için aşağıdaki komutu çalıştırın.

Şimdi bir oluşturma sekmesine tıklayın ve uygulamanızı kaydetmek için konum seçin ve ardından Yeni proje oluştur butonuna tıklayın.

Proje adınızı girin ve paket yöneticinizi seçin, ardından İleri düğmesine tıklayın.

Ardından özellikleri el ile olarak seçerek seçeceğiz.

 

Ardından, özellikler sekmesinde önişleyiciler seçeneğini seçeceğiz.

Konfigürasyonlar sekmesinde, açılır listeyi kullanarak scss / sass seçeneğini seçip ESlint + prettier seçeneğini seçtikten sonra önceden oluşturduğunuz adı seçerek kaydetmeden devam et seçeneği ile Proje oluştur düğmesine tıklayın.

Şimdi sol taraftaki navigasyonunuzdaki Görevler üzerine tıklayın ve sunma seçeneğini seçin.

Geliştirme sunucusunu başlatmak için Görevi çalıştır butonuna basıp ardından vue uygulamasını tarayıcınızda açmak için uygulamayı aç butonuna tıklayalım.

Projeyi İnceleme

Şimdi cli veya Vue ui kullanarak oluşturduğumuz vue projemizi inceleyelim.

vue-klasör-yapısı

node_modules: Bu klasörde vue uygulamasını çalıştırmak için gerekli tüm paketler var.

src: src klasöründe, Vue uygulamamız saklanır.

public: Bu klasörde bir index.html dosyası ve favicon var.

main.js: Bu, vue uygulamamızın dom’a bağlandığı ana dosyadır.

Bu, Vue app bizim div etiketimizin içinde id app oluşturduğumuz anlamına gelir.

components: Bu klasörde, yeniden kullanılabilir Vue bileşenlerini saklıyoruz. Örneğin: Düğme bileşeni.

App.vue: Bu App.vue dosyası, gerekli bileşenleri içe aktararak vue uygulamamızı çalıştırır.

Her .vue dosyasında template etiketi, script etiketi ve style etiketi bulunur.

template etiketi: Bu etikette, uygulamamız için gerekli olan HTML işaretlememizi yazıyoruz.

script etiketi: Bu etikette, JavaScript ile ilgili kod yazıyoruz.

style etiketi: Bu etikette, uygulamamızı stillendirmek için CSS kodu yazıyoruz.

 

Vue projesi çalışıyorsa

adresinden projenizi çalıştırabilirsiniz.

 

Yorum bırak