概要
vue.jsをSPAとして使ってみようと思って環境を作るのに調べた内容をメモしておく。
node.jsインストール
まず、ベースとなるnode.jsを「brew」と「nodebrew」を使ってインストールしてみる。
ターミナル
# nodebrewインストール
$ brew install nodebrew
$ mkdir -p ~/.nodebrew/src # <- フォルダ作ってないとinstallでコケる
$ nodebrew -v
nodebrew 1.0.1
# インストール可能なnode.jsのリストを表示
$ nodebrew ls-remote
# version8.9.4をインストール
$ nodebrew install-binary v8.9.4
$ nodebrew ls
$ nodebrew use v8.9.4
# nodeとnpmコマンドのパスを通す
$ nodebrew setup
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
# バージョン確認
$ node -v
v8.9.4
$ npm -v
5.6.0
vue-cliインストール
Vue.jsの開発支援用のコマンドをインストールする。
3.x系をインストールするが、2.x系のコマンドも使えるようにしておく（学習用なので...）。
ターミナル
$ npm install -g @vue/cli
$ npm install -g @vue/cli-init // <- 2.x系のinitコマンドなども使えるようにする(任意)
$ vue --version
3.0.5
※ https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui
プロジェクト作成
webpackをテンプレートとして指定して作成する。
initコマンドで作成 (vue-cli2.x系)
ターミナル
$ vue init webpack app-test
? Project name app-test
? Project description A Vue.js project
? Author reflet <reflet.jp@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? no
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
createコマンドで作成 (vue-cli3.x系)
2.x系に合わせて、Babel, Router, Unit, E2Eのみ入れてみる（特に意味なし)
ターミナル
$ vue create app-test
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
起動
アプリを起動してブラウザで確認する。
initコマンド (vue-cli2.x系)
ターミナル
$ cd app-test
$ npm run dev
createコマンド (vue-cli3.x系)
ターミナル
$ cd app-test
$ npm run serve
http://localhost:8080 へアクセスしてページが見れたらOK
ファイル構成
インストールされたファイルの構成を確認してみる。
initコマンド (vue-cli2.x系)
ファイル構成
├ build -> Webpackのビルド用スクリプト
├ config -> Webpackのビルド設定
├ dist -> ビルドされたファイルが格納されるフォルダ
├ src
│ ├ assets -> 画像やフォントなど
│ ├ components
│ │ └ HelloWorld.vue -> 単一コンポーネント
│ ├ router
│ │ └ index.js -> ルーティング設定
│ ├ App.vue -> アプリのルートコンポーネント
│ └ main.js -> エントリポイント
│
├ static -> Loaderを介さずそのままdistに含めるファイル
├ tests
│ ├ e2e -> エンドツーエンドテストコード
│ └ unit -> Unitテストコード
│
├ index.html -> SPAのインデックスになるHTMLテンプレート
├ package.json -> npmで管理されているパッケージの依存関係を記したファイル
└ package-lock.json
createコマンド (vue-cli3.x系)
2.x系とは、結構変わってるようですね、スッキリして見やすくなった感がします。
ファイル構成
├ public
│ ├ favicon.ico
│ └ index.html
├ src
│ ├ assets
│ │ └ logo.png
│ ├ components
│ │ └ HelloWorld.vue
│ ├ views
│ │ ├ Home.vue
│ │ └ About.vue
│ ├ App.vue
│ ├ main.js
│ └ router.js
├ tests
│ ├ e2e
│ └ unit
├ babel.config.js
├ cypress.json
├ package-lock.json
└ package.json
ちょっと加工してみる
App.vueとHelloWorld.vueをいじってみる。
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
... (その他は変更なし)
HelloWorld.vue
<template>
<div class="hello">
<h1>Hello Vue.js</h1>
<p>{{ msg }}</p>
</div>
</template>
... (その他は変更なし)
ホットリロードで修正がシームレスに反映されるので、開発効率がいいですね♪
まとめ
サーバも不要で簡単にインストールして動かせるのでかなりお手軽です。
フロント系の開発するのが楽しくなりそうですね。