そんな今日この頃の技術ネタ

本家側に書くほどでもない小ネタ用

vue-cliでサクッと始めるVue.js

 ここのところ仕事ではもっぱらVue.jsを使って(慣れない)フロントエンド開発をやっていたりする。 以前に触っていたAngular.jsと感触が近い部分もあって個人的にはReact.jsより親しみやすい。

f:id:blue1st:20171104041000p:plain:w400

 さて、昨今のフロントエンド開発というとbabelだのwebpackだのと最初に把握しなければいけない要素が多くて、昔のような「ブラウザさえあれば気軽に開発できる」という雰囲気ではなくなってしまったのが門外漢にはしんどかったりするのだが、幸いにしてVue.jsにはサクッと雛形を用意してくれるvue-cliというツールが用意されている。 今回はそのあたりについて軽くまとめてみた。

github.com


導入

 何はともあれ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アプリもいつか作ってみたいなあ)

GitHub - SimulatedGREG/electron-vue: An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.


ファイル構成を確認

 作成されたディレクトリに入って中身を確認してみる。

$ 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.vuecomponents/以下の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も出始めで若干しんどい面もあったんだけど、今では公式サイトのドキュメントも日本語化されているし参考になりそうな書籍もちらほら出てきてて、かなり手を出しやすい状況になってきたんじゃないかと思う。(街の噂では人気も上がってきたらしいしね)

jp.vuejs.org

Hello Vue !!

Hello Vue !!