この記事では.
webを学んではや３ヶ月が経過して,vueを使ってお仕事をすることができました.
せっかくなので,自分でなにか作ろうと思いたち,使うことができなかったvuetifyと,はやりのfirebaseの勉強の事始めにしたいと思います.
part1では,プロジェクトを作りそのままhostingするだけです.
それぞれの使い方はpart2以降にして,まず環境構築を調べてみます.
事前調べ
vue,vue-cli,vuetify,firebaseについて少し調べました.
特に新しいことは何もないと思います.
vue
「The Progressive JavaScript Framework」がお馴染みなワード
公式doc
React, Angularに並ぶフレームワークだと思います.
最新のロードマップに比較などもあるので参考になります.
road map
vue-cli
vueの開発ツールで,こいつでプロジェクトを管理できます.
公式doc
今回は最新のVue CLI 3.0を使います.昔はv2系を使ってたのでコマンドなどが異なりますのでまとめます.
最初に投稿したもの
vuetify
vueには便利なコンポーネントライブラリが多数あります.NUXT（説明略）でインストールするときにも選択可能なライブラリの一つです.
NUXTの例
Firebase
こちらは最近webやるようになったせいか,qiitaとかでよく目にするな-と思って今回始めて触りました.
googleが買収したmbaas(maas)でバックエンド側の処理をやってくれる便利なやつという認識です.
知識不足でゴメンナサイ..
プロジェクト作成
前提条件
npmが使える環境があり,エディタはVScode
追記ですが,vsCodeの拡張機能にVeturは必要です(vueの開発でコレ無しでは無理です.)
vue-cli
npm install -g @vue/cli
vue create todo-app
このあとに以下の選択が可能です.今回デフォルトでもいいですけど,せっかくなので説明する意味も込めてマニュアルモードでいきます.
といったけど,簡単にしか触れないです.
タイプは今回やめておきます.PWA,UT,E2Eは知識不足で分かってないです.
その後も少し質問が続きます.
1.Use history mode for router ? > Y
2.Pick a CSS pre-processor > Sass/SCSS
3.Pick a linter > ESLint + Prettier
4.to invert selection > Lint on save
5.where do you prefer placeing config for ..? > In package.json
これでインストール開始になります.この後は起動できるかを確認します．
(v2系だとserverだったの変えてたのか..どうでもいいけど)
cd todo-app
npm run serve
下でクリック！
http://localhost:8080/
まずはプロジェクト作成成功です
vuetify化
vue add vuetify
この後の質問は,Choose a preset > Default
もう一度下でクリック！
http://localhost:8080/
だいぶ雰囲気変わりました！
prettier(補足)
おそらくコマンドを叩いているだけでワーニング出ている可能性が高いです.
コード書いて保存するときに文法チェックがかかる設定をしています(Lint,Pretterのところです.)vsCodeの拡張機能を追加して設定をします.
拡張機能からインストールを行います.
完了後は設定をします.
"editor.formatOnSave": true,
"editor.formatOnType": true,
こちら,正直良くわからずに行ってます.ワーニング出ないし統一してかけているからいいやレベルです.今後勉強して行きます.
ホスティング
事前準備
googleアカウントのみです.
サイトからプロジェクト作らなくてもコマンドから作れるけど簡単なので今回はこちらを採用です.
プロジェクト作成
ログイン>コンソールへ移動>プロジェクトを作成します.
firebase
完了後、</>ボタンからソースをコピしておきます.
これで環境構築終わりです
ホスト用ファイル作成
開発環境に戻ります.
まず以下のコマンドで叩きます.
vue install firebase -save
その後に,main.jsにさっきのコピーをペーストします.
これで保存するときに補完などがはしればPrettierも正常に動いている?
npm run build
これでホスト用ファイル作成完了です
デブロイ
次に以下を実行します.これを使ってデブロイします.
npm install -global firebase firebase-tools
firebase login
firebase init
Hostingを選択します.
その後にプロジェクトを選択します(先程作ったけどここでも作れた！)
最後に３つ質問があります.
1.What do you want to use as your public directory ? > dist(さっきビルドしたやつ)
2.Configure as single-page app > Y
3.File dist/index.html already exists. Overwriet? > No
firebase deploy
これで終わりです.
デブロイしたもの
随時更新するので,画像もつけておきます.
まとめ
vue-cli3 + vuetify + firebase の環境構築をしました.
Prettierなどの設定が少し曖昧..
感想は結構簡単だった.(web初心者だし.今までSIerみたいな仕事だったので自分でバックエンド環境を作ったことないので難しいものとと敬遠していた..)
vue-cli3のvue uiも少し調べてみたいな
環境構築は完了しました!
part2ではtodoを作りました.
更新履歴
veturを前提条件に追記しました.
part2作ったのでリンク,タイトルを少し変更しました.