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

カテゴリーから探す

年別から見る

2018/12/12

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

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

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

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

Vue CLIによるVueの開発環境のインストール
Vue Router の導入方法
1. Vue Routerのインストール
2. routerの設定

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

DEMO

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

i. Vue CLIのインストール


$ npm install -g vue-cli

1	$ npm install -g vue-cli

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

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

ii. プロジェクトの作成

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


$ vue init webpack my-project

1	$ vue init webpack my-project

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

? 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

今回の入力・選択結果


? Project name my-sample
? Project description A Vue.js project
? Author **** <****@****.**>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

? Project name my-sample

? Project description A Vue.js project

? Author **** <****@****.**>

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests No

? Setup e2e tests with Nightwatch? No

? Should we run `npm install` for you after the project has been created? (recommended) npm

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

II. Vue Routerの導入方法

i. Vue Routerのインストール

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

ii. routerの設定

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


import Vue from 'vue'
import Router from 'vue-router'
import TopPage from '@/components/TopPage'
import Test from '@/components/Test'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'TopPage',
      component: TopPage
    },
    {
      path: '/test/',
      name: 'Test',
      component: Test
    }
  ]
})