VUETIFY STOREのFreeのTheme downloadして、Vuetifyの開発環境で動作させる

# 事前準備

WSL2を有効にしたWindow PCを使っています。
WSL2を有効にしてUbuntuをインストールし、VSCODEには、`Remote Development`のextension packを導入してください。

# store.vuetifyjs.comにユーザ登録し、ThemeをGetする

https://store.vuetifyjs.com/

ユーザ登録する。

好きなThemeをダウンロードする（Freeのもの選んで試してみるのがよいとおもいます。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/1e287d56-1db1-2343-3c1d-ff9dcc128a9b.png)

Order Historyを開くと、Downloadのボタンがあるのでダウンロードする。

# File Copy
ダウンロードしたファイルを、WSL2のフォルダーにコピーする。
Windows11の場合、エクスプローラにLinuxのフォルダがあって、便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/2ee69571-9483-4449-747c-2b1b8c0415ed.png)

unzipコマンドで解凍する。
unzipコマンドがない場合は、
`sudo apt get install unzip`でインストールする。
エクスプローラで解凍してから、コピーしてもOKですが、WindowsからLinuxのファイルを操作すると非常に遅いので、Linux側でunzipする方が、おすすめです。

```bash
$ unzip ../blog-free-v1.0.0.zip
Archive:  ../blog-free-v1.0.0.zip
 extracting: .browserslistrc
  inflating: .editorconfig
  inflating: .eslintrc.js
  inflating: .gitignore
  inflating: babel.config.js
  inflating: now.json
  inflating: package.json
  inflating: postcss.config.js
  inflating: public/favicon.ico
 extracting: public/favicon.png
  inflating: public/index.html
  inflating: README.md
  inflating: src/App.vue
   creating: src/assets/
   creating: src/assets/articles/
  inflating: src/assets/articles/adventurealtitude.jpg
  inflating: src/assets/articles/adventurecave.jpg
  inflating: src/assets/articles/ancient.jpg
  inflating: src/assets/articles/ancientruins.jpg
  inflating: src/assets/articles/artoftravel.jpg
  inflating: src/assets/articles/autumnclouds.jpg
  inflating: src/assets/articles/beachjar.jpg
  inflating: src/assets/articles/blurcamera.jpg
  inflating: src/assets/articles/christmas.jpg
  inflating: src/assets/articles/firepots.jpg
  inflating: src/assets/articles/garden.jpg
  inflating: src/assets/articles/greengrass.jpg
  inflating: src/assets/articles/jellyfish.jpg
  inflating: src/assets/articles/july4.jpg
  inflating: src/assets/articles/lightcave.jpg
  inflating: src/assets/articles/marketgrains.jpg
  inflating: src/assets/articles/moroccandays.jpg
  inflating: src/assets/articles/mountain.jpg
  inflating: src/assets/articles/mountaincabin.jpg
  inflating: src/assets/articles/pigduck.jpg
  inflating: src/assets/articles/rain.jpg
  inflating: src/assets/articles/ruins.jpg
  inflating: src/assets/articles/snowcabin.jpg
  inflating: src/assets/articles/snowcup.jpg
  inflating: src/assets/articles/spices.jpg
  inflating: src/assets/articles/swedishfishing.jpg
  inflating: src/assets/articles/umbrella.jpg
   creating: src/assets/instagram/
  inflating: src/assets/instagram/adventurealtitude.jpg
  inflating: src/assets/instagram/garden.jpg
  inflating: src/assets/instagram/pigduck.jpg
  inflating: src/assets/instagram/rain.jpg
  inflating: src/assets/instagram/spices.jpg
  inflating: src/assets/instagram/sunset.jpg
  inflating: src/assets/logo.png
  inflating: src/assets/logo.svg
   creating: src/components/
   creating: src/components/base/
  inflating: src/components/base/Btn.vue
  inflating: src/components/base/Card.vue
  inflating: src/components/base/Subheading.vue
   creating: src/components/core/
  inflating: src/components/core/AppBar.vue
  inflating: src/components/core/Cta.vue
  inflating: src/components/core/Drawer.vue
  inflating: src/components/core/Footer.vue
  inflating: src/components/core/View.vue
  inflating: src/components/Feed.vue
  inflating: src/components/FeedCard.vue
   creating: src/components/home/
  inflating: src/components/home/About.vue
  inflating: src/components/home/Articles.vue
  inflating: src/components/home/Banner.vue
  inflating: src/components/home/Social.vue
  inflating: src/components/home/Subscribe.vue
  inflating: src/components/Instagram.vue
  inflating: src/components/NewestPosts.vue
  inflating: src/components/Tags.vue
   creating: src/data/
  inflating: src/data/articles.json
  inflating: src/main.js
   creating: src/plugins/
  inflating: src/plugins/base.js
  inflating: src/plugins/vuetify.js
   creating: src/router/
  inflating: src/router/index.js
   creating: src/store/
  inflating: src/store/index.js
   creating: src/views/
  inflating: src/views/Home.vue
  inflating: vue.config.js
  inflating: yarn.lock
```
# git を初期化
gitは必須ではありませんが、commitしながら作業するとうまくいかなくなった時に戻せるので、入れておきます。
特に書きませんが、この作業も時々commitしながら作業しました。
```bash
$ git init .
Initialized empty Git repository in /home/masa/blog-free-v1.0.0/.git/
```

# dockerのファイルを作成
Ctrl＋SHIFT＋Pで、コマンドパレットを開き、`Add Development Container Confiuration Files...`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/2ad15c32-2a22-b89a-7a78-063bff29635e.png)

Node.jsを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/81a36e2a-98c9-07e8-9030-e1c4a8fe7d09.png)

バージョンは、デフォルトの`16-bullseye`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/8068b17d-d559-57cf-22a3-5f0b2a01b929.png)

追加の機能が必要な場合、選択します。特に選択しないでOK.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/28648bc9-a9b8-a4a2-dcee-9212a58f9636.png)

VSCODEのextensionsにvueturを追加。
個人的に、git-grapthもよく使うので入れました。ほかに必要なextentionsがあれば追記します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/d9249dc7-73c4-0c14-b547-11b1c8ab59ce.png)

# コンテナを起動

Ctrl＋SHIFT＋Pで、コマンドパレットを開き、`Rebuild and Reopen in Container`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/9a8f799c-930a-111f-49e6-9004e55c7739.png)

dockerコンテナが起動し、コンテナ内のVSCODEが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/a9eb7db8-fe57-3001-4a2c-45975568e3ad.png)

# yarn の実行
```bash
$ yarn install
$ yarn serve
```

# ブラウザで表示確認

ブラウザーで`- Local:   http://localhost:8080/`のリンクをCtrlをおしながらクリックしてブラウザーを開く。
`Open in Browser`や`Preview in Editor`の通知ボタンを押してもよい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/32b228d8-b1de-952d-8233-b2a85dad4587.png)

表示できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532235/1fc43c3b-53ba-e7a6-cacd-3022590fe187.png)