Vue Router

JSひろばアプリもほぼ完成に近づいていきました。今日は最終的にvue-routerを入れて、URLで指定したコードのIDをコンソールに貼り付けできるようにします。これで、これからJSのチュートリアルを作成する際にリンクを貼り付けて、そこからサンプリコードを実行できるようにすることが目的です。 今後はユーザーがコードを登録できたり、シェアできるようにできたら楽しいなと思います。オープンソースなので皆さんでカスタマイズして試してください。 作業日 2022年12月28日 作業にかけた時間 6時間 合計作業時間 30時間 作業内容 モジュールインポートエラーの対応favアイコンの作成英語版に対応させるDBモデルの改修Google Analyrticsの追加ローディング画面の設定Vue-routerの追加 モジュールインポートエラーの対応 Vueアプリをnpm run buildのコマンドでプロダクション用にコンパイルするとデプロイしようとすると下記のエラーが出ました。 調べてみると、npmでインストールしたハイライトのプラグインのCSSをインポートしていることが原因の様でした。rollupでモジュール内のCSSをエクスターナルのファイルとして特例で設定しないといけないようです。 vite.config.jsで下記の様にbuildの部分を追加して再度npm run buildを実行したところ、問題が解決できました。 favアイコンの作成 Adobeのイラストレーターでブックマークに使われるアイコンを作りました。SVGで作成したのでデスクトップのブックマークでも画像がぼやけないようにしました。 英語版に対応させる 日本語だけだとユーザーが限られるので英語版に対応したアプリにさせます。このようにToggle（トグル）させるボタンをつくりRefでisJapaneseがtrueかfalseかを判定させるようにしました。このデータはPiniaに保管されグローバルにアクセスできるようにしています。 DBモデルの改修 では英語版に対応したデータがないのでDjangoのモデルを追加します。英語用のフィールドと難易度をチョイスで追加しました。 Google Analyticsの追加 Google Analyticsを追加しました。特に説明する必要はないと思いますが、headタグ内に用意されたscriptを配置しただけでOKです。　 難易度のフィルター 次にコマンドの例を初級、中級、上級に分けてソートする機能を付けました。 ボタンが順番に表示されるようになり、それに合わせてデータがフィルターされます。 Vue-Routerの追加 最後に、データベースから引っ張ってきたコードはIDでURLの最後にくっつけます。これでブログとかでコードを指定して表示させたい場合は、URLでそのまま引用できるようになります。 で、検索されたコマンドがペーストされた後に、URLにIDを飛ばしました。 URLを監視する Vue-Routerを使う一番の理由である、URLから目的のコードをコピペされた状態にするということを達成するために、watchEffect()を使いました。 これでアプリのイニシャライゼーション（初期読込）の時とURLが変わったときにフェッチしたデータをコンソールにペーストできるようになりました。 とりあえず完成とします。あとは、Django側でデータを入れて、JSの記事に使えるか試してみます。 お疲れ様です。