2. Çalışma ortamının oluşturulması

[2] belgesinde ayrıntılı olarak açıklanan çalışma ortamını kullanıyoruz:

JavaScript kodlarını yazmak için Visual Studio Code (VSCode);
[node.js], kodları çalıştırmak için;
[npm], ihtiyaç duyacağımız JavaScript kütüphanelerini indirmek ve kurmak için;

[VSCode] içinde bir çalışma ortamı oluşturuyoruz:

[1-5] içinde, [VSCode]'te boş bir [vuejs] klasörü açıyoruz;

[8-10]'e, [vue.js] projesini başlatmamızı sağlayacak [@vue/cli] bağımlılığını kuruyoruz. Bu bağımlılık, çok sayıda paketi (birkaç yüz) beraberinde getirir;

Aynı terminalde, daha sonra [vue create .] komutunu girerek, geçerli klasörde (.) bir [vue.js] projesi oluşturulmasını talep ediyoruz:

[13] komutunu girdiğinizde, projeyi yapılandırmaya yarayan bir dizi soru başlar;

Tüm sorular yanıtlandıktan sonra, yeni paketler indirilir ve geçerli klasörde [14] adlı bir proje oluşturulur.

Oluşturulanları inceleyelim. [package.json] dosyası şu şekildedir:


{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve vuejs-20/main.js",
    "build": "vue-cli-service build vuejs-20/main.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.2",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Açıklamalar

14-22. satırlar: Geliştirme için gerekli bağımlılıklar arasında, önceki iki bölümde zaten kullanılmış olan iki [eslint, babel] aracına referanslar görülüyor. Bunlara ek olarak, [vue.js] içinde kullanılmak üzere bu iki aracın eklentileri de eklenmiştir;
34. satır: [babel-eslint] paketi, jS kodlarının ES6 → ES5 dönüşümünü gerçekleştirecektir;
5-9. satırlar: Üç adet [npm] görevi oluşturulmuştur:
- [build]: projenin üretime hazır derlenmiş sürümünü oluşturmak için kullanılır;
- [serve]: projeyi bir web sunucusunda çalıştırır. Geliştirme aşamasında testler bu araçla yapılır. [webpack-dev-server]'te olduğu gibi, projenin kaynak kodunda yapılan bir değişiklik, projenin otomatik olarak yeniden derlenmesine ve web sunucusu tarafından yeniden yüklenmesine neden olur;
- [lint]: jS kodlarını analiz etmek ve raporlar oluşturmak için kullanılır. Burada bu aracı kullanmayacağız;

Aşağıdaki içeriğe sahip bir [README.md] dosyası oluşturulmuştur:

# vuejs

## Proje kurulumu
```
npm install
```

### Geliştirme için derleme ve anında yeniden yükleme
```
npm run serve
```

### Üretim için derleme ve küçültme
```
npm run build
```

### Testlerinizi çalıştırın
```
npm run test
```

### Dosyaları denetleyin ve düzeltin
```
npm run lint
```

### Yapılandırmayı özelleştirin
See [Configuration Reference](https://cli.vuejs.org/config/).

Bu dosya, projeyi yönetmek için kullanılacak komutları özetlemektedir.

[VSCode] dosyasında, [npm] görevlerinin yürütülmesi için önerildiğini biliyoruz:

[1-3]'te, [serve] komutunu çalıştırıyoruz; bu komut, [4-5] projesini derleyip ardından çalıştıracaktır;

URL ve [http://localhost:8080] komutlarında, aşağıdaki sayfayı elde ediyoruz:

Bu sayfanın nasıl oluştuğunu biraz ileride açıklayacağız.

Çalışma ortamımızı yapılandırmaya devam edelim:

Yukarıdaki [2]'te, [git] göstergelerini görüyoruz. [git], kaynak kodun ardışık sürümlerini yönetmeye ve bunları geliştiriciler arasında paylaşmaya olanak tanıyan bir kaynak kod yöneticisidir. Bu aracı proje için devre dışı bırakacağız;
[3-5]'te, proje özelliklerine gidiyoruz;

[9-10]'te, projede [git]'in kullanımını devre dışı bırakacağız;

[vue.js]'in nasıl çalıştığını göstermek için çeşitli testler yazacağız. Ancak her seferinde yeni bir proje oluşturmak istemiyoruz, çünkü bu durumda her seferinde [node_modules] adlı bir klasör oluşturmamız gerekecek ve bu klasörün boyutu birkaç yüz megabayt. [package.json] dosyasındaki [npm] görevlerine geri dönelim:


  "scripts": {
    "serve": "vue-cli-service serve vuejs-00/main.js",
    "build": "vue-cli-service build vuejs-00/main.js",
    "lint": "vue-cli-service lint"
  },

2. satır: [serve] komutu varsayılan olarak
- [public/index.html] dosyasını;
- [src/main.js] dosyasıyla ilişkilidir;

satırda, [serve] komutuna projenin giriş noktasını belirtebilirsiniz, örneğin:


"serve": "vue-cli-service serve vuejs-00/main.js",

Deneyelim:

[1] komutunda, [src] klasörü [vuejs-00] olarak yeniden adlandırılmıştır;
[2-3]'e geldiğimizde, [serve] komutu değiştirildi;
[4-6]'te proje çalıştırılır;

Öncekiyle aynı sonuç elde edilir:

Testlerimiz için şu şekilde ilerleyeceğiz:

projenin [vuejs-xx] klasörüne kod yazacağız;
[package.json] dosyasında [vue-cli-service serve vuejs-xx/main.js] komutuyla bu projeyi test ediyoruz;

Geliştirme sunucusu başlatıldığında, proje dosyalarından herhangi birinde yapılan her değişiklik yeniden derlemeye neden olur. Bu nedenle, [VSCode]’in [Auto Save] modunu devre dışı bırakıyoruz. Zira, proje dosyalarından birine karakter girildiğinde hemen yeniden derleme yapılmasını istemiyoruz. Yeniden derlemeyi yalnızca belirli durumlarda istiyoruz:

[2]'te, [Auto Save] seçeneği işaretlenmemelidir;