Zenn
💡

Vite.ts（さくっと導入手順）

2023/03/05に公開
TypeScript
tech

Vite.jsはVue.jsの開発者であるEvan Youが開発したツールで、高速でモジュールベースの開発を可能にします。本記事では、Vite.jsの導入方法について詳しく説明します。

1. Node.jsのインストール

Vite.jsはNode.js上で動作しますので、まずはNode.jsをインストールする必要があります。Node.jsは公式サイトからダウンロードしてインストールしてください。

2. Vite.jsのインストール

Vite.jsはnpmパッケージとして提供されています。ターミナルを開いて以下のコマンドを実行して、Vite.jsをインストールしてください。

npm install -g vite

これでVite.jsがグローバルにインストールされました。

3. プロジェクトのセットアップ

Vite.jsを使用するプロジェクトをセットアップするには、以下の手順に従ってください。

1. 任意のディレクトリに移動して、プロジェクトのディレクトリを作成します。

mkdir my-project
cd my-project

2. 以下のコマンドを実行して、プロジェクトを初期化します。

npm init -y

3. 以下のコマンドを実行して、Vite.jsを依存関係に追加します。

npm install vite --save-dev

4. プロジェクトのルートディレクトリにindex.htmlファイルを作成し、以下のように記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

<script>要素のtype属性をmoduleにすることで、ES modulesを使用できるようになります。

5. プロジェクトのルートディレクトリにsrc/main.jsファイルを作成し、以下のように記述します。

import { createApp } from 'vue'

const app = createApp({
  template: `
    <div>Hello Vite!</div>
  `
})

app.mount('#app')

以上でプロジェクトのセットアップは完了です。

4. アプリケーションの実行

以下のコマンドを実行して、アプリケーションを起動してください。

vite

これでアプリケーションが起動し、ブラウザで表示されます。

まとめ

本記事では、Vite.jsの導入方法について説明しました。Vite.jsは高速なモジュールベースの開発を可能にし、開発者の生産性を向上させます。Node.jsとnpmがインストールされている環境であれば、簡単に導入することができます。ぜひ、Vite.jsを使って開発をしてみてください。

Discussion