目的

Vueのコンポーネント間で利用するあれこれを知識としてまとめておく

環境

Windows10
node v12.2.0
@vue/cli 4.1.1
vue v2.6.10

コンポーネント基本(定義と利用)

コンポーネント側

src/components/buttonCounter.vue

<template>
  <button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>

<script>
export default {
  data: function() {
    return {
      count: 0
    };
  }
};
</script>

呼び出し側

src/App.vue

<template>
  <div id="app">
    <buttonCounter/>
  </div>
</template>

<script>
import buttonCounter from './components/buttonCounter.vue'

export default {
  components: {
    buttonCounter
  }
}
</script>

データの受け渡し

静的データ

src/components/blogPost.vue

<template>
  <h3>{{ title }}</h3>
</template>

<script>
export default {
  props: ["title"]
};
</script>

</script>

src/App.vue

<template>
  <div id="app">
    <blogPost title="My journey with Vue"></blogPost>
    <blogPost title="Blogging with Vue"></blogPost>
    <blogPost title="Why Vue is so fun"></blogPost>
  </div>
</template>

<script>
import blogPost from "./components/blogPost.vue";

export default {
  components: {
    blogPost
  }
};
</script>

変数を利用

• v-bindを利用して値渡しを行う
• 結果は上記と同じ

src/App.vue

<template>
  <div id="app">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:title="post.title"
    ></blog-post>
  </div>
</template>

<script>
import blogPost from "./components/blogPost.vue";

export default {
  components: {
    blogPost
  },
  data: function() {
    return {
      posts: [
        { id: 1, title: "My journey with Vue" },
        { id: 2, title: "Blogging with Vue" },
        { id: 3, title: "Why Vue is so fun" }
      ]
    };
  }
};
</script>

複数bindする必要がある場合

src/components/blogPost.vue

<template>
  <div class="blog-post">
    <h3>{{ post.title }}</h3>
    <div v-html="post.content"></div>
    <div>{{ post.publishedAt }}</div>
    <div>{{ post.comments }}</div>
  </div>
</template>

<script>
export default {
  props: ["post"]
};
</script>

src/App.vue

<template>
  <div id="app">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</template>

<script>
import blogPost from "./components/blogPost.vue";

export default {
  components: {
    blogPost
  },
  data: function() {
    return {
      posts: [
        {
          id: 1,
          title: "My journey with Vue",
          content: "content1",
          publishedAt: "publishedAt1",
          comments: "comments1"
        },
        {
          id: 2,
          title: "Blogging with Vue",
          content: "content2",
          publishedAt: "publishedAt2",
          comments: "comments2"
        },
        {
          id: 3,
          title: "Why Vue is so fun",
          content: "content3",
          publishedAt: "publishedAt3",
          comments: "comments3"
        }
      ]
    };
  }
};
</script>

ここまで理解した上で読んで知っておくべきこと

Vue公式Guide#プロパティ

v-bindについてはVueを少し触っただけでも理解できると思いますが、上記リンクの内容をすべて理解している人は少ないのではないでしょうか

個人的要点

• プロパティの形式 (キャメルケース vs ケバブケース)
  • JavaScript 内ではキャメルケース、HTML 内ではケバブケース
• 単方向のデータフロー
  • 親⇒子の単方向のバインディングのみ
  • 例外：オブジェクトと配列は参照渡しのため、子コンポーネント内で配列やオブジェクトを変更すると、親の状態へと影響します。
• プロパティのバリデーション
  • type : String、Number、Boolean、Array、Object、Date、Function、Symbol
  • type はカスタムコンストラクタ関数でもある
• プロパティでない属性
  • プロパティでない属性は、属性としてコンポーネントに受け渡されるが、対応するプロパティは定義されない

なんやかんやでオレオレ証明書作成する

nuxt.config.js

