Vue.jsの環境構築 #Vue.js

Node.jsをインストール
最新版は不具合が多いので推奨版をインストール
https://nodejs.org/ja/
　

VSCode
以下のプラグインをインストール

Vetur：Vue.jsのサポート
VueHelper：Vue.jsのコード補完
HTML Snippets：HTML5のコード補完
language-stylus：stylusのサポート
HTML CSS Support：CSSのサポート
ESLint：JavaScriptのlint
TSLint：TypeScriptのlint

vueをインストール
ターミナルで以下を入力

$ npm install -g @vue/cli
//インストールできたかの確認は以下
$ vue --version

Firebase
バックエンドの処理を代わりにしてくれるサービス
本来はPHPなどのサーバーサイド言語で、行うことを代わりにしてくれる
https://console.firebase.google.com/u/0/?hl=ja&pli=1

　
　
VSCode→デバッグボタンを押下→ターミナル
①下記を入力してVueにディレクトリ作成

$ vue creat ディレクトリ名

　
②Vueディレクトリの設定
↓キーでManually select features 選択し Enter

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

　
③↓キーで選択し、スペースでlint以外チェックし、Enter
④コメントの通り行う

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert se
? Check the features needed for your project: TS, PWA, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes  //enter
? Use Babel alongside TypeScript for auto-detected polyfills? No //enter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes //ernter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus //Stylus選択
? Pick a linter / formatter config: TSLint //TSLint選択
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint 
on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No //enter

nmpにfirebaseのツールパッケージをインストール
※npm (Node.js Package Manager)
Node.jsをパッケージ(Package)を管理(Manager)するツール
パッケージは、予め用意された便利な機能をまとめたもの
①以下のコマンド入力し作ったディレクトリに移動

$ cd ディレクトリ名

②以下のコマンド入力し、ディレクトリの中にnpmを作成

$ npm run serve

③Ctr + c で止める
④下記を入力しnmpをコンパイルする

$ npm run build

　
　
⑤下記を入力しnmpにfirebaseのツールパッケージをインストールする

$ npm install -g firebase-tools

※ -g をつけることで、使用しているコンピュータ内のパッケージを全て表示する
⑥firebaseのツールが使えるようになったかの確認は以下を入力

$ firebase --version

※build
大規模プロジェクトを作成するときなどは、ソースコードのファイルがたくさん作られる
そのそれぞれのソースコードをそれぞれの機械語に翻訳した後、１つの実行ファイルにまとめることを指す
ソースコードをそれぞれ翻訳するのがコンパイル
コンパイルされた複数のファイルを１つの実行ファイルにまとめるのがリンク
ビルドはこのコンパイルとリンクをまとめて行なっている
　
　
　
deploy設定

①下記を入力しfirebaseのアカウントにログイン

$ firebase login

※loginで来なかったら下記を入力し、再度ログイン処理を行う

$ firebase logout

下記が表示されたら成功

✔  Success! Logged in as アカウントアドレス
matsuihidenori-no-MacBook-Pro:firebase-training matsuihidenori$ firebase login
Already logged in as アカウントアドレス

　
　
②下記を入力

$ firebase init hosting

　
　
　
③プロジェクト選択しEnter
④コメントの通り入力

? What do you want to use as your public directory? dist //distと入力
? Configure as a single-page app (rewrite all urls to /index.html)? No //enter
✔  Wrote dist/404.html
✔  Wrote dist/index.html

　
　　
⑤下記を入力

$ firebase deploy

　
　
　
⑥以下が表示されるので、command + クリックでURL選択

Project Console: https://console.firebase.google.com/project/プロジェクト名/overview
Hosting URL: https://プロジェクト名.firebaseapp.com

※以後は、$ firebase deployと入力すればいつでもdeployできる

※deploy
ビルドしてできたファイルを実行する環境にあわせて、実際に実行できるようにすること

開発者がデプロイして「準備おっけーだよ」ってあげたやつはネットワーク上で利用できるようになる
例えばブラウザでできるゲームとか
　
　
　
　
ライブラリの導入

$ cd ディレクトリ名

$ npm install firebase vuetify axios date-fns

VSCode
フォルダーを開くを押下
srcに
repositoly
firebaseConfig

export const firebaseConfig = {
  apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  authDomain: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  databaseURL: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  projectId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  storageBucket: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
  messagingSenderId: 'XXXXXXXX',
}

firebaseの初期化コード

import { firebaseConfig } from '@/repository/firebaseConfig';
import firebase from 'firebase/app';
import 'firebase/firestore';

firebase.initializeApp(firebaseConfig);
firebase.firestore.FieldValue.serverTimestamp();

Vuetifyの初期化コード

import Vuetify from 'vuetify';
import colors from 'vuetify/es5/util/colors’;


//追加 themeはお好みで
Vue.use(Vuetify, {
　theme: {
　　original: colors.purple.base,
　　theme: '#5982EE',
　　twitter: '#00aced',
　　facebook: '#305097',
　　line: '#5ae628',
　　error: '#F26964',
　　succcess: '#698FF0',
　},
　options: {
　　themeVariations: ['original', 'secondary'],
　},
})

ターミナルで下記入力でプレビュー確認

$ npm run serve

command + クリックで選択し、画面を表示

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