こういった要望に答えます。
この記事の筆者は、最近、仕事でVue.jsを使ってシングルページアプリケーションを構築したので、信頼していただける記事かなと思います。
Node.jsのインストール
Vue.jsでシングルページアプリケーション構築する際、様々なツールやライブラリをインストールする必要があります。インストールにはnpmというパッケージ管理ツールを使うと便利で、npmを利用するには、Node.js(サーバサイドのJavaScript環境)をお使いのパソコンにインストールすることが必要です。
早速、Node.jsをインストールしていきましょう。
Node.jsの公式サイトを開きます。
以下のような画面が表示されます(お使いのOSやブラウザによって若干異なります)。
「推奨版」のボタンをクリックして、インストーラをダウンロードします。
ダウンロードが完了したら、インストーラを実行します。
インストールが完了したら、コマンドラインツール(Windowsならコマンドプロンプト、Macならターミナル、Ubuntsuなら端末)を立ち上げて、Node.jsとnpmのバージョンを確認してみましょう。バージョンが表示されれば正常にインストールされています。
1 2 3 4 5 | $ node -v v8.11.4 $ npm -v 6.4.1 |
Vue CLIのインストール
npmを利用できるようになったら、Vue CLIをインストールしていきます。Vue CLIをインストールすることでコマンドラインツールからシングルページアプリケーションの雛形を作成できるようになります。
以下のコマンドでVue CLIをインストールします。
1 | $ npm install -g @vue/cli |
インストールが完了したら、バージョン確認のコマンドで正常にインストールされていることを確認しましょう。
1 | $ vue -V # -Vは大文字ですのでお気をつけください |
プロジェクトの作成
まずは任意のディレクトリに移動します。今回はホームディレクトリ直下を指定します。「cd」はChange Directoryの略です。「~/」はホームディレクトリを表します。
※ディレクトリの指定方法はお使いのOSによって異なりますので、うまくいかない場合は、Googleで「cd Windows」などと検索してみてください。
1 | $ cd ~/ |
ここからはVue.jsによるシングルページアプリケーションの雛形を作成していきます。
1 | $ vue create my-project |
画面に質問が表示されるので答えていきます。初めての方は以下の指示通り選択していって、慣れてきたらカスタマイズしてみると良いと思います。
質問：Please pick a preset
→「Manually select features」を選択します。こちらを選択することで任意のプラグインやCSSプリプロセッサを選択していくことができます。
1 2 3 | ? Please pick a preset: default (babel, eslint) ❯ Manually select features |
質問：Check the features needed for your project
→「Babel」「Router」「CSS Pre-processors」「Linter / Formatter」を選択します。
1 2 3 4 5 6 7 8 9 10 | ? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ❯◯ E2E Testing |
質問：Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
→「n」と回答します。
1 | ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) |
質問：Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
→「Sass/SCSS」を選択します。
1 2 3 4 | ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS Less Stylus |
質問：Pick a linter / formatter config: (Use arrow keys)
→「ESLint + Standard config」を選択します。
1 2 3 4 5 | ? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ❯ ESLint + Standard config ESLint + Prettier |
質問：Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
→「Lint on save」を選択します。
1 2 3 | ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Lint on save ◯ Lint and fix on commit |
質問：Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
→「In package.json」を選択します。
1 2 3 | ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files ❯ In package.json |
質問：Save this as a preset for future projects? (y/N)
→「n」と回答します。
1 | ? Save this as a preset for future projects? (y/N) |
「Successfully created project my-project.」と表示されればVue CLIによるシングルページアプリケーションの雛形作成は成功です。
シングルページアプリケーションの雛形をブラウザで表示する
まずはディレクトリを移動します。
1 | $ cd my-project |
次にローカルサーバを立ち上げます。以下のコマンドを実行します。
1 | $ npm run serve |
以下のような画面が表示されましたか？
画面に表示されているとおり、「http://localhost:8080」というURLにローカルサーバが稼働しています。ブラウザを開いて表示してみましょう。
上の画面が表示されましたか？このWebサイトは既にシングルページアプリケーションとして構築されています。上の画面内の赤で囲んだところがナビゲーションになっています。「About」を押してみてください。すこし分かりづらいかもしれませんが、ナビゲーション以外が切り替わることが確認できるはずです。
以上でシングルページアプリケーションの雛形は作成できました。でも、これだけだとまだシングルページアプリケーションぽくないですよね。例えば、ここに画面切り替え時にフェードイン効果をつけたりするとよりシングルページアプリケーションぽくなっていきます。
以下の記事では、今回作った雛形を編集して、よりシングルページアプリケーションらしくしていく方法を解説しています。
