背景

• Laravelで星評価機能を実装する必要があった
• Vueの既存ライブラリ「vue-star-rating」を活用すると楽に実装出来そうだったので、やってみた

やり方

ターミナルで以下をそれぞれ実行

npm install vue
npm install vue-star-rating

jsファイルに追記

resources/js/app.js

import StarRating from 'vue-star-rating'
Vue.component('star-rating', StarRating);
const app = new Vue({
    el: '#star',
    data: {
        rating: 0
    }
});

ターミナルで以下を実行

npm run dev

→これで、<star-rating>タグを利用可能になります。

ブレードで星表示

<div id="star">
　<star-rating v-model="rating"></star-rating>
</div>

→これで星が表示されるはずです。

星のサイズなどの調整は以下を参考にすればできると思います。

参考

https://github.com/craigh411/vue-star-rating
https://jsfiddle.net/craig_h_411/992o7cq5/
https://www.kabanoki.net/4632/

team-devlop-fornt (ver 2)

Typescript導入後 の最新リポジトリの環境構築の手順です。

https://github.com/team-up-develop/teamup-develop-front

使用する node version

node -v v12.12.0

以下から環境構築手順です！！！

1.git clone

作成したいディレクトリーで以下のコマンドを実行。

git clone https://github.com/team-up-develop/teamup-develop-front.git

ディレクトリーに移動する
cd teamup-develop-front

2.Docker コンテナを構築

 docker-compose up -d --build

• まだイメージが作成されていなければ、イメージを作成して、さらにコンテナを作成・起動する
• すでにコンテナが存在すれば、イメージ・コンテナの再作成は行わず、（停止中の）コンテナを起動するだけ

3.コンテナが起動しているか確認

docker ps

4.コンテナの中に入る。

docker-compose exec app sh

5. パッケージ内容をインストール

npm install

今回のプロジェクトは基本的に yarn ではなく npm を使用すること。

6.run server

npm run serve

vue cli not found と出た場合

rm -rf node_modules package-lock.json && npm install

node モジュールとパッケージを削除して npm をinstallします。

Vue.jsを学んでいる中で、ディレクティブでも重要なv-bindについて言語化するために、シンプルかつ分かりやすさを心掛けて記事化しました。

v-bindとは？

まず、頭に「v-」が付くと、これはVue.jsが用意しているディレクティブ・特別な属性であることを示しています。v-text,v-modelなどディレクティブには色々と種類がありますが、ここではv-bindについて学びます。v-bindにより要素の属性をバインディング、つまり縛ることができます。

いつ・どのように使うのか？

ではこのv-bindをいつ使うのか、例を挙げますと以下のようにHTMLの内部で{{ }}(マスタッシュ構文)を使用した場合、

誤

<div id="app">
 <a href="{{ url }}">Google></a>
</div>

<script>
new Vue ({
  el: '#app',
  data: {
  　url: 'https://google.com',
  }
})
</script>

このように書くとGoogleを押下しても{{ url }}というリンク先に飛ばされてしまい、意図していない結果になってしまいます。

ここではマスタッシュ構文ではなく、Vueが用意しているv-bindを使うことにより正しくリンク先を表示させることができます。

正

<div id="app">
 <a v-bind：href="url">Google></a>
</div>

<script>
new Vue ({
  el: '#app',
  data: {
  　url: 'https://google.com',
  }
})
</script>

以下のような省略形でも表記可能です。私は慣れていないのでv-bind表記を使用します。

省略形

<a :href="url">Google></a>

v-bind時には{{ }}(マスタッシュ構文)ではなく、単に""内にurlを入れるということに気をつけてください。

まとめ

このように、v-bindというディレクティブを利用することで、JSにより動的に変化させることができる、というものでした。
ディレクティブには、v-on,v-model,v-if,v-forなど様々ありますので、随時まとめていきます。

vue cliでアプリケーションを作った際に起きたことをメモ

環境

virtual boxでの仮想環境on Windows 10
OS: ubuntu 18.04
WSLは特有の謎現象が多いので趣味で使うのをやめた

背景

vue cliをインストール&アプリケーションを新規作成

npm install -g @vue/cli
sudo vue create my app

エラー内容(ディレクトリ名などに含まれる具体的な名称は消してます)

Vue CLI v4.5.9
 WARN  You are using an outdated version of NPM.
there may be unexpected errors during installation.
Please upgrade your NPM version.
✨  Creating project in /home/Project/myapp/myapp.
⚙️  Installing CLI plugins. This might take a while...

npm ERR! Linux 5.4.0-53-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install" "--loglevel" "error" "@vue/cli-plugin-babel@~4.5.0" "@vue/cli-plugin-eslint@~4.5.0" "@vue/cli-service@~4.5.0" "--save-dev"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code EMISSINGARG

