準備しておくこと

・NodeJS Version 10~

今回使用するもの

・VueJS　バージョン３

公式ドキュメンテーション

イントロ

VueJSはフロントエンドのJavaScriptフレームワークでユーザーインターフェースを作ることができます。

通常のHTML、CSS、JavaScriptに合わせてビルドでき、コンポーネントという概念で開発をより効率よくできます。

他の主要概念として、Declarative Rendering（宣言的レンダリング）やReactivity（反応性）などがありますが、まずは実際にVueJSを触りながら理解していきましょう。

ここでVueJSを開発するうえで２種類のAPIのスタイルがあることを簡単に説明します。この２つはOptionsAPIとCompositionAPIになりますが、CompositionAPIはOptionsAPIの上にできたものなので、まずはOptionsAPIから学ぶことをお勧めします。

ビルドツール

では、早速vueのアプリケーションを作成していきましょう。

Npmでもできますが、今日はvue cliというツールを使っていきます。他にvite(ヴィート）というビルドツールも人気が出てきましたね。色々選択肢が多くてほんと追いつけないっすね。

このコマンドです。

npm init vue@latest

npm install -g @vue/cli

# OR

yarn global add @vue/cli

Vue cliのバージョンを確認する

vue --version

Vue cliのバージョンを更新する

npm update -g @vue/cli

# OR

yarn global upgrade --latest @vue/cli

vue create hello-world

#Helloe-worldの所は自分のプロジェクト名

ここでマニュアルで何をインストールしたいか選択できます。

また、これをプリセットとして保存して再度使う事もできるので便利ですね。

.gitはバージョンコントロールのGITファイルがあります。

Node_moduleにインストールしたパッケージが格納されます。

例えばBootstrapとか、ChartJSとかですね。

publicにはfav-iconとindex.htmlがあり、vueJSがこの中のid=”app”の部分にアプリをマウントすることになります。

Scrはソースフォルダです。

ここにコンポーネント、ルーティング、ビューのファイルが格納されます。

assetsはグローバルのCSSとか画像を保管するときに使います。

で、App.jsがVueの親のアプリのようなものです。

Main.jsがこの親アプリをどうするか指示するためのファイルになります。

では詳しいファイルの内容は動画で見てくださいね。

お疲れ様です。