ここのところ仕事ではもっぱらVue.jsを使って（慣れない）フロントエンド開発をやっていたりする。 以前に触っていたAngular.jsと感触が近い部分もあって個人的にはReact.jsより親しみやすい。
昨今のフロントエンド開発というとbabelだのwebpackだのと最初に把握しなければいけない要素が多くて、昔のような「ブラウザさえあれば気軽に開発できる」という雰囲気ではなくなってしまったのが門外漢にはしんどかったりするのだが、幸いにしてVue.jsにはサクッと雛形を用意してくれるvue-cliというツールが用意されている。 今回はそのあたりについて軽くまとめてみた。
導入
何はともあれyarnとvue-cliを導入する。
$ npm install -g yarn /usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js /usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js + yarn@1.2.1 added 1 package in 2.829s $ npm install -g vue-cli /usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue /usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list /usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init + vue-cli@2.9.1 added 264 packages in 32.499s
雛形の作成
さっそくvue initコマンドでvue-sampleというプロジェクトを作成してみる。
$ vue init webpack vue-sample
? Project name vue-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
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "vue-sample".
To get started:
cd vue-sample
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
ここでのwebpackはオフィシャルで用意されているテンプレートのことであり、この他にも例えばElectronアプリ用のテンプレートなんかを指定することができる。（Electronアプリもいつか作ってみたいなあ）
ファイル構成を確認
作成されたディレクトリに入って中身を確認してみる。
$ cd vue-sample/ $ tree . ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── main.js │ └── router │ └── index.js └── static 7 directories, 20 files
ざっくりsrc内がコード開発を行う場所となっている。
main.jsがエントリーポイントとなっており、App.vueがページの大枠、components内が個別のページ・パーツを格納している。
また、router/index.jsでURLハッシュ(#以降の部分)によるルーティングの指定を行う。
assets内にページ内で使用する画像ファイルなどを格納する。
開発を始める
ひとまずnodeモジュールをインストール。
$ yarn yarn install v1.2.1 info No lockfile found. [1/5] 🔍 Validating package.json... [2/5] 🔍 Resolving packages... [3/5] 🚚 Fetching packages... [4/5] 🔗 Linking dependencies... [5/5] 📃 Building fresh packages... success Saved lockfile. ✨ Done in 25.04s.
yarn devで開発用のサーバを起動することができる。
$ yarn dev yarn run v1.2.1 $ node build/dev-server.js > Starting dev server... DONE Compiled successfully in 4134ms 1:18:13 > Listening at http://localhost:8080
標準の設定であれば8080番ポートで起動し、ブラウザが開く。 ファイルの編集が行われると自動でリロードしてくれるので、効率的に開発を行うことができる。
このポートの設定などはconfig/index.jsで変更することもできる。
同じファイルなんでついでに書いておくと、dev.proxyTable項を記述することでAjaxものの開発で面倒なCORSを迂回することができる。
API Proxying During Development · GitBook
超ざっくりいえば編集すべきファイルはApp.vueやcomponents/以下のvueファイルとなる。
vueファイルとはHTML部分となるtemplate、処理本体となるscripts、スタイルを記述するstyleをまとめて記述したものとなっている。
また、これらはそれぞれimportしてcomponents項に記述することによって独自のタグとして記述することができる。
つまり適切な作り方をすれば再利用可能なパーツとして扱うことができるということである。
<template>
<div>
<children></children>
</div>
</template>
<script>
import Children from '/path/to/children.vue'
export default {
name: parent,
components: {
'children': Children
}
}
</script>
詳細は割愛するが、templateは{{}}で囲った中に記述する形式で、v-ifとかv-forとかいったロジックを記述したり、:hoge="{name: 'fuga'}"のようにして呼び出したコンポーネントに変数を渡したりできる。
https://jp.vuejs.org/v2/api/#ディレクティブ
scriptも例えば生成時に行うべき処理をmounted () {}として記述したり変数の変化に合わせた処理をwatch:{}として記述できたりと色々あるが、キリがないので今回は深入りしない。
https://jp.vuejs.org/v2/api/#オプション-データ
https://jp.vuejs.org/v2/api/#オプション-ライフサイクルフック
先に紹介したrouter/index.jsで定義したルーティングは、template内では<router-link>タグとして、script内ではrouter.replaceなどで使用することができる。
https://router.vuejs.org/ja/api/router-link.html
https://router.vuejs.org/ja/essentials/navigation.html
本番用にビルドする
そんなこんなで開発が完了したらビルドを行う。
$ yarn build
yarn run v1.2.1
$ node build/build.js
Hash: f2dd0a202e9b87ec596a
Version: webpack 3.8.1
Time: 4533ms
Asset Size Chunks Chunk Names
static/js/app.2b6a0ee892cff2733d09.js 11.9 kB 0 [emitted] app
static/js/vendor.c8931c1e41644ebffc2d.js 119 kB 1 [emitted] vendor
static/js/manifest.f7fb17029c5d42943fc8.js 1.49 kB 2 [emitted] manifest
static/css/app.4252902bf68c0f1b9cc98bc4150de315.css 363 bytes 0 [emitted] app
static/js/app.2b6a0ee892cff2733d09.js.map 41.1 kB 0 [emitted] app
static/js/vendor.c8931c1e41644ebffc2d.js.map 961 kB 1 [emitted] vendor
static/js/manifest.f7fb17029c5d42943fc8.js.map 14.2 kB 2 [emitted] manifest
index.html 447 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
✨ Done in 6.86s.
ビルドされたファイルはdist以下に作成される。
$ tree dist/
dist/
├── index.html
└── static
├── css
│ └── app.4252902bf68c0f1b9cc98bc4150de315.css
└── js
├── app.2b6a0ee892cff2733d09.js
├── app.2b6a0ee892cff2733d09.js.map
├── manifest.f7fb17029c5d42943fc8.js
├── manifest.f7fb17029c5d42943fc8.js.map
├── vendor.c8931c1e41644ebffc2d.js
└── vendor.c8931c1e41644ebffc2d.js.map
3 directories, 8 files
これらのファイルをドキュメントルートなどに持っていけば良い。
# 例: Dockerのnginxイメージを使って完成品を確認してみる $ docker run -p 80:80 -v $PWD/dist:/usr/share/nginx/html nginx:latest
僕が使い始めた頃は2.0も出始めで若干しんどい面もあったんだけど、今では公式サイトのドキュメントも日本語化されているし参考になりそうな書籍もちらほら出てきてて、かなり手を出しやすい状況になってきたんじゃないかと思う。（街の噂では人気も上がってきたらしいしね）
- 作者: nasum
- 発売日: 2017/10/21
- メディア: Kindle版
- この商品を含むブログを見る
