3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted 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

###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

###ビルド時
https://qiita.com/tiwu_official/items/43dc554ec43dd951812a

##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

##後ほど使うかもしれない
###表示速度向上
https://qiita.com/renoinn/items/5cab5bed585b413522db

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?