D.Horiyama's output

Vue.js入門 基礎から実践アプリケーション開発まで Chapter6

JavaScriptVue.js勉強メモ

Chapter6 単一ファイルコンポーネントによる開発

6.1 ツールのインストール

6.1.1 Vue CLI

面倒な開発環境構築を担ってくれる

  • モジュール化

  • build

    • bundling
    • preprocessor
  • lint

  • テスト

    • E2E
    • 単体

インストール

$ npm install -g @vue/cli@3.0.1 @vue/cli-service-global@3.0.1

インストール確認

$ vue --version
3.0.1
Note
  • Nodeが古い場合、バージョンアップが必要 (8.9～)
  • Macでpkg版のNodeを入れてしまっていたので、これを機にHomebrewで入れなおした
    macにnodebrewをインストールする

6.2 SFC: Single File Componentとは

中規模以上のアプリケーション開発で必須

  • 1ファイル(*.vue)に以下を記述

    • テンプレート定義(<template>)
    • ふるまい(<script>)
    • スタイル(<style>)
  • 従来のweb標準の技術構成からなるため、新しい概念を覚える必要がない

  • 1ファイル1コンポーネントという制限自体がメリット

    • 一貫性
    • 保守性

  • スタイルをカプセル化できる

    • 再利用性
    • 疑似的な名前空間の仕様もある
    • BEMとかもう要らない

6.3 SFCの仕様

6.3.2 <script>ブロック

  • 最大1つまで

  • 他のコンポーネントのインポートはここで行う

    • ES6のimport
  • アプリケーションや他のコンポーネントからインポートさせるためにexport default必須

6.4 SFCのビルド

webpack使え

Vue Loader使え

6.5 SFC体験

vue serve component.vue --open

  • SFC component.vue をビルド

    • 内部でwebpackとVue Loaderを使う(設定要らず！)

  • ブラウザでビルド結果を表示 (--open)

    • HMR: Hot Module Replacement を提供。
      モジュールに変更を加えると、自動的にリビルドされ、ページのリロードなしにブラウザに反映される
    • localhost:8080が立つ
    • emacsのskewer-modeで8080ポートを既に使っていたところ、
      8081を代わりに使ってくれた。かしこい

注意

Mac Safariだと謎のキャッシュが働き、変更が更新されないことがある。
マジで何やっても消えなかった
Chromeなら大丈夫

6.6 SFCの機能

従来のweb標準の技術構成からなるとはいえ、Vue.js独自拡張もある

6.6.1 外部ファイルのインポート

  • <template src="...">
  • <script src="...">

  • <style src="...">

    • cf. 普通のHTML5でCSSを読み込むときは<link rel="stylesheet" href="..." />

6.6.2 スコープ付きCSS

スタイルのカプセル化

<style scoped> とすると、ビルド後、当該要素に一意なスコープIDが付与される

.message[data-v-3bcf9374] { color: #42b983; }
<p data-v-3bcf9374 class="message">hello</p>

scopedとそうでないの、複数の<style>を含められる

注意

コンポーネントに外からCSS classを指定すると、スタイルのカプセル化を破壊することがある

  1. 例えば、<div>に展開されるコンポーネント<hoge>がある
  2. <hoge class="header"> は <div data-v-12345678 class="header"> に展開される
  3. <hoge> の scoped styleで .header[data-v-12345678] が定義されていた場合、これがルート要素に適用されてしまう。
    (内部で.headerに適用するはずのスタイル)

6.6.3 CSSモジュール

scoped CSSよりも強力

つかいかた

CSS
<style module>
.message { color: red; }
</style>
HTML
<p v-bind:class="$style.message">hola</p>

  • v-bindでクラスを指定する

    • scoped CSSとは異なり、ビルド後は、クラス名そのものがマングリングされる
    • 執筆時に試したところ、css_module_message_2Ihug になった

<style module> を複数使うとき

$style が上書きされてしまうので、module="module-name" を与える

CSS
<style module="alert">
.message { color: red; }
</style>

<style module="info">
.message { color: blue; }
</style>
HTML
<p v-bind:class="alert.message">hola</p>

$styleはundefinedになる

6.6.4 他言語実装のサポート

コード側

<template>
  • Haml
  • Pug
<script>
  • TypeScript
  • Flow
<style>
  • Sass
  • Less

各ブロックのlang属性で言語名を指定する

環境構築側

VueCLIでやる(推奨)
$ vue create other-lang

対話型コンソールで環境構築できる
上記の例では、./other-lang/ に環境が構築される

自分でがんばる
例) Pug
$ npm install --save-dev pug-plain-loader
<!-- <template>
     <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
     </div>
     </template> -->

<template lang="pug" >
  div#app
    img(src="./assets/logo.png")
    hello-world(msg="Welcome to Your Vue.js + TypeScript App")
</template>