VueCLIを使用してVue.jsシングルページアプリを生成する方法

著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。

序章

Vue.js は、ユーザーインターフェイスを作成するための一般的なJavaScriptフレームワークです。 2014年にEvanYou（正式にはGoogle）によって作成されたVue.jsは、ReactとAngularの組み合わせとして説明され、prop主導の開発を借用しています。 ReactのとAngularのテンプレート力。これにより、Vueは、 CSS-in-JS フレームワークではなく、従来のHTMLおよびCSSに重点を置いているため、初心者が利用しやすいフレームワークになります。 Reactのように、またはAngularのように TypeScript （JavaScriptのスーパーセット）に依存します。

新しいプロジェクトを開始するときは、テクノロジのツールと機能をよく理解しておくことをお勧めします。 Vue.js開発の重要なツールの1つは、 Vue CLI 3 として知られるコマンドラインインターフェイス（CLI）です。 Vue CLIは、Vue開発エクスペリエンスを強化する多くの便利な機能を提供しますが、主な機能は、vue createコマンドを使用して新しいシングルページアプリケーションを生成および事前構成する機能です。。

このチュートリアルを終了すると、ローカルのNodeサーバーで動作するVue.jsアプリケーションが実行されるようになります。このローカルサーバーは、 Webpack を介したホットモジュールのリロードを使用して、作業中にブラウザ内でレンダリングされたフィードバックを即座に提供します。その過程で、ヘッダーやフッターなどの.vue単一ファイルコンポーネント（SFC）を作成します。これらすべてを、将来のVueプロジェクトの強固な基盤として保存できます。

前提条件

このチュートリアルに従うには、次のものが必要です。

Node.jsバージョン10.6.0以降がコンピューターにインストールされています。これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04にNode.jsをインストールする方法
また、JavaScript、HTML、およびCSSの基本的な知識も必要です。これは、HTMLシリーズを使用してWebサイトを構築する方法、CSSシリーズを使用してWebサイトを構築する方法にあります。、およびJavaScriptでコーディングする方法。

ステップ1— VueCLI3をダウンロードする

Vue CLI 3をダウンロードするには、npmまたはYarnのいずれかを使用してコマンドを実行する必要があります。 npmまたはNodePackageManagerは、プロジェクトで依存関係として使用する他の人のコードをダウンロードして管理する方法です。一方、Yarnは内部でNPMコマンドを実行しますが、キャッシングなどの追加機能を提供します。どちらを使用するかは個人の好み次第です。ただし、コマンドを混在させることはお勧めしません。プロジェクトの期間中、どちらか一方と一貫性を保つことが最善です。

今後、このチュートリアルではnpmコマンドを使用します。次のコマンドは、必要なVue CLIファイルをレジストラ（この場合は npm（ノードパッケージマネージャー）サービス）からダウンロードします。

npm i -g @vue/cli

注：一部のシステムでは、npmパッケージをグローバルにインストールすると、アクセス許可エラーが発生し、インストールが中断される可能性があります。 sudoをnpm installと一緒に使用しないことはセキュリティのベストプラクティスであるため、代わりにnpmのデフォルトディレクトリを変更することでこれを解決できます。 EACCESエラーが発生した場合は、公式のnpmドキュメントのの指示に従ってください。

マシンのどこでもCLIを使用するために、これをグローバルにインストールします。これをグローバルにインストールしない場合は、インストールしたディレクトリでのみ機能します。コマンドオプションの場合、iは「インストール」を意味し、-gはコンピューターにコードをグローバルにインストールするためのフラグです。

Vue CLI 3が正しくインストールされているかどうかを確認するには、次のコマンドを実行します。

vue --version

バージョン番号が記載された次の出力が表示されます。バージョン番号は異なる場合がありますが、バージョン番号が記載された応答を受け取った場合は、VueCLI3が正しくインストールされています。

Output@vue/cli 4.5.6

Vue CLI 3を更新するには、このセクションの前のコマンドを実行すると、最新バージョンがインストールされます。

この時点で、生成されたVue.jsプロジェクトを作成するために次のセクションで使用するVueCLIツールとともにnpmをグローバルに正常にダウンロードしました。

ステップ2—シングルページアプリケーションの生成

