learning-vue-shop

Vue 3の学習のため、LinkedIn Learningの教材で紹介されていたこちらを追加学習のために変更したもの。 実際に使用することはできない張りぼてECショップです。また、グラフ等のコンポーネントライブラリを試すために無意味な画面を追加しています。

1. Bootstrapを廃止しTailwind CSSに変更
2. 日本語化
3. npmからpnpmに変更
4. 色等見た目を少し変更
5. <script setup>を導入
6. Vuexを導入し、カート機能に利用（プロダクトは導入保留の中途半端状態であえて停止）
7. definePropsを導入
8. vue-chartjsを追加
9. Element PlusのRadio with button styles及びTree V2 virtualized treeを追加
10. 部分的にTypeScriptを使用
11. イベント処理（ESCキーの押下又はメニュー外のクリックでプルダウンメニューを閉じる）
12. カスタムフックの追加（ホームビューかどうかを検出）

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar) + Tailwind CSS IntelliSense.

Customize configuration

See Vite Configuration Reference.

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm run dev

Compile and Minify for Production

pnpm run build

Lint with ESLint

pnpm run lint