More than 5 years have passed since last update.

Vue CLIによるポートフォリオ作成での備忘録（リンク集）

Last updated at 2020-01-14Posted at 2019-10-10

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