VueCLI 入門・コンポーネント

[yuyuyuriko78]

VueCLI

• Vue.jsでアプリケーションを手早くすすめるためのシステム
• npm(Node Package Manager)が必要
  • Node.jsに含まれるツールなので、まずはじめにNode.jsのインストールを行う

    Node.js

    参考サイト

• サーバーサイドでうごくJS
  • フロントもバックも１つの言語（JS）で実行することができる
  • JavaやPHPと同じ働きをする

[yuyuyuriko78]

環境構築

• VueCLIをインストールする npm install -g @vue/cli
• プロジェクトを新規作成する vue create プロジェクト名
• 対話形式で設定を行う https://www.ritolab.com/entry/170 ここがわかりやすい
• サーバを起動する npm run serve
• ブラウザで下記のどちらかにアクセスする

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.20.10.2:8080/

[yuyuyuriko78]

ディレクトリ構造

$ cd プロジェクト名 $ tree -L 1 . ├── README.md ├── build // ビルド用スクリプトを格納 ├── config // ビルド用設定ファイルを格納 ├── index.html // インデックス、最終的にこのファイルに描画される ├── node_modules // パッケージを格納 ├── package-lock.json // パッケージのバージョン情報 ├── package.json // スクリプトやインストールされたパッケージの情報 ├── src // ビルド対象のファイルを格納 └── static // 静的ファイルを格納

---

• メインとなるのはsrcディレクトリ $ cd src $ tree -L 2 . ├── App.vue // 単一ファイルコンポーネント ├── assets // 画像やフォントなどを格納 │ └── logo.png // 画像ファイル ├── components // コンポーネントを格納 │ └── HelloWorld.vue // 単一ファイルコンポーネント └── main.js // エントリーポイントとなるファイル

[yuyuyuriko78]

srcディレクトリ内のディレクトリ・ファイルについて

参考サイト

components

• コンポーネントを格納するディレクトリ

store > index.js

• Vuexの設定を記述するファイル

router > index.js

• VueRouterのルーティング設定を記述するファイル

views

• VueRouterで飛ぶ先の画面をつくっているファイルを格納する

App.vue

• サーバを起動すると呼ばれる本体
• すべてのコンポーネントの親ともいえる

main.js

• Vueインスタンスを生成する
• Vueとその拡張機能を使うための設定を記述する

[yuyuyuriko78]

vueファイル

基本構造

<template>
  <div id="bookApp">
    <子
      v-for="(book, idx) in books"
      v-bind:key="idx" // forに使う一意のキー
      v-bind:bookTitle="title"  // 子に送るデータ
      v-bind:bookId="idx" // 子に送るデータ
      v-on:update="update"  // 子から発火したイベント
    >
  </div>
</template>

<script>
import 子コンポーネント名 from './sample';  

export default {
  name: '親コンポーネント名',
  components: {
    子コンポーネント名,
  },
  props: ['使う親のデータ'],
  methods: {
    メソッド
  },
  computed: {
    メソッド
  },
};
</script>

<style>
.bookApp {
  margin-top: 20px;
}
</style>

[yuyuyuriko78]

コンポーネント

• 部品となるvueファイル。コンポーネントを複数組み合わせて１つのアプリになる
• コンポーネントが別のコンポーネントを使うことができる。（親子関係）
• App.vue以外のvueファイルは、すべてcomponentsかviewsになる。

親側の記述

• temlateタグ内の、コンポーネントを使いたい部分で　<コンポーネント名　/> を使う
• scriptタグ先頭に　import コンポーネント名 from 'フォルダ';
• compornents: { コンポーネント名 }

  
  <template>
  <div id="test">
  <子 v-on:~~ v:bind:~~  />
  </div>
  <template/>
  <script>
  import 子 from 'フォルダ';

export default { name: '親コンポーネント名', components: { 子コンポーネント名 }, .... }

### 子側の記述
 - これといってなし

***

## 親子間のデータ受け渡し

### ★子→親
#### 子側の記述
- メソッド内でエミット（イベント発火）する
  - イベント名は適宜決めてOK　→親側でそのイベント名を使用する
  - 子コンポーネントで定義したデータを送りたい場合は`$this.bookId`のように書く
```js
methods: {
  メソッド名: function() {
    this.$emit('イベントの名前', データの名前);
  }
}

親側の記述

<template>
  <子   v-on:子で指定したイベントの名前=このイベントが子から来たとき起動するメソッド ></子>
</template>

<script>
import 子クラス from 'フォルダ';
export default {
  name: '親コンポーネント名',
  components: {子コンポーネント名},
  methods: {
    メソッド名: function(子で指定したデータの名前){
        処理;
    }
  }
}
</script>

★親→子

親側の記述

<template>
  <子  v-bind:子に送るためのデータ名 = "親でのデータ名"  />
</template>

子側の記述

<script>
export default{
  name: '子コンポーネント名',
  props: ['子に送られたデータ名'],
  ...
}
</script>

[yuyuyuriko78]