Vue-cli ile VUE’ya Giriş

Öncelikle bilgisayarınızda node.js ve npm kurulu olması gerekiyor. Kurulu olup olmadığını kontrol etmek için versiyonlarına bakabiliriz;

$ node -v
$ npm -v

Mac kullanıcıları iTerm’i kullanabilir.
Windows kullanıcıları Git Bash’i kullanabilir.
VS Code kullanıyorsanız onun terminalini de kullanabilirsiniz.

Bilgisayarınızda node.js ve npm kurulu olduğuna göre kuruluma başlayabiliriz ( Ön Gereklilikler : Node.js (>=4.x, 6.x preferred), npm version 3+ and Git).

Önce aşağıdaki komutu yazarak vue-cli’ı makinamıza kuruyoruz.

$ npm install -g vue-cli

Daha sonra projemizi ve dosyamızı oluşturuyoruz. Template olarak ben “webpack” seçtim, siz aşağıda verdiğim listedeki herhangi birini seçebilirsiniz.

$ vue init [TEMPLATE-NAME] [PROJECT-NAME]
# Örnek:
$ vue init webpack my-project
$ cd my-project
$ npm install
# Projeyi ayağa kaldırmak için aşağıdaki komutu çalıştırıyoruz
$ npm run dev

TEMPLATE-NAME

webpack — A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

webpack-simple — A simple Webpack + vue-loader setup for quick prototyping.

browserify — A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

browserify-simple — A simple Browserify + vueify setup for quick prototyping.

pwa — PWA template for vue-cli based on the webpack template

simple — The simplest possible Vue setup in a single HTML file

SASS yada SCSS ile çalışmak istiyorsanız!

$ npm install sass-loader node-sass webpack --save-dev

build/webpack.base.conf.js

Önce aşağıdaki kod bloğunu ekleyin;

loaders: [
  {
    test: /\.scss$/,
    loaders: [ "style", "css", "sass" ]
  }
]

src/App.vue

Daha sonra aşağıdaki gibi kontrol amaçlı bir background rengi verelim;

<style lang="sass">
body
  background: blue
</style>

Bootstrap 4 ve Vue-strap ile çalışmak için!

Öncelikle vue-strap’in ne olduğundan bahsedelim. Biliyorsunuz bootstrap jqery’ye direkt olarak bağımlı. Biz projemize gereksiz yere jquery ve bootstrap’in kendi js dosyasını yüklemektense vue-strap’i kullanıyoruz.

$ npm install bootstrap@4.0.0-alpha.6
$ npm install vue-strap
import alert from 'vue-strap/src/alert' 
// or 
import { alert } from 'vue-strap'  
new Vue({
 components: {
   alert
 }``
})

src/main.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Projeyi ayağa kaldırmak için!

$ npm run dev

Artık localhost:8080 portundan projenize göz atabilirsiniz…