Vue SPA 基礎編 ~フロントエンドへの一歩~

Vue

Vue CLI

環境構築編でも触れましたが、
Vue CLIとは開発支援のためのコマンドラインインターフェース。
アプリケーションのビルドなどの支援をする。
またwebpackに必要なファイルを自動的に作成もする。

webpack

こちらも環境構築編で触れましたが、
複数のJSファイルをモジュール化して、それを組み合わせて表示する。
その際にモジュールをまとめるバンドルツールがwebpack。

クロスドメイン対策
config/index.js

proxyTable: {
  '/api':{
    target: 'http://localhost:8081',
    changeOrigin:true,
    pathRewrite: {
      '^/api':'/dev/api/'
    }
  }
},


本番環境が/apiだが
開発環境では/dev/apiとなる。

単一ファイルコンポーネント

Single File Components 通称「SFC」
HTML、CSS、JavaScriptを.vueという拡張子のファイルにまとめて記述し管理する。

マークアップ言語やスタイルシート言語の変更
PugやSassなどを使用する場合には必要パッケージをインストールして以下のように記述する。
<template lang="sass">



Vue.jsプラグイン

グローバルメソッドのVue.useでVue.jsに登録する。

import Vuex from 'vuex'

Vue.use(Vuex)



プラグイン自作
installという名前の公開されたメソッドを定義し、Vue.useで受け取れる。
インスタンスプロパティを登録する場合は$から始まる名前を使用する。

ES2015(ES6)モジュール

ECMAScript
ES5に比べて運用しやすい。 ただ書き方が少し変わる。

大きな違い
変数宣言
var が let か constになる

functionの省略
hoge : function(){ } -> hoge() { }

Promise
非同期処理を抽象化したオブジェクト、操作する仕組みになっている。
非同期処理の完了をしり、引数にresole(解決)、reject(拒否)のコールバック関数で結果によってどちらを呼び出す。

次回！

Vuexによるアプリケーション状態管理！
さらに便利に効率的に！ここからが面白い！