Vite + Vue3 + TypeScriptでWebサイトを更新する

Webサイトを更新した際に時間なくてVue.jsを使うことを諦めましたが、最近Vue.jsを使えるようになったのであらためてWebサイトを更新してみました。

更新したWebサイトはこちら

この記事では、環境的なところとプロジェクトの準備段階についてを忘れないように書き残します。使ったライブラリや細かい実装等は追々記事にしたいなぁ（いつもそのまま忘れる）

環境
プロジェクト作る

環境

Vue3

今回の主役はVue.jsです。以前から興味があって、練習がてらVue3を使いました。

はじめに | Vue.js

Vue.js - The Progressive JavaScript Framework

Vite

Vue.jsを調べているときに見かけた高速で動作するビルドツールです。面白そうなので使ってみました。

Vite

次世代フロントエンドツール

TypeScript

触っておこうと思っていたので今回思い切ってTypeScriptを選択しました。

JavaScript With Syntax For Types.

TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before yo...

その他

Windows 10

VSCode

プロジェクト作る

yarnのインストール

yarn入ってなかったので入れます。

npm i -g yarn

インストール後、バージョンを確認しようとしたらエラー。

yarn -v

yarn : このシステムではスクリプトの実行が無効になっているため、ファイル xxx\AppData\Roaming\npm\yarn.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?Li 
nkID=135170) を参照してください。
発生場所 行:1 文字:1
+ ~~~~
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess

このエラーが出たら以下を行うことで解決します。

PowerShellを管理者として実行
「Set-ExecutionPolicy RemoteSigned」を実行
実行ポリシーは、～と表示されたらYを入力

ViteでVueプロジェクトを作る

プロジェクトを作りたいディレクトリで

yarn create vite

対話形式でプロジェクトの設定をします。

Project name: プロジェクト名を入力

Select a framework: Vueを選択

Select a variant: TypeScriptを選択

Done. Now run:
  cd xxxxxx
  yarn
  yarn dev

と表示されたらその通りに実行して準備完了。

localhost:3000でアクセスすれば雛形が表示されます。

※ポート3000で起動しない場合はvite.config.tsで指定可能

プロジェクトの構成

先程作ったプロジェクトはこんな感じになります。

index.html
エントリーポイント。main.tsが読み込まれているのがわかります。
App.vue
main.tsを見るとApp.vueのコンポーネントを#appにマウントしています。このApp.vueに書かれた内容が表示されることになります。App.vueからはさらにcomponents/HelloWorld.vueを利用しています。componentsディレクトリ内にページの各部品になるコンポーネントファイルを作成していくことになります。

ひとまずこれでVueプロジェクトの準備は完了です。便利な設定とかもそのうち記事にしたいと思います。