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.
1 2 3 | vue create vueapp #vue klasör adı oluştur |
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.
1 2 3 4 | > default (babel, eslint) Manually select features |
Ş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.
1 2 3 4 5 6 | > Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus |
Daha sonra projemiz için ESLint + Prettier seçeneğini seçeceğiz.
1 2 3 4 5 6 | ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ❯ ESLint + Prettier |
Şimdi ek tiftik özellikleri seçeneği ile istekte bulunacak “Lint on save” seçeneğini seçin ve enter tuşuna basın.
1 2 3 4 | >(*) Lint on save ( ) Lint and fix on commit |
Şimdi “dedicated config files options” seçeneğini seçin.
1 2 3 4 | > In dedicated config files In package.json |
Gelecekteki projeler için bunu önceden ayarlanmış olarak kaydedin diye soracak N deyin.
1 2 3 | Save this as a preset for future projects? (y/N): N |
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.
1 2 3 | cd vueapp |
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.
1 2 3 | npm run serve |
Ş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.
1 2 3 4 5 6 7 8 9 10 | import Vue from "vue"; import App from "./App.vue"; Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app"); |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Welcome to Your Vue.js App" /> </div> </template> <script> import HelloWorld from "./components/HelloWorld.vue"; export default { name: "app", components: { HelloWorld } }; </script> <style lang="scss"> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> |
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
1 2 3 | http://localhost:8080 |
adresinden projenizi çalıştırabilirsiniz.
Yorum Yap