npm ERR! typeerror Error: Missing required argument #1
npm ERR! typeerror     at andLogAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:31:3)
npm ERR! typeerror     at fetchPackageMetadata (/usr/share/npm/lib/fetch-package-metadata.js:51:22)
npm ERR! typeerror     at resolveWithNewModule (/usr/share/npm/lib/install/deps.js:456:12)
npm ERR! typeerror     at /usr/share/npm/lib/install/deps.js:457:7
npm ERR! typeerror     at /usr/share/npm/node_modules/iferr/index.js:13:50
npm ERR! typeerror     at /usr/share/npm/lib/fetch-package-metadata.js:37:12
npm ERR! typeerror     at addRequestedAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:82:5)
npm ERR! typeerror     at returnAndAddMetadata (/usr/share/npm/lib/fetch-package-metadata.js:117:7)
npm ERR! typeerror     at pickVersionFromRegistryDocument (/usr/share/npm/lib/fetch-package-metadata.js:134:20)
npm ERR! typeerror     at /usr/share/npm/node_modules/iferr/index.js:13:50
npm ERR! typeerror This is an error with npm itself. Please report this error at:
npm ERR! typeerror     <http://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /home/Project/myapp/myapp/npm-debug.log
 ERROR  command failed: npm install --loglevel error @vue/cli-plugin-babel@~4.5.0 @vue/cli-plugin-eslint@~4.5.0 @vue/cli-service@~4.5.0 --save-dev

対処

ここに書いてあった。

sudo npm install -g n
sudo n latest
sudo npm install -g npm
hash -d npm
npm i

一通り実行したところアプリケーションの作成に成功した。

環境変数に入れたやつを反映させる vuejs .envの使い方

環境変数に入れるのはAPIの大事なキーとかだった気がする

環境変数ファイルを作成
ドキュメント
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

VUE_APP_TITLE=My Appこんなかんじで使うらしい

.env　●作成

VUE_APP_TITLE=Vuetify Todo //●作成＝〇〇をタイトルとかに使っていく

たくさん使うので、ストアに入れて、汎用性をもたせる
アクセスにはこんなかんじらしい
process.env.VUE_APP_NOT_SECRET_CODE・・・・

store.js

