Vue CLI Kurulumu
Vue.Js Başlangıç: Proje Dosyaları Öncelikle, Vue CLI'nin yüklü olup olmadığını kontrol edin veya yükleyin. Vue CLI, Vue.js projeleri için bir komut satırı aracıdır ve projeleri hızlıca başlatmanıza olanak tanır.
npm install -g @vue/cli
# veya
yarn global add @vue/cli
Vue CLI başarıyla yüklendikten sonra, yeni bir Vue projesi oluşturmak için aşağıdaki komutu kullanabilirsiniz:
vue create my-vue-app
Proje Dosyalarının Yapısı
Vue CLI tarafından oluşturulan bir Vue.js projesi genellikle şu temel dosyaları içerir:
package.json: Proje bağımlılıklarını ve scriptlerini içeren dosya.public/index.html: Vue.js uygulamasının başlangıç HTML dosyası.src/main.js: Vue uygulamasının ana giriş noktası.src/App.vue: Ana Vue bileşeni.
Ayrıca, genellikle şu dizinler de bulunur:
src/components/: Vue bileşenleri için dizin.src/assets/: Görseller, CSS dosyaları gibi statik dosyalar için dizin.src/views/: Sayfa bileşenleri için dizin (isteğe bağlı olarak).
Proje Dosyalarını İnceleme
Örnek bir Vue.js projesi oluşturduktan sonra, dosyaları ve yapıyı inceleyerek nasıl çalıştığını anlamak önemlidir. Örneğin, App.vue dosyası genellikle şu şekildedir:
<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>
#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>
Vue.Js Başlangıç: Proje Dosyaları Vue.js ile yeni bir proje başlatmanın temel adımlarını ve oluşturulan proje dosyalarının yapılarını öğrendiniz. Vue CLI kullanarak bir Vue.js projesi başlatma, proje dosyalarını inceleme ve temel bileşenleri anlama adımlarını ele aldık.