Vue CLIを使いたい

そんな思いのもとで、「そういえばポートフォリオ作ってない」と思いたち、製作しました。
今回はVue CLI関連の自分用備忘録として残しておきます。

基礎知識

npmとは、Node.jsのパッケージ管理ツールで、Node.jsと一緒にインストールされる。
ビルドツールはnpmを使ってインストールできる。
※のちにyarnをオススメされる。yarnの方がインストール速度が速い。

【参考記事・書籍】
記事：【JavaScript】ビルドとは何か〜webpackを使ってビルドする
記事：【Vue.js】Vue CLIでSPAプロジェクトを作成する
記事：JavaScript Primer ※js初学者万人にオススメ
書籍：基礎から学ぶ Vue.js

環境

AWS Cloud9 ▶︎ VSCode
$ vue --version 2.9.6
$ npm -v 6.9.0

エラー出現場所

AWS Cloud9上でwebpack-dev-serverを起動させた時

Vue CLI2ver
https://qiita.com/tetsuya-zama/items/d6ffc28ed6d67abab037

Vue CLI3ver
https://upd.world/vue-cli-3-error/

脆弱性の警告を受けたnpmパッケージがあるという警告

この直し方は以下の記事で解決。
found 10 vulnerabilities (6 moderate, 4 high)
run npm audit fix to fix them, or npm audit for details
https://qiita.com/hibikikudo/items/0af352acac85fce28ec2

主な使用技術

ライブラリ

Vue-chartjs
グラフ描画ライブラリでおなじみChart.jsのラッパーを使用しました。
基本的な書き方はvue-chartjsの公式で、カスタマイズはChart.jsの公式で簡単にわかります。業務で一時期Highchart勢だったので日本語ドキュメントがとてもありがたい…。
簡単なのでオススメ。
https://vue-chartjs.org/ja/
https://misc.0o0o.org/chartjs-doc-ja/
https://qiita.com/kiyc/items/a94a202bf06fff644f62

Sassの導入

SCSS語法で書いてみたく導入。
https://qiita.com/morocco/items/b1640cfdbe87817bd6a7

scopedをつけて該当コンポーネントのみ有効になるようにする。
https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html

リセットCSS

ress.css
どれがいいのかわからず迷いましたがReset.cssとNormalize.cssのいいとこ取りのようだったのでこれにしました。
npm install --save ress
https://webdesign-trends.net/entry/8137#i

mixinの作り方
https://qiita.com/nekoneko-wanwan/items/c8498a21ae0e2b2198be

css、以下も参考。
・beforeとafterの使い方
https://saruwakakun.com/html-css/basic/before-after

ビルド時

Firebaseでフォーム作成

Firebaseでログイン時詰まった

Cloud9だとこういうところが詰まりやすい（のちにvscodeに移行）
https://blog.f-arts.work/archives/817

Firebase initでのエラー
https://qiita.com/k3ntar0/items/b151034026c8f4a0f447

これをもとに作成
https://qiita.com/ryo2132/items/7cdd6c86dd418095f74a

後ほど使うかもしれない

表示速度向上