export default new Vuex.Store({
  state: {
    appTitle:process.env.VUE_APP_TITLE,//●ステートのデータに環境変数envにアクセスしていれる名前はappTitle

app.vue

 <v-toolbar-title class="text-h4 ml-4">
      {{$store.state.appTitle}} //●ストアーにアクセスして表示させる
  </v-toolbar-title>

こんなかんじで反映できた

環境変数は未だによくわからんけど、プログラムで使う大事なAPIのキーとかをいれていたような。。。
今後かなり重要そうなので、メモしました

HTMLファイル上で「!」を打った際に表示させたいコードスニペット

VScodeエディタ上でHTMLファイル上でvue.jsのCDNを読み込んでコーディングすることを想定した環境です。

操作手順

shift+command+pで検索窓を表示⇨「基本設定：ユーザースニペットの構成」⇨「html」で検索⇨「html.json」を選択

html.json

{
    "html5": {
        "prefix": "!",
        "body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <title>${1:Document}</title>\n  <link rel=\"stylesheet\" href=\"${2:./css/style.css}\">\n</head>\n<body>\n  <div id=\"app\">\n\n  </div>\n  <script src=\"https://unpkg.com/vue@next\"></script>  \n  <script src=\"app.js\"></script>\n$0</body>\n</html>"
  }
}

出力されるコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="../style.css">
</head>
<body>
  <div id="app">

  </div>
  <script src="https://unpkg.com/vue@next"></script>  
  <script src="app.js"></script>
</body>
</html>

文字列じゃなくて、実際の日付を反映させていく

前のやつ
https://qiita.com/shoiizuka/items/6f4fa25b23c6f830b3fb

前のやつは文字列だったけど、dateーfnsを通じて、時計みたいな感じにする

LiveDate.vue

<template>
  <div class="text-subtitle-1 ml-4">
    {{date}}　<!-- 8データの値を反映 -->
  </div>
</template>

<script>
import {format} from 'date-fns' //1日付処理のやつイン。前にnpmでインストールした

export default {
  data(){　//2新しく設定
    return{
      date:'' //3空にしとく
    }
  },
  methods:{
    getDate(){　 //4データに入れる日付はメソッドにする
      this.date = format(new Date(), 'MMM d')　//5thisでdataのdateに今日の日付をいれる
    }
  },
  mounted(){//6リロードしたときに反映させたいので、マウンテッドの中に
    this.getDate()　//7,メソッドを使う
  }
}
</script>

前にnpmインストールしたやつ
日付をうまいこと反映させてくれる、パッケージ
https://date-fns.org/v2.16.1/docs/format

これで、今日の日付が反映された

日付にプラスして時間も追加したい

前にnpmインストールしたやつ
日付をうまいこと反映させてくれる、パッケージ
https://date-fns.org/v2.16.1/docs/format
のドキュメントを見てみると、

Month (formatting)
M1, 2, ..., 12
Mo 1st, 2nd, ..., 12th
MM 01, 02, ..., 12
MMM Jan, Feb, ..., Dec
MMMM January, February, ..., December ●これ採用
MMMMM J, F, ..., D

Hour [0-23]

H　0, 1, 2, ..., 23　●これ採用
Ho　0th, 1st, 2nd, ..., 23rd7
HH　00, 01, 02, ..., 23

Minute
m 0, 1, ..., 59　
mo 0th, 1st, ..., 59th7
mm 00, 01, ..., 59　●これ採用

Second
s 0, 1, ..., 59
so 0th, 1st, ..., 59th7
ss 00, 01, ..., 59　●これ採用

と書いてあるので

LiveDate.vue

  methods:{
    getDate(){
      this.date = format(new Date(), 'MMMM d,H:mm:ss') //１,月時間分秒を表示、コロン区切り

リロードすれば表示が切り替わるが、セットタイムアウトで毎秒切り替わるようにする

LiveDate.vue

  methods:{
    getDate(){
      this.date = format(new Date(), 'MMMM d,H:mm:ss')
      setTimeout(this.getDate,1000)  //2,１秒毎にmountedのgetdateを実行
    }
  },
  mounted(){
    this.getDate()
  }

日付が細かく入るようになった

ヘッダーに新しいコンポを追加

app.vue

新しく日付をヘッダーに追加
 <v-row>
 Octover 20,14:40
</v-row>

が、ヘッダーからはみ出る、、、
追加したのはv-app-varのタグの中なので、

app.vue

 <v-app-bar　●これ
      app
      color="primary"
      dark
      src="mountains.jpg"
      prominent
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
        ></v-img>
      </template>

      <v-container class="pa-0">
      <!-- ヘッダー上側のアイテム -->
        <v-row>
          <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
          <v-spacer></v-spacer>
          <!-- 検索窓 小 -->
          <search/>
        </v-row>
      <!-- ヘッダー下側のアイテム -->
        <v-row>
          <v-toolbar-title class=" ml-4">
            Vuetify Todo
            </v-toolbar-title>
        </v-row>

        <v-row >●これ
            Octover 20,14:40
        </v-row>
      </v-container>
    </v-app-bar>

公式サイトのUIコンポのAPPーBARを見る
APIを見る
https://vuetifyjs.com/en/components/app-bars/

prominentは
Increases the height of the toolbar content to 128px.
なので、１２８ｐｘっぽいちょっと高さを変えればよさそう

hightは
Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. prominent, dense, extended, etc.
なので、prominentは設定できるっぽい

文字のサイズは
text and typographyによると

These classes can be applied to all breakpoints from xs to xl. When using a base class, .text-{value}, it is inferred to be .text-xs-${value}.
なので、クラスをつけてtext-〇〇で対処するっぽい
〇〇は一覧がある

app.vue

    <v-app-bar
      app
      color="primary"
      dark
      src="mountains.jpg"
      prominent
      height="170"　●追加
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
        ></v-img>
      </template>

      <v-container class="pa-0">
      <!-- ヘッダー上側のアイテム -->
        <v-row>
          <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
          <v-spacer></v-spacer>
          <!-- 検索窓 小 -->
          <search/>
        </v-row>
      <!-- ヘッダー下側のアイテム -->
        <v-row>
          <v-toolbar-title class="text-h4 ml-4">　●テキストサイズをｈ４に
            Vuetify Todo
            </v-toolbar-title>
        </v-row>
        <v-row >
          <div class="text-subtitle-1">　●テキストサイズをサブタイトルの大きさに
            Octover 20,14:40
          </div>
        </v-row>
      </v-container>
    </v-app-bar>

サイズがいい感じに収まった！

これを別のコンポにしていくー小コンポ作って移動

components>Tools>LiveDate.vueを作成

LiveDate.vue

<template>
  <div class="text-subtitle-1 ml-4"> ●移動
    Octover 20,14:40
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

親コンポで読み込み。もともとapp.vueにいれたので、

app.vue

......いろいろ

 <v-row >
    <live-date-time/>　●元あった所に小コンポ反映
 </v-row>
</v-container>

<script>
 export default {
 components:{
 'search':require('@/components/Tools/Search.vue').default,
 'live-date-time':require('@/components/Tools/LiveDate.vue').default, ●小コンポ読み込み
 'snackbar':require('@/components/Shared/Snackbar.vue').default