vue-cliからの開発メモ - packpak’s diary

vue-cliを使ってアプリを開発しているが、これ色々とテクニックを忘れそうなので、セットアップやフレーム作った時に行ったことのメモをする。

はじめに

vue-cliは、Nodejs製のVueプロジェクトテンプレートを自動生成するツール。初めから色々なものが組み込まれている。

webpack（バンドラ。jsやcssや画像が100個に分かれてブラウザがロードにムキイイ！！ってなるところを黒魔術で１つのJavaScriptにしてダウンロード後展開するようにしてくれるツール）
ESLint（静的解析。ちょっとでもお作法に触れるとビシィ！ってErrorを出す心なきセンセイ）
有名なunitテストフレームワーク（単体テスト）
有名なe2eテスト（End to Endテスト。ヘッドレスブラウザとか使って画面操作相当のことを自動テスト）
ローカル開発で利用する簡易Webサーバー付き（ヤバイ）

使ってみた感じ、このフレームワーク使う？ってかんじでCLIベースで打ち込むだけであら不思議、modernなプロジェクトが出来上がっちゃう。

まずはNodejsをインストール。ここらは下記にまかせる

それから下記に従って、vue-cliを導入

これまた公式ドキュメントの力を借りる

プロジェクトのルート（package.jsonが配置している）にコンソールで入って下記

npm run dev

これでESLint + コンパイル + Webpack + 開発用WebServerが http://localhost:8080 に立ち上がる。以降、srcのコンテンツを更新するごとに自動で差分コンパイルが走って上記に反映される。

（ちなみに、このときのNODE_EVNのデフォルト値=development）

例えばVueの <style lang="scss"> 使いたいなーってとき

プロジェクトルートにコンソールで立って

npm install sass-loader node-sass --save-dev

多分ここはvue-loaderのバージョンによって変わる。2.9.6だと、色んな依存関係の先に下記だった

/(path to project)/build/util.js

設定内容については下記参照

/(path to project)/build/util.js

設定内容については下記参照