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

投稿日: 2022-10-23 2022-10-23
タグ: Development, javascript, Vue.js

序章

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) プリプロセッサとして。後で、追加します lang あなたの属性 .vue コンポーネントごとに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が適用する一連のルールが選択されます。これらの構成には、末尾のコンマ、行末のセミコロンの使用、または使用などのオプションが含まれます。 const 以上 var JavaScriptで。

次のオプションは、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がアプリの作成を開始します。

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

cd vue-starter-project

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

npm run serve

CLIがすでにダウンロードしているため、依存関係をダウンロードする必要はありません。生成されたプロジェクトを表示するには、選択したブラウザを開いて、 localhost:8080 URLバーにあります。 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 VueCLIに作成するように指示しました config.js Babel、TypeScript、ESLintなど、使用している各サービスのファイル。これらのファイルに加えて、いくつかのディレクトリがあります。このチュートリアルでは、これらに到達したときにこれらについて説明します。

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

touch src/components/AppHeader.vue

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

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

このファイルで、を使用してヘッダーを作成します <header> 内側のタグ <template>. この中 <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は表示されません。それはあなたがする必要があるからです import 新しく作成された AppHeader.vue コンポーネントをすでにマウントされているコンポーネントに変換します。以来 App.vue はメインのエントリポイントです。ヘッダーがすべてのルートに表示されるように、そこにインポートすることをお勧めします。

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

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 テンプレートに追加しました <app-header /> の前に <router-view />. これにより、コンポーネントがHTMLでレンダリングされます。

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

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

ヘッダーがアプリケーションに正しくインポートされたので、に戻ります。 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 スタイルは内部にあります header SCSSブロック。従来のCSSでは、これは許可されていませんが、SCSSのおかげで、それを行うことができます。これは、ネスティングと呼ばれます。この場合、 p 中 header 選択するのと同じです header p 従来のCSSで。

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

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

ヘッダーができたので、フッターを使用してサンプルアプリケーションを完成させます。同じように 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() 関数を実行し、これらの値を返します。基本的に、このコンポーネントを構築して提供するようにVueに指示しています。 template これらのリアクティブ計算されたプロパティに。

計算されたプロパティを作成するには、最初に分解する必要があります computed からの機能 vue 図書館。この計算された関数とその値をに保存します 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トピックページをご覧ください。

getdocs

13036

序章

前提条件

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

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

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

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

結論

getdocs