server: {
    https: {
      key: fs.readFileSync(path.resolve(dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(dirname, 'server.crt'))
    }
  }

npm run dev

なんやかんやでオレオレ証明書作成する

nuxt.config.js

server: {
    https: {
      key: fs.readFileSync(path.resolve(dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(dirname, 'server.crt'))
    }
  }

npm run dev

自己紹介的な

はじめまして、小栗旬です。
関東在住、24歳エンジニアです。
2018年8月～ほぼ未経験でSESメインの企業に就職し現在に至ります～。
今年2月から僕が改修を進めている自社パッケージがあるのですが、かくかくしかじかな理由でVue.jsで再構築しようという話になりました。

この記事を書いた理由

• Vueの理解を深める
• アウトプットが苦手なので、克服
• 僕の同僚に見せつける(少しは勉強しろ)

どうせならAdvent Calendarなるイベントで華々しく(？)Qiitaデビューしちゃう。

出来るもの→https://vue-demo-app-a8a49.firebaseapp.com/
ログインボタン押下でホーム画面へ遷移、ホーム画面右上のロゴを押下でログイン画面へ遷移するだけ。
あまりにも内容が薄いことには触れるな。

インスコ

Vueの環境構築を進めるためにはNode.jsが必須？らしい。
ので、まずはNode.jsのインストール。
今回OSはWindows10です。
参考記事→windows10にNode.jsをインストールする

Nodeのインストールと同時に、npmも一緒にインストールされます。
npmとはなんぞや？→npm入門
念のためインストール確認。

node -v
v11.12.0

npm -v
6.11.3

どっちも入っとる事が確認できたところで、ようやくVue CLIのインストール。

npm install -g @vue/cli

こっちも念のため確認。

vue --version
@vue/cli 4.0.5

とりあえずインスコは完了？

Vueアプリケーション作成

Vue CLIでアプリのひな型を作成しちゃう。
vue create アプリ名

アプリ名はとりあえずvue-demo-appとしまそ。

vue create vue-demo-app

すると、なんか聞かれます。

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features    

ザックリ訳:
デフォルトの設定で作っちゃう？
自分で別の機能追加する？

今回のアプリケーションにはvue-routerというパッケージ？をインストールしたいので、[Manually select features]を選択します。
(方向キー上下で矢印の移動、Enterで決定)

すると、インストールしておきたい機能を聞かれます。

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing                                                                                                                                 

それぞれの機能については今回は省きます。
今回はデフォルトのbabel, eslintに加えて、Routerにチェックを入れて進めます。
(方向キー上下で矢印の移動、Spaceでチェック、Enterで決定)

この後も色々と聞かれますが、今回は全てEnterで進めていきやす。

vue createが正常に終わると、現在のディレクトリにひな型が作成されていますので、移動。

cd vue-demo-app

vueアプリケーション実行。

npm run serve

http://localhost:8080/ にブラウザでアクセスすると、vueアプリケーションのひな型が作成されているのが確認できやす。

Vuetify.jsインストール

Vuetifyとは

VuetifyはVue.jsのマテリアルデザインコンポーネントフレームワークです。美しいコンテンツを持つリッチアプリケーションを作成するのに必要不可欠なツールを提供することを目的としています。

ザックリいうと、vueで利用できるUIコンポーネント的な。
簡単にシャレオツなUI実現しちゃうよ的な。

早速作成したアプリに、Vuetifyを導入しちゃいやしょう。

vue add vuetify

vue create時と同じように色々と聞かれますが、とりあえずデフォルトで進めちゃう。
インストールが完了したあと、もう一度[npm run serve]で実行し、もう一度http://localhost:8080/ にアクセスしてみる。

シャレオツ。

色々いじってモックアップ

今回作りたい画面は二つ。

• ログイン画面
• ログイン後のホーム画面

これらをVuetifyのテンプレートを使って作っちゃいます。

ログイン画面

テンプレ

src/views/ にLogin.vueを作成し、こちらのコードを貼り付けます。

src/views/Login.vue

<template>
  <v-app id="inspire">
　　<v-content>
長いので以下略

ホーム画面

テンプレ

src/views/ にHome.vueを作成し、こちらのコードを貼り付けます。

src/views/Home.vue

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      :clipped="$vuetify.breakpoint.lgAndUp"
      app
    >
長いので以下略

vue-routerの設定

src/router/index.jsの中身をいじっていきます。
参考記事→今さら聞けない？Vue Router

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/Home',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

ここまで上記の手順通りで進めている場合、viewsフォルダにAbout.vueが存在するはずですが、いらないので削除しておきませう。

App.vue編集

src/App.vueを編集していきやす。
ざっくりいうとこのファイルで全てのviewを扱っている？(？？？)

App.vueの<template>の中を<router-view/>のみに書き直します。

src/App.vue

<template>
  <router-view/>
</template>

<router-view>とは、現在のルートに合わせてコンポーネントを切り替えてくれる感じです。
今回の例では、
localhost:8080/ でLogin.vueに
localhost:8080/Home でHome.vueに中身が書き換わるイメージです。

では実際に確認してみます。
この状態でまた[npm run serve]コマンドで実行し、
http://localhost:8080/
http://localhost:8080/Home
のそれぞれにアクセスしてみます。

http://localhost:8080/

http://localhost:8080/Home

想定通り、ログイン画面とホーム画面が表示されやした。
src/componentsの中にあるHelloWorld.vueはもう必要ないので削除しちゃいましょう。

ログイン画面のアイコンが正しく表示されていないので、削除しときます。

src/views/Login.vue

<v-form>
  <v-text-field label="Login" name="login" prepend-icon="person" type="text" />
  <v-text-field id="password" label="Password" name="password" prepend-icon="lock" type="password" />
</v-form>

上記から「prepend-icon」という部分を削除。

vue-routerでページ遷移

ログイン画面→ホーム画面へのページ遷移を実装します。
src/Login.vueのログインボタンを以下に編集。

src/Login.vue

<v-btn color="primary" @click="login">Login</v-btn>

src/Login.vueのscript内にmethodsを追加。

src/Login.vue

<script>
export default {
  props: {
    source: String
  },
  methods: {
    login() {
      this.$router.push({ path: "/Home" });
    }
  }
};
</script>

以上でログインボタンを押下するとホーム画面へ遷移するようになっているかと思います。

かなりざっくりと書いていきましたが、今回はとりあえずこの辺で。

終わりに

Qiita初投稿の感想

現在はvueについて理解しているというより感覚で進めている節があるので、それを言語化しようとすると言葉に詰まる。
→他の記事から引用したり、調べながら書いていけばいいと気付く。

「人に説明する」と考えると下手なことが書けない。
→明らかにおかしな事を書いていれば、他のユーザーが指摘してくれるであろう。という事でそこまで意気込んで書く必要はないかもしれない。

ついでに

これからもっと積極的にアウトプットや、SNS等での交流に力を入れようと意気込んでおります～！
ドチャクソ暇な時にでも声かけてください。
ケバブ。

確認した環境

• windows 10 pro 64bit
• node v10.16.0

環境のセットアップ

Vue CLI + electron-builderプラグイン で環境をセットアップします。
electron-vueボイラープレートは更新が止まっているみたいなので使いません。

Vue CLI

以下のコマンドで、Vue CLI をインストールします。

npm i -g @vue/cli

vueプロジェクトを作成します。プロジェクト名はmy-projectにしました。

vue create my-project

以下のコマンドで、Welcomeページが表示されるのを確認します。webブラウザにhttp://localhost:8080/を指定することで確認できます。

cd my-project
npm run surve

electron-builderプラグイン

続けて、プロジェクトフォルダの直下で以下のコマンドを実行し、electron-builderプラグインをインストールして呼び出します。これにより、electronやその依存パッケージ、スクリプトが追加されます。

vue add electron-builder

途中でインストールするelectronのバージョンの選択を求められますが、6.0.0を選択しました。

最後に以下のエラーが表示されますが、使用に影響はないようです。

---(省略)---

16 packages are looking for funding.
Run "npm fund" to find out more.
-  Running completion hooks...
error: 'installVueDevtools' is defined but never used (no-unused-vars) at src\background.js:6:3:
  4 | import {
  5 |   createProtocol,
> 6 |   installVueDevtools
    |   ^
  7 | } from 'vue-cli-plugin-electron-builder/lib'
  8 | const isDevelopment = process.env.NODE_ENV !== 'production'
  9 |


1 error found.

実行とアプリケーションのビルド

webアプリとして実行

npm run serve

デスクトップアプリとして実行

npm run electron:serve

ビルドしてデスクトップアプリを作成

プロジェクトフォルダ直下のdist_electronフォルダ内に実行ファイルが作成されます。

npm run electron:build

ビルドオプション

プロジェクトのルートにvue.config.jsファイルを新規作成し、そのファイル内容を記述します。

記述例：

vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        productName: "my-application",
        appId: "com.sample.myapplication",
        win: {
          icon: 'src/assets/app.ico',
          target: [
            {
              target: 'zip', // 'zip', 'nsis', 'portable'
              arch: ['x64'] // 'x64', 'ia32'
            }
          ]
        }
      }
    }
  }
}

builderOptions:

• productName : アプリケーションタイトル
• appID : アプリケーションユーザーモデル ID (AUMID)として使用される。
• win : windowsアプリの設定
  • icon : アプリケーションアイコンのパス
  • target :
    • target : 配布形態
    • 'zip' : zip圧縮
    • 'nsis' : Nullsoft Scriptable Install System
    • 'portable' : インストーラーのないポータブルアプリケーション
    • 'msi' : Microsoft Installer
    • 'appx' : UWPアプリパッケージ
    • arch: プラットフォーム
    • 'x64' : 64bitアプリケーション
    • 'ia32' : 32bitアプリケーション

参考：Any Windows Target