Vue.jsのrouter機能でSPA(シングルページアプリケーション)を作成する(テンプレの導入)

環境


node.js

v16.13.2

v16.13.2 

※2022年2月における最新バージョン


npm

v8.4.1

v8.4.1 

※2022年2月における最新バージョン


Vue-CLI

v4.5.15

v4.5.15 

※2022年2月における最新バージョン


OS

Windows11

Windows11 


①node.jsのインストール

npm環境でvue.jsを扱いますので、まずはnode.jsをインストール。下記サイトにて推奨版をダウンロードしてインストーラーを起動、インストールしてください。

https://nodejs.org/ja/

インストールが完了したら、コマンドプロンプトにてnode.jsとnpmが正常に動作するかを確認します。

バージョンが表示されれば正常にインストールされている

②Vue CLIのインストール

・コマンドプロンプトにて以下コマンドを実行。


・同じくバージョンを確認して正常にインストールされているかを確認。

③Vue GUIを起動

ここからは、コマンドラインは使用せずにVueのGUI画面を起動してプロジェクト作成やプラグインのインストールを行っていきます。

まずは、Vue GUIを起動。GUIの起動はコマンドラインからです。


 ブラウザが起動し、Vueのプロジェクトダッシュボードが開きます。


プロヘクトマネージャ画面を開きます。

プロジェクトマネージャー画面

適宜プロジェクトを作成するディレクトリに移動し、「+作成」⇒「+ここに新しいプロジェクトを作成する」ボタンをクリック。


次の画面でプロジェクト名を入力し、次へ。


Default preset(Vue 3)を選択し、「✓プロジェクトを作成する」ボタンをクリック。


プロジェクトが作成できたら、次にVue Routerプラグインのインストール。

作成したプロジェクトはRouter機能がインストールされていない基本のプロジェクト。なので、作成したプロジェクトには追加でVue Routerを追加インストールする必要がある。

「プラグイン」画面にて、画面上方にある「Vue Routerを追加」ボタンをクリック。


Vue Routerのインストールが終わった

エクスプローラーでプロジェクトディレクトリ配下のsrcディレクトリを確認。「view」、「router」等の基本のテンプレートが一通りできている筈です。

また、viewテンプレートはサンプルで「About」と「Home」が作成されています。


テスト用の簡易サーバーを立ち上げて、Vue Routerアプリを実行します。

タスク画面の「serve」⇒「タスクの実行」をクリックしコンパイルします。

コンパイルが完了したら、localhostのポート:8080にアクセスして動作が確認できます。下記画面が表示されたらプロジェクト作成成功です。

上部のHomeとAboutのリンクをクリックすると、ページの再読み込みはされずにページが切り替わるのが分かります。


コメントを残す

メールアドレスが公開されることはありません。