環境構築でVue CLIによって作られたファイルを見ていく（設定系）
自分が見返すようなので結構適当です。（特に最後のほう）
やりたいことリスト
あんまりコーディングとは関係なさそうな子たち
関係ないわけじゃないけど、普段から触るわけじゃないファイル
知識程度には知っておきたいので軽くまとめる
README
まあ、まずはREADMEから読む。
現場とかなら、命名規則とかが書いてあるのかしら
それぞれのコマンドについて書いてあるだけだった
次！
.browserrslistrc
なにこれ？
対象のブラウザを決めておいて、書いたコードがその対象のブラウザでも、ちゃんと動作するかを確認するときにつかうっぽい
package.jsonに書くこともあるとか
公式のマニュアルとかを見ると現状は、
・シェア率が1%より大きい
・ブラウザのバージョンが、最新かその一つ前
・24か月以内に公式のサポートや更新がないものを除く
・ie11(InternetExplorer)を除く
らしい
今は気にしなくていいかな
参考になったサイト
.editorconfig
エディタが異なってもインデントとか、タブとかを合わせてくれるらしい（公式）
そんなものがあったのか、、、！！
大学１年の時に、友人とWebサイト作っていた時に、AtomとVScodeとでインデントがぐっちゃぐちゃになって、泣きながら整理したトラウマが、、、（あの頃知っていれば、、、）
VScodeはプラグインを入れる必要があるらしい
ほかのエディターでもプラグインが必要なものが結構あるみたい（共同開発するなら、必要なプラグインを一括で入れてくれるやつ導入したいね）
現状は
・.js, .jsx, .ts, .tsx, .vue これらの拡張子のファイルが対象
・インデントのスタイルは、ソフトタブ（半角スペース）
・インデントのサイズは2（半角スペース2つ）
・行末の空白を削除する
・最終行に空行を入れる
気になるところがあれば追加・編集していきたいですね（参考）
.eslintrc.js
ESLintってよく聞く気がする（ルール決めのやつだと思ってる）
どうやらJavaScriptのための政敵検証ツールらしい
バグ見つけたり、スタイル統一してくれたり
プラグインを入れるとリアルタイムで反映してくれるとか
root:true
一番上にある.eslintrcファイルだよ。
これがないと、上に.eslintrcファイルがないか検索しに行くらしい
env
どの環境で使うのかみたいな感じらしい
windows関数とかはブラウザ上なら使えるけど、コード上では定義されてないから、ESLintに怒られるので、それを防ぐみたいな（参考）
Node: true
今回はNode.js上で動かすぜってしている
extends
あらかじめ用意されている設定を読み込む（プラグインとか）
ルールが多すぎて一から設定するのは大変だから、ここでまとめて追加するらしい
vue/vue3-essential
eslintのvue用のプラグインに書かれてるやつ
eslint:recommended
eslintが推奨しているルールたち（参考）
（allのほうがいい説もあるらしい）
@vue/eslint-config-typescript
Vue-TypeScript用のやつ（参考）
rules
個別で設定するルール
vue/multi-word-component-names
コンポーネントの名前は、複数の単語を使おうねっていうルール
なんか邪魔らしいからoffにしてるっぽい
.gitignore
git add の対象外になるファイルを指定するやつ
packege.json
Node.jsにおいてインストールするパッケージが記述されたファイル
コマンド一つで、環境に必要なパッケージを全部インストールしてくれるやつ
下記のどっちかで実行できる（ほかにもあるけど）
npm install
yarn
書き方は調べたほうが早そう（参考）
tsconfig.json
TypeScriptのコンパイルの設定ファイル
Node.jsはTypeScriptをサポートしているわけじゃないので必要とのこと
どのバージョンのJS向けに出力するかとかの設定をするらしい
esnextが何回か出てきたので気になって調べたら、、、
JavaScript 言語は変化し続けており JavaScript コードを書く場合に使用される構文も固定されておらず、時間と共に変化します。Ecma International は JavaScript 言語仕様を制定する組織で、仕様は ECMAScript と呼ばれます。新しい JavaScript 仕様は毎年発行され、2015年に発行された 6番目の版は ES6 と参照されます。このドキュメントではより適切に最新の仕様を ESNext と参照します。
とのこと（参考）
tsconfig.node.json
よくわからんかった
Node上で動かす時のtsconfigみたいな解釈
vite.config.json
Viteの設定ファイル
そもそもViteってなんぞや
細かく見ていく
plugins
拡張するためのプラグインを追加する
Vueのプラグイン
Vutifyのプラグイン
中身までは理解しきれなかった、、、
define
ビルド時にアプリコード内から参照可能なグローバル定数を生成できる。
resolve
インポートの時のファイル名を省略できるようになったりするらしい（参考）
alias
../../views/Home.vue とかを @/views/Home.vue って書けるように設定されている
extensions
拡張子を省略できるっぽい
.vueを省略するのはあまりお勧めされてないっぽいので消しておく
確かに今の職場でも、.vueは書いてたイメージ
sever
全然調べてないけど、localhostのポートの設定とかできそう
3000から8080に変えてみてます
yarn.lock
package.jsonに書かれているライブラリ等の正確なバージョンを記録しているもの
こちらがとても参考になりそう
npm installしたときは、package-lock.jsonになるっぽい（こっちは見たことある）
node_module
nodeの何か
一回消して入れなおす、みたいなことしたことある気がする（何の意味があるかは忘れた）
publick
アイコン画像が入ってた
おわり
座学疲れた、、、
最後らへんめっちゃ適当になってしまった、、、
適時必要な時に思い出して、いじっていきたいなとは思っています。
次はsrcを見ていく！！！