Vue導入サイト構築手順

Vue導入

cd {構築したい場所：この配下にフォルダが作成される}
npm install -g @vue/cli
vue create {アプリ名}
→router,scss,vuexなどのライブラリは手動で選択する
npm run serve
npm run build

参考
https://designsupply-web.com/media/knowledgeside/4639/
https://qiita.com/567000/items/dde495d6a8ad1c25fa43

Vuetify導入（Vueファイルが上書きされるので注意）

vue add vuetify

Firehosting導入

Firebaseに新規プロジェクトを作成
指示にしたがい、Firehostingの設定を行う
FirestoreやFirestorageを利用する場合はそれぞれ作成

（※初めての場合のみ　npm install -g firebase-tools）
firebase login
firebase init
（設定時にpublic directoryについて質問されるがvueのビルド先であるdistを入力する）
firebase deploy

LIFFの導入

linedev登録
lineログイン作成
→LIFFタブのエンドポイントURLにFirehostingでアップしたサイトを登録
Messaging api作成
Messaging APIのQRコードを読み取り友達追加
vueをHistory modeに変更（これをやらないとLIFF情報の取得ができない）
liff cdn をindex.htmlに追加
LIFFサイトのURLをチャットに入力し、そのリンクから表示テストを行う

参考：
liff関連のメソッド
https://qiita.com/h-takauma/items/f954a6c2a8ad9ee4396b
history modeの設定
https://qiita.com/hida/items/a0de65bed0c96fef62a1

LIFFでのログイン関連の実装

  created () {
   let liff = window.liff
   liff
     .init({
       liffId: '{LiffID}'
     })
     .then(() => {
       this.login = liff.isLoggedIn()
     })
  }

Vuexの導入

（vue-cli でvuexのライブラリはインストール済みとする）
store/index.jsにてstate,mutations,actionsを設定する
更新したい場合は

this.$store.dispatch("action名",変数);

取得したい場合は

  computed: {
   変数名() {
     return this.$store.state.変数名;
   }
  }

参考：
https://nmomos.com/tips/2019/11/18/vue-firebase-spa-3/

Firestoreの導入

npm install firebase --save
firestoreフォルダ作成
firestore/firebase.js作成

import Firebase from 'firebase'
import 'firebase/firestore'
const config = {
 apiKey: '<API_KEY>',
 authDomain: '<PROJECT_ID>.firebaseapp.com',
 databaseURL: 'https://<PROJECT_ID>.firebaseio.com',
 projectId: '<PROJECT_ID>',
 storageBucket: '<PROJECT_ID>.appspot.com',
 messagingSenderId: '<SENDER_ID>'
}
const firebaseApp = Firebase.initializeApp(config, 'exercise-vue')
const firestore = firebaseApp.firestore()
firestore.settings({ timestampsInSnapshots: true })
export default firestore

store/index.jsに追加

import firebase from 'firebase';

参考：
https://qiita.com/rubytomato@github/items/78087a2c69389f642760#2-storeindexjs
https://nmomos.com/tips/2019/11/23/vue-firebase-spa-4/