ここのところ仕事ではもっぱら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版
- この商品を含むブログを見る