Blog

Vue CLIとVue RouterでVueのSPAをはじめる

2018.12.11Cat:javascript デザイナー

Vueを始める方法にはいくつか方法がありますが、
gulpの利用など、ある程度Node.jsを使ったコマンドラインでの操作になれているのであれば、Vue CLIが便利です。

Vue CLIを利用すると、Vueを使ったアプリケーションの開発環境を簡単にインストールすることができます。
特にSPA(Single Page Application)を開発する場合、Vue CLIを使えば、ローカル上にテスト環境などが用意されるので、開発を効率的に行えます。

今回はVue CLIによるVueの開発環境のインストール方法と、SPAを開発する場合に必須となるVue Routerについてご紹介いたします。

  1. Vue CLIによるVueの開発環境のインストール
    1. Vue CLIのインストール
    2. プロジェクトの作成
    3. 作成されたファイルの確認
  2. Vue Router の導入方法
    1. Vue Routerのインストール
    2. routerの設定

↓こちらを利用して作ってみたもの

DEMO

I. Vue CLIによるインストール

i. Vue CLIのインストール

でVue CLIをインストールします。

Node.jsおよびnpmがインストールされていない場合は、先にこちらからNode.jsをインストールしてください。

ii. プロジェクトの作成

プロジェクトを作成するディレクトリに移動し、以下のコマンドでプロジェクトを作成します。

こちらのコマンドを実行すると、いくつか質問されるので、答えていきます。

? Project name

プロジェクト名: 例)my-projecta

? Project description

プロジェクトの説明: 例)A Vue.js project

? Author

プロジェクトの製作者情報: 例)**** <***@**.***>

? Vue build

ビルド環境: 例)> Runtime + Compiler

? Install vue-router

Vue Routerの利用: Y or n

? Use ESLint to lint your code?

ESLintの利用: Y or n

? Pick an ESLint preset

ESLintのプリセット: > Standard

? Set up unit tests

ユニットテストの利用: Y or n

? Setup e2e tests with Nightwatch?

Nightwatchの利用: Y or n

? Should we run npm install for you after the project has been created?

プロジェクト作成後の’npm install’について: 例)Yes, use NPM

今回の入力・選択結果

これで、Vueによるプロジェクトの開発環境ができました。

II. Vue Routerの導入方法

i. Vue Routerのインストール

お気づきと思いますが、Vue CLIでプロジェクトを作成する場合、
プロジェクト作成時にVue Routerを利用するかどうかが問われますので、
‘Y’を入力すれば、Vue Routerがインストールされます。

ii. routerの設定

/src/router/index.js を編集し、パスと表示するコンポーネントを設定します。

 

参考にさせていただいたサイト

Vue CLIでのインストール方法
Vue.js を vue-cli を使ってシンプルにはじめてみる – Qiita 

Vue CLIでのプロジェクト作成方法
vue-cliでサクッと始めるVue.js – そんな今日この頃の技術ネタ

Vue のトランジション
Enter/Leave とトランジション一覧 — Vue.js

 

↓チームでUI開発するならこちらもおすすめ

React HooksによるFluxでタブを作るまで | LaunchCart | 越境EC専用カート

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