Vue.jsアプリケーションを開発するとき、新しいVue.jsプロジェクトを最初から構成するのに数時間かかることがあるため、プロジェクトを手動で構成することは時間の最も生産的な使用ではないことに気付くかもしれません。これがVueCLIの真の力です。仕様に基づいて事前に生成されたテンプレートを提供します。このため、Webサイトまたはアプリケーションの開発をすぐに開始できるように、すでに構成されています。 Vue CLI 3は、コマンドラインプロンプトを介してプロジェクトに関するいくつかの質問をし、必要なファイルをダウンロードし、事前に構成して、完了したらすぐに作業できるようにします。

シングルページアプリケーションを生成するには、Vueプロジェクトを配置するディレクトリに移動してから、次のコマンドを実行します。

vue create vue-starter-project

コマンドの強調表示されたセクションは、プロジェクトのルートディレクトリの名前です。これは、すべてのVue.jsプロジェクトファイルを含むフォルダーの名前になります。これは好きなようにできますが、このチュートリアルの場合は、vue-starter-projectを使用します。

そのコマンドを入力したら、Enterを押して続行します。次に、次のプロンプトが表示されます。

Vue CLI v4.5.6
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
❯ Manually select features

プロジェクトを構成せずにデフォルトを選択する場合は、Vue2またはVue3のいずれかを使用して構成できます。ただし、このチュートリアルでは、機能を手動で選択することをお勧めします。特定の機能を選択すると、選択した各オプションがCLIによってどのようにインストールされたかがわかります。

Manually select featuresとENTERを選択します。すぐに、Choose Vue version、TypeScript、Router、Vuexなどのさまざまなオプションが表示されます。これらの項目のいくつかはすでに選択されていることに注意してください（バブルが塗りつぶされています）。必要な数だけ選択できます。ただし、このチュートリアルでは、エントリで<space>を押して次を選択します。

...
 ◉ Choose Vue version
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
❯◯ Unit Testing
 ◯ E2E Testing

オプションを選択したら、ENTERキーを押します。 CLIは、プロジェクト用に選択した各機能に関する追加の質問を順番に尋ねます。最初の質問では、使用するVueのバージョン2.xまたは3.xを尋ねます。このチュートリアルではVue3を使用しますが、Vueコミュニティからのサポートを強化したい場合は、Vue2を使用することをお勧めします。

...
? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x (Preview)

次の質問は、TypeScriptの統合に関するものです。 TypeScriptに慣れていない場合は、それで構いません。このオプションは、VueCLI3が独自のプロジェクトに必要と定義したものをダウンロードする方法を示すために意図的に選択されました。このチュートリアルでは、クラススタイルの構文は使用しませんが、TypeScriptと一緒にBabelを使用します。

次の場合は、Nと入力してください。

...
Use class-style component syntax? (y/N) N

次のプロンプトで、Yと入力します。

...
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y

次に、VueCLIは履歴モードについて質問します。 履歴モードは、各ルートに独自のURLを作成します。これは、アプリケーションのURLに/#/（ハッシュ）が含まれないことを意味します。履歴モードを使用する場合は、プロジェクトを実行するためにノードサーバーが必要になります。 Vue CLI 3はノードサーバーを提供するため、これは問題ではありません。

Yと入力して、履歴モードに「はい」と答えます。

...
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

次の質問は、SassやLESSなどのCSSプリプロセッサに関するものです。 CSSプリプロセッサは、ネストや変数などの機能が追加されたCSSです。ブラウザはこれを読み取ることができないため、プロジェクトがビルドされると、NodeはすべてのSCSSまたはLESSコードを従来のCSSにコンパイルします。 Nodeを使用してプロジェクトをビルドしているため、プリプロセッサとしてSass/SCSS (with node-sass)を選択することをお勧めします。後で、.vueコンポーネントにlang属性を追加して、コンポーネントごとにSCSSを有効にします。

...
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus

その後、リンタースタイルに関するいくつかの質問が表示されます。 linter は、アプリケーションの開発時にコードを評価するプログラムです。このリンターは、開発中にいくつかの構文規則を適用できます。これに加えて、統合開発環境（IDE）は、この構成ファイルを読み取り、保存時にコードをフォーマットできます。これにより、プロジェクトで誰が作業し、開発者がどのオペレーティングシステムまたはIDEを使用しているかに関係なく、コードの一貫性が保たれます。

このチュートリアルでは、ESLint + Standard configを選択します。

...
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier 
  TSLint (deprecated)

これにより、ESLintが適用する一連のルールが選択されます。これらの構成には、末尾のコンマ、行末のセミコロンの使用、JavaScriptのvarよりもconstの使用などのオプションが含まれます。

次のオプションは、ESLintでコードをフォーマットするタイミングを選択することです。これは、保存時、またはコードを GitHub 、 GitLab 、BitBucketなどのサービスにコミットするときに実行できます。バージョン管理にコミットする前に変更を確認できるように、Lint on saveを選択することをお勧めします。

...
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

lint機能を選択すると、Vue CLIは、専用ファイルまたはpackage.jsonのどちらに、これらの構成を保存するかを尋ねてきます。いくつかの理由から、構成を独自のファイルに保存することは標準的な方法と考えられています。 1つは、この方法でプロジェクト間で構成を共有するのが簡単です。2つは、アプリに関する重要な情報を定義するだけで、package.jsonをできるだけ読みやすくすることです。

...
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json

完了すると、CLIツールは、この選択を将来のプロジェクトのプリセットとして保存するかどうかを尋ねます。これは、雇用主のためにプロジェクトを生成していて、すべての一貫性を維持したい場合に役立ちます。

先に進み、この構成をプリセットとして保存します。 VueCLIは名前を変更するように要求します。名前をDigitalOcean Vue Tutorial Series：

...
? Save this as a preset for future projects? Yes
? Save preset as: DigitalOcean Vue Tutorial Series

これで、これらのまったく同じ設定を将来のプロジェクトに使用できます。

この時点で、ターミナルにすべてのオプションを要約したものが表示されます。

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

ENTERを押すと、VueCLIがアプリの作成を開始します。

完了すると、プロジェクト名（vue-starter-project）のcd（ディレクトリの変更）：

cd vue-starter-project

次に、npm run serveでアプリケーションを起動します。これにより、localhost、通常は:8080のポートでプロジェクトが実行されます。別のポートの場合、CLIは次のように通知します。

npm run serve

CLIがすでにダウンロードしているため、依存関係をダウンロードする必要はありません。生成されたプロジェクトを表示するには、選択したブラウザを開き、URLバーのlocalhost:8080にアクセスします。 Vueのロゴと前の手順で選択したテクノロジーが表示されたウェルカム画面が表示されます。

このチュートリアル全体を通してこのサーバーを実行したままにして、変更を監視することができます。

このセクションでは、作成するプロジェクトに固有のいくつかのオプションを選択しました。 Vue CLIは、必要なすべてのコードをダウンロードし、事前に構成しました。これで、独自の単一ファイル.vueコンポーネントの作成など、生成されたコードベースでの作業を開始できます。

ステップ3—ヘッダーコンポーネントを作成する

ノードサーバーでシングルページアプリケーションを実行しているので、標準のヘッダーとフッターを作成して、これにいくつかの変更を加えます。これらのAppHeader.vueおよびAppFooter.vueコンポーネントは、各ルートに存在するようにインポートされます。

新しいターミナルウィンドウで、vue-starter-projectフォルダーのルートに移動し、次のコマンドを使用してファイルを一覧表示します。

ls

次の出力が表示されます。

OutputREADME.md  babel.config.js  node_modules  package-lock.json  package.json  public  src  tsconfig.json

Visual Studio Code など、選択したエディターでプロジェクトを開いて、プロジェクトのコンテンツを表示することもできます。いずれの場合も、さまざまなファイルやディレクトリにアクセスできます。ルートディレクトリ内のこれらの構成ファイルは、このプロジェクトの最初の生成中に行われた選択のために作成されました。オプションIn dedicated config filesは、Vue CLIに、Babel、TypeScript、ESLintなどの使用しているサービスごとにconfig.jsファイルを作成するように指示しました。これらのファイルに加えて、いくつかのディレクトリがあります。このチュートリアルでは、これらに到達したときにこれらについて説明します。

まず、componentsディレクトリに.vueファイルを作成し、AppHeader.vueという名前を付けます。これは、componentsディレクトリを右クリックして、VSCodeなどのIDEで新しいファイルを作成することで実行できます。ターミナルコマンドが必要な場合は、bashコマンドtouchを使用して、コンピューターのターミナルでこれを行うことができます。

touch src/components/AppHeader.vue

このステップでは、このコードのチャンクに必要なすべてのHTML、JavaScript、およびSCSSを含む単一ファイルコンポーネントを作成します。すべての.vueコンポーネントには、<template>、<script>、および<style>の3つの基本的な懸念事項またはセクションが含まれています。この場合、templateはコンポーネントのHTMLです。

テキストエディタで新しいファイルを開きます。

このファイルでは、<template>内の<header>タグを使用してヘッダーを作成します。この<header>の中に、Vue.jsロゴと<p>要素をMy Vue.js Applicationの内容で追加します。

vue-starter-project / src / components / AppHeader.vue

<template>
  <header>
    <img alt="Vue logo" src="../assets/logo.png" height="50">
    <p>My Vue.js Application</p>
  </header>
</template>

開発中は開発サーバーを実行し続けます。サーバープロセスを閉じるかキャンセルすると、ブラウザでアプリケーションを表示できなくなります。

ファイルを保存します。

この時点で、ブラウザを開いたときに、レンダリングされたHTMLは表示されません。これは、新しく作成されたAppHeader.vueコンポーネントをすでにマウントされているコンポーネントにimportする必要があるためです。 App.vueがメインのエントリポイントであるため、そこにインポートして、すべてのルートにヘッダーが表示されるようにすることをお勧めします。

テキストエディタでApp.vueファイルを開き、navのIDを持つdivを削除して、次の強調表示されたコードを追加します。

vue-starter-project / src / App.vue

<template>
  <app-header />
  <router-view/>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'

export default {
  components: {
    AppHeader
  }
}
</script>

ES6を使用してインポートする場合、基本的には、後でコードで参照するための変数を作成します。この場合、AppHeader.vueからのコードをAppHeaderという変数に格納しています。使用する前に、componentsプロパティを介して登録する必要があります。

インポートしたら、テンプレートの#navを削除し、<router-view />の前に<app-header />を追加しました。これにより、コンポーネントがHTMLでレンダリングされます。

この手順を完了したら、保存されていないファイルを保存し、ブラウザを開いてlocalhost:8080に戻します。ホットモジュールのリロードのおかげで、ページの上部に新しく作成されたヘッダーが表示されます。

これで、単一ファイルのVueコンポーネントを作成し、importを使用してマウントされたコンポーネントに取り込み、ホットモジュールリロード（HMR）で変更を監視しました。今後は、子コンポーネントを使用してコンポーネントの機能を拡張していきます。また、lang属性を使用して、コンポーネントごとにSCSS（前に選択したプリプロセッサ）を使用します。

ヘッダーがアプリケーションに正しくインポートされたので、テキストエディタでAppHeader.vueに戻ります。次の強調表示されたコードを追加して、<p>My Vue.js Application</p>の下にナビゲーションを追加します。

vue-starter-project / src / components / AppHeader.vue

<template>
  <header>
    <img alt="Vue logo" src="../assets/logo.png" height="50">
    <p>My Vue.js Application</p>
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
      </ul>
    </nav>
  </header>
</template>

次に、これをスタイル設定して、従来のナビゲーションバーのように見せます。ファイルの最後に<style>タグを作成します。

vue-starter-project / src / components / AppHeader.vue

<template>
  <header>
    <img alt="Vue logo" src="../assets/logo.png" height="50">
    <p>My Vue.js Application</p>
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
      </ul>
    </nav>
  </header>
</template>

<style lang="scss">
</style>

初期設定時に、Sass/SCSS (with node-sass)オプションを選択しました。これが、lang="scss"属性をstyleタグに追加した理由です。 SCSSに慣れていない場合は、ネストまたは変数を使用するタイミングの詳細について、公式ドキュメントを参照することをお勧めします。

このlang属性を使用すると、単一ファイルコンポーネントにSCSSを書き込むことができます。 style要素に次の強調表示されたコンテンツを追加します。

vue-starter-project / src / components / AppHeader.vue

...
<style lang="scss">
  header {
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: .5rem 1rem;

    p {
      margin-left: 1rem;
    }
  }

  nav {
    margin-left: auto;

    ul {
      list-style: none;
    }

    ul li {
      display: inline-flex;
      margin-left: 1rem;
    }
  }
</style>

このSCSSは、display: inline-flex（ Flexbox を使用）などの宣言を含む水平ナビゲーションバーを作成し、各アイテムをmargin-left autoで区切ります。ヘッダーを残りのコンテンツから分離するために、padding: .5rem 1remでパディングが適用され、border-bottom: 1px solid #cccで下の境界線が適用されます。 pスタイルがheaderSCSSブロック内にあることに気付くかもしれません。従来のCSSでは、これは許可されていませんが、SCSSのおかげで、それを行うことができます。これは、ネスティングと呼ばれます。この場合、header内のpは、従来のCSSでheader pを選択した場合と同じです。

ファイルを保存し、ブラウザでlocalhost:8080に移動して、新しいスタイルを見つけます。

これで、ヘッダーコンポーネントの作成とスタイル設定が完了しました。次に、フッターコンポーネントを作成します。

ステップ4—フッターコンポーネントの作成

ヘッダーができたので、フッターを使用してサンプルアプリケーションを完成させます。同じcomponentsディレクトリに、AppFooter.vueという名前の新しいファイルを作成します。このコンポーネントを作成するプロセスは、AppHeader.vueを作成するプロセスと同じです。ファイルは、エディターまたはtouch基本コマンドを使用して作成できます。

touch src/components/AppFooter.vue

前と同じように、importこれをApp.vueファイルに入れます。 App.vueを開き、次の強調表示されたコードを追加します。

vue-starter-project / src / App.vue

<template>
  <app-header />
  <router-view/>
  <app-footer />
</template>

<script>
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'

export default {
  components: {
    AppHeader,
    AppFooter
  }
}
</script>
...

今回は、router-viewタグの後にコンポーネントをインポートします。

ファイルを保存し、AppFooter.vueを開きます。 AppFooter.vueファイルで、<footer>HTMLタグを段落とともに使用します。

vue-starter-project / src / components / AppFooter.vue

<template>
  <footer>
    <p>Copyright &copy; "current year" </p>
  </footer>
</template>

これで基本的なフッターができました。プログラムで今年を含めるために、これを拡張し続けます。これは、年が何であるかに応じて動的になります。これを実現するには、計算されたプロパティを作成します。計算されたプロパティは、JavaScriptで計算されたリアクティブ値です。

Vue 3では、プロパティをsetup()関数でラップし、これらの値を返す必要があります。基本的に、このコンポーネントを構築し、これらのリアクティブ計算プロパティにtemplateを提供するようにVueに指示しています。

計算されたプロパティを作成するには、最初にvueライブラリからcomputed関数を分解する必要があります。この計算された関数とその値をconstに保存します。 Vue 3では、値を返す無名関数を渡す必要があります。

const year = computed(() => new Date().getFullYear())

setup関数をファイルに追加するには、AppFooter.vueの最後に次のスクリプトを追加します。

vue-starter-project / src / components / AppFooter.vue

...
<script>
import { computed } from 'vue'

export default {
  setup () {
    const year = computed(() => new Date().getFullYear())
  }
}
</script>

その後、<template>が使用およびレンダリングするために作成した計算プロパティへのアクセスを提供する必要があります。 yearプロパティとsetup()関数の値を持つオブジェクトを返します。

/vue-starter-project/src/components/AppFooter.vue

...
setup () {
  const year = computed(() => new Date().getFullYear())
  return { year }
}
...

<template>でこの値を使用するには、二重中括弧を使用した補間を使用します。これは「口ひげ構文」と呼ばれることもあります。

/vue-starter-project/src/components/AppFooter.vue

<template>
  <footer>
    <p>Copyright &copy; {{ year }}</p>
  </footer>
</template>

ファイルを保存します。これで、フッターに現在の年が表示されます。

結論

このチュートリアルでは、Vue CLIをダウンロードし、AppHeader.vueおよびAppFooter.vueを使用して独自の単一ファイルコンポーネントを作成しました。初期設定から選択した機能を使用してVue.jsシングルページアプリケーション（SPA）を正常に生成し、それらすべての要素がどのように組み合わされるかを学習しました。さらに、ほとんどのSPAの基本アーキテクチャを確認し、その知識を使用してこのプロジェクトをさらに拡張できます。

Vue.jsは成長を続けるエコシステムであり、さまざまなツールを自由に使用できます。これらのツールは、オプションをプリセットとして保存することにより、すばやく開始して時間を節約するのに役立ちます。これはVue.jsが提供するもののほんの始まりに過ぎませんが、CLIはおそらくVue.jsの旅で使用する最も重要なツールの1つです。

Vue.jsおよびVueCLI 3 の詳細については、それらのドキュメントを読むことをお勧めします。 CLIツールには、このチュートリアルではカバーされていない多くの追加機能があります。 Vueのその他のチュートリアルについては、Vueトピックページをご覧ください。