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/
```