Vue.jsでSPAサイトをリリースするまでのロードマップ

IT

最終的にはこんな画面が完成できます。

Vue.jsで作成したSPAサイト

Vue.jsを0からはじめて1週間でシングルページアプリケーション(以下、SPA)を公開してみました。

Welcome to Portfolio

Qiitaでも2018年終わりから2019年の頭まで色々な投稿があってSPAが流行ってる⁉︎のかどうかは分かりませんがとりあえずやってみようと思い作成してます。ハマる部分もありましたがなんとか完成しましたね。あと、ググっててこの記事結構最近の記事だけど、その後仕様が変わって一部違ってる部分があると思った部分が数点あり、おそらく皆も同じことを思っていると思いましたのでなるべく最新の状態で書こうと思います。

スポンサーリンク

ドットインストールのVue.js無料枠だけまずはやってみる

まずはこれをやりましたね。無料枠分だけでも単純なhtml、javascript、cssの構造等の理解ができるのでささっとやってみましょう。おそらく1時間くらいあればできると思います。いきなりCLI等を使用すると完成までいかないかもしれないので、基礎は大切です。

ドットインストール-Vue.js入門

ちなみにこんな感じで学べます。

1.Vue.jsを使ってみよう

  1. 公式サイトの確認
  2. index.htmlの作成
  3. main.jsの作成
  4. Vue.jsの読み込み
  5. style.cssの作成

2.Vue.jsの基本をおさえよう

  1. 双方向データバインディング
  2. v-model

3.ToDoアプリを作ってみよう

  1. データの用意
  2. v-for

4.アプリの見た目を整えよう

  1. アプリのスタイリング
  2. ブラウザで確認

残念ですが、5章以降は有料会員のみが利用可能です。

Vue Masteryのチュートリアルをやってみる

こちらもドットインストールと同じく動画で学べます。ただ、全て英語での紹介となっています。チュートリアルをやる分には英語であろうが全く問題ないと思います。ページ下部にサンプルコードが置いてある為、短い動画をなんども見返して理解を深めていけば、ドットインストールより幾らか理解が深まると思います。

Vue Mastery

こんな感じで学べます。

  1. The Vue Instance (Vueインスタンス)
  2. Attribute Binding (属性バインディング)
  3. Conditional Rendering (条件付きレンダリング)
  4. List Rendering (リストレンダリング)
  5. Event Handling (イベント処理)
  6. Class & Style Binding (クラスとスタイルのバインディング)
  7. Computed Properties (計算プロパティ)
  8. Components (コンポーネント)
  9. Communicating Events (通信イベント)
  10. Forms (フォーム)
  11. Tabs (タブ)(※無料会員になれば閲覧可能)

Vue CLIを使ってSPA開発を始める

上記のチュートリアルを全てこなせば基本が学べます。
次はVue CLIを使っていよいよSPAサイトの作成を始めます。

Vue CLIのバージョン2.X.Xをすでにインストールしている人は一回アンインストールしましょう。

$ npm uninstall vue-cli

vue-cliから@vue/cliに名称変更(3.X.X以降)なったようなので、対象をインストールします。

$npm install -g @vue/cli

インストールできたら、念の為バージョン確認をしましょう。3.X.Xと表示されれば問題ないです!

$vue --version

次は早速プロジェクトを作成します。(※webpackを使用したプロジェクト作成です。)

$vue init webpack [プロジェクト名]

ここで色々聞かれるのですが、全てENTERで大丈夫です。中身はvue-routerを使う?作成者の名前は?等々です。

$cd [プロジェクト名]
$npm run dev

これでlocalhost:8080をブラウザで開けばよくみる画面が表示されるはずです。(※8080が埋まっている場合、8081になるみたいですね。)

作成されたディレクトリで主に編集する部分は”src”ディレクトリ内部です。
assets:画像やファイル格納用、components:共通で使用するものを格納用、router:vue-routerを使用するための設定を行うindex.jsがある、App.vue:index.htmlで呼ばれている主ページ、main.js:ビルド時にindex.htmlの下に自動で読み込まれるファイル、メインjavascriptファイル