勉強日記

チラ裏

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

JavaScript Vue.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

6.2 SFC: Single File Componentとは

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

  • 1ファイル(*.vue)に以下を記述
    • テンプレート定義(<template>)
    • ふるまい(<script>)
    • スタイル(<style>)
  • 従来のweb標準の技術構成からなるため、新しい概念を覚える必要がない
  • 1ファイル1コンポーネントという制限自体がメリット
    • 一貫性
    • 保守性
  • スタイルをカプセル化できる
    • 再利用性
    • 疑似的な名前空間の仕様もある
      • BEMとかもう要らない

6.3 SFCの仕様

6.3.2 <script>ブロック

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>
<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>