Vue CLI サービス vue/cli -service-global をインストール（失敗）
npm install -g @vue/cli -service-global
npm ERR! Unexpected end of JSON input while parsing near '...:2614807,"npm-signatu'
npm ERR! A complete log of this run can be found in:
さっそくエラー。Unexpected end of JSON input って何だろう。
ログを見たが、同じエラーメッセージで参考にならなかった
ぐぐってみたら、キャッシュをクリアすれば解決したとの先例あり。
【解決】npm install -g @vue/cli で、Unexpected end of JSON input while parsing nearが発生した - よしたく blog
よくあることらしい。
Node.js のキャッシュをクリア
npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.
やった後に警告されてもねぇ。
Vue CLI サービスのインストールを再実行（解決）
npm install -g @vue/cli -service-global
npm WARN deprecated circular-json @0.3.3: CircularJSON is in maintenance only, flatted is its successor.DEPENDENCY : fsevents@1.2.7 (node_modules\@vue\cli -service-global\node_modules\fsevents):DEPENDENCY : Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin ","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ @vue/cli -service-global@3.5.5
とはいえ、いくつか警告が出ているので、一応ここに記録しておく。
サンプルプログラムの起動テスト（成功）
を見ながらサンプルプログラム app.vue を Visual Studio Code (VSCode ) にて打ち込み、vue serve コマンドにてサーバを起動した。
これで Vue CLI サービスの稼働確認は完了とする。
Vue.js devtools で分析できるかも確認しておく（成功）
表示された Vue.js のページを Chrome のデベロッパ ーツールから解析できるアドインのようなものがあるらしい。
tombi-aburage.hatenablog.jp
サンプルプログラムのソースが大したことないので、大したものは見えないが、動作としては問題なし。
サンプルソース を改良し、リアルタイムに更新されることを確認先ほどのサンプルソース app.vue だと、固定テキストを出しているだけなので面白味がない。データ data の値を出力するように改良した。
< template >
< div id = "app" >
< h1 > Hello! </ h1 >
< p > {{ text }} </ p >
</ div >
</ template >
< script >
export default {
name: 'HelloWorld' ,
data (){
return {
}
}
}
</ script >
< style scoped >
p { color : red ;}
</ style >
先ほどと同様 vue serve で起動し、Chrome で開いた後で、VS Code で data の text の文字列を更新して保存するとリアルタイムに表示が変わった。
豊富な部品集
github.com
にある部品の Live Demo のページなどを表示させて、Vue の data の値をいじったりすると、連動して変化するのでとても実感が湧いた。
しかし、これだけ部品資産があるのを見ると、新しく作る必要はない気がしてくるな。GitHub へのリンク集になっているだけなので、欲しいものを探すのは楽ではないし品質は不明だ。
awesome -vue は評判（品質）が不明だが、部品の数と種類は多い。Vue Curated は目安としていいね（星）数が分かるが、部品はかなり少ない。
という感じのようだ。
他にも、いろいろとライブラリがあるらしい
もう一冊、買ってきた。こちらの方が実際のアプリ開発 に近い内容で詳しい。
は当然として、
も入れといたほうがよいらしい。
ところで、どうやってテスト駆動開発 するのだろう。
コンポーネント （.vue ファイル）の単体テスト 方法が良く分からないので、ぐぐった。
lmiller1990.github.io
に「テスト駆動開発 環境を準備」というそのまんまの説明があった。
まずは Vue プロジェクトを作成しないといけないらしい。
VueSample というフォルダを作り、そこで VS Code のワークスペース 作成、npm init まではやってあったが、vue create はやっていなかった。
１つ上の Projects ディレクト リに戻り、 今あるフォルダと同名の VueSample という名前で Vue プロジェクトを生成することにした。
PS E:\Users\tombi\Projects>vue create VueSample
プロジェクト名に大文字は禁止ですと怒られた。細かいなぁ…全部小文字に直す。
PS E:\Users\tombi\Projects>vue create vuesample
標準の registry の応答が遅いから別の registry に接続するか？といった趣旨のことを訊かれたので、任せたところ、何やらファイルを取りに行き始めたが resolveWithNewModule のメタデータ 取得 fetchMetadataで完全に止まってしまった。
Vue CLI v3.5.5CLI plugins. This might take a while...
Ctrl + C で中断させ、もう一度やってみたところ、なぜか今度は通過できたので良しとする。
毎度おなじみ errno -4048 エラー
しかし、もう少し進んだところで結局エラーとなった。
npm ERR! path E:\Users\tombi\Projects\VueSample\vuesample\node_modules\.staging\postcss-81ed59bb\docs\architecture.md
（以下略）
このエラー -4048 は、実際には権限の問題ではなく、単なるファイルアクセスのタイミングが悪いだけらしいと分かってきたので、VS Code を再起動し、再試行するだけにした。
VS Code を再起動し、再試行（２回目）（少し進んだ）PS E:\Users\tombi\Projects\vuesample> cd ..
Overwrite ではなくて Merge の方を選ぶ。
✨ Creating project in E:\Users\tombi\Projects\vuesample.CLI plugins. This might take a while...
npm ERR! path E:\Users\tombi\Projects\vuesample\node_modules\.staging\pako-4e2939c1\dist\pako_inflate.js
（以下略）
少し進んだが、違うファイルで同じエラーとなった。再び再試行。
VS Code を再起動し、再試行（３回目）（少し進んだ）PS E:\Users\tombi\Projects\vuesample> cd ..
Overwrite ではなくて Merge の方を選ぶ。
Vue CLI v3.5.5CLI plugins. This might take a while...
[ ......] \ extract:cssnano-util-get-arguments: sill extract cssnano-util-get-arguments@^4.0.0 extracted to E:\Users\tombi\Projects\vuesample\node_modules\.staging\cssnano-util-get-argum
少し進んだが、別のところ sill extract cssnano なんちゃらの解凍 extract で完全に止まってしまった。Ctrl + C で中断させ、VS Code を再起動し、再試行。
PS E:\Users\tombi\Projects\vuesample> cd ..
Overwrite ではなくて Merge の方を選ぶ。
先ほどの停止箇所は突破し、Installing additional dependencies... のところまで進んだ。
Vue CLI v3.5.5CLI plugins. This might take a while...
setting up Git hooks
added 1154 packages from 912 contributors, removed 7 packages and audited 23618 packages in 77.921s
🚀 Invoking generators...
[ ......] \ extract:rxjs: sill extract rxjs@^6.4.0 extracted to E:\Users\tombi\Projects\vuesample\node_modules\.staging\rxjs-16032bf1 (42329ms)
しかし別のところ sill extract rxjs なんちゃらの解凍 extract で完全に止まってしまった。Ctrl + C で中断させ、VS Code を再起動し、再試行。
VS Code を再起動し、再試行（４回目）（最後まで進んだ）PS E:\Users\tombi\Projects> cd ..
今度は Overwrite するかは訊かれなかった。
（前略）
🎉 Successfully created project vuesample.
$ cd vuesample
どうやら成功したようだ。
※しかし後に、親フォルダを間違って実行していたことが判明する。
Vue.js サンプルアプリ画面が表示された
src サブフォルダ配下に、App.vue というファイルが出来た。
PS E:\Users\tombi> cd vuesample
> vuesample@0.1.0 serve E:\Users\tombi\vuesamplecli -service serve
INFO Starting development server...
DONE Compiled successfully in 2044ms 00:21:05http://localhost:8080/ http://192.168.179.8:8080/
Note that the development build is not optimized.
Chrome で表示した http://localhost:8080
ところが、今回の App.vue は変更してもリアルタイムに Chrome 画面には反映されなかった。ホットリロードを有効にする設定が別にあるのだろうか？
本来の目的だったテスト駆動開発 環境の構築は続行できず。
lmiller1990.github.io
の「テスト駆動開発 環境を準備」をやるつもりが、どうやら最初に vue create したさいの選択肢をすでに誤っていたらしい。
Manually select features
ではなく
default (babel, eslint)
の方を選んでしまったために、テスト環境が設定できなかった。
さらに4回目の再試行で、親フォルダを間違っていた orz
VSCode で App.vue、HelloWorld.vue をどのように改造しても、一切何も反映されない。ホットリロード以前の問題のようだった。
不審に思ってエクスプローラ ーでフォルダやファイルを調べたら、Projects フォルダの配下ではなくて、同列・外側に vuesample フォルダが発見された orz
振り返ると、4回目のコマンドを実行したときのフォルダが間違っている。
PS E:\Users\tombi\Projects> cd ..PS E:\Users\tombi>vue create vuesample
ではなく、
PS E:\Users\tombi\Projects\vuesample> cd ..PS E:\Users\tombi\Projects>vue create vuesample
でなければならなかった。ポカミス。
あわせて「テスト駆動開発 環境を準備」も正しく進めることにする。
最初に Manually select features を選び、Unit Testing を正しく選択
Vue CLI v3.5.5
最終的に、以下の設定でプロジェクトを再生成
Vue CLI v3.5.5Airbnb json
VS Code を再起動し、再試行（５回目）（成功）また止まってしまったので、Ctrl + C で中断後、やり直し。
（前略）
🎉 Successfully created project vuesample.
$ cd vuesample
再試行を５回目繰り返すことにより、ようやく Vue の導入に成功したようだ。
Vue.js サンプルアプリ画面が表示され、App.vue を変更するとリアルタイムに Chrome 画面には反映されるようになった。
しかし、ほとんど盲目的に再試行を５回繰り返すという対処方法は、ちょっと理解しがたい。
yarn なんて導入していないので、指示どおりにテスト実行はできない
lmiller1990.github.io
の「テスト駆動開発 環境を準備」では
インストールが終わったら、cd でプロジェクトのディレクト リに移動し、yarn test:unit を実行します。
と書かれているが、
そもそも yarn は入っていない。
Jest も入っていない
yarn は npm で代替できそうだが、Jest の方は導入しないと話にならぬと思われた。
Jest を導入したら、64個の脆弱性 が発見された
npm install --save-dev jest
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()ansi -colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0 \> for migration path(s).DEPENDENCY : fsevents@1.2.9 (node_modules\fsevents):DEPENDENCY : Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin ","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ jest@24.8.0run `npm audit fix` to fix them, or `npm audit` for details
インストールはされたようだが、64個の脆弱性 が発見されたとのこと。
npm audit fix しても治らない
npm audit fix
npm WARN optional SKIPPING OPTIONAL DEPENDENCY : fsevents@1.2.9 (node_modules\fsevents):DEPENDENCY : Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin ","arch":"any"} (current: {"os":"win32","arch":"x64"})
up to date in 10.485s
64個の脆弱性 が分析されたらしく、更新できない63個と、無理やり更新できないこともない1個に類別された。不可解な英語 vuln の意味が分からない。
npm audit でチェックしてみたが、参照先を見ても何をすればいいのかは、よく分からなかった。ソフトウェア的に危ない部分があるよ、と警鐘を鳴らしている感じの文章だったので、開発者向けなのかもしれない。
Jest の安定バージョンを再インストールしてみる
jestjs.io
で調べると安定バージョンは 24.6 であり、一方 node list で先ほど導入されたものを調べると 24.8 だったので、バージョン指定してやり直すことにした。
npm uninstall jest
しかしアンインストールしても64個の脆弱性 は消えず、バージョン指定して再インストールしても64個の脆弱性 は消えない。打つ手がないので、これらは無視することにした。
Jest の単体テスト サンプルを実行（成功）
Jest をインストールしたところ、
tests (s あり）フォルダ、unit サブフォルダが追加されていた
package.json に test:unit という scripts が追加されていた
npm run test:unit
> vuesample@0.1.0 test:unit E:\Users\tombi\Projects\vuesamplecli -service test:unit
PASS tests/unit/example.spec.js
Test Suites: 1 passed, 1 total
どうやら Jest のサンプルの起動には、成功したようだ。
は、
