約217日前 2022年1月7日12:22
デジタル
JavaScript Vue.js

---

改訂履歴

2022/1/7　投稿

1. Viteとは？

Vite 公式サイト
Vue.jsを触ったことがある人のほとんどはVue CLIを使用してフロントエンド開発を行っていると思います。

ViteはそんなVue CLIよりも高速で動作するビルドツールと言われており、注目を集めています。

2. 立ち上げ手順

今回はViteの導入＆開発サーバーの立ち上げまでを解説します。

流れとしては

• Node.jsのインストール
• Viteのインストール
• 開発サーバーの立ち上げ
• 動作確認

となっています。

2.1 - Node.js

とにもかくにも Node.js が必要です。

Vue.jsがJavascriptで動作するように、ViteもJavascriptで動作します。

但しJavascriptはブラウザで動作するプログラミング言語ですので、パソコン自体にはJavascriptの実行環境はありません。

Javascriptの実行環境というのは、同じくプログラミング言語であるPythonのようなものです。

Pythonで書いたプログラムをパソコン上で動かすにはPythonをインストールする必要がありますよね。

それと同じでJavascriptで書いたプログラムをパソコン上で動かすにはNode.jsをインストールする必要があります。


という訳でまずは Node.js をダウンロードしましょう。
Node.js 公式サイト

LTSと書いてあるほうを選んでダウンロードします。
LTSはLong Term Supportの略で、そのままですがサポート期間が長いバージョンです。

Node.jsに限りませんが、LTSとついたバージョンを選択しておくとWeb上にも情報が多くて助かることがあります。



Next



チェックしてNext



Next



Next



Next
Automatically install ~~ のチェックは外してOKです。



Install



すこし掛かります



インストールが完了しました。



Node.jsの準備ができましたので、早速Viteをインストールします。

2.2 - Viteの導入

パソコンに下記がインストールされていますので、Node.jsのコマンドプロンプトを起動しましょう。



コマンドプロンプトが起動したら下記を実行下さい。

npm init vite@latest

npmはNode package managerの略でパッケージ管理ツールです。

Pythonでいうpipに相当するものと解釈して頂いて問題ありません。

インストールを開始するといくつか質問されます。

Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y  # yで続行
√ Project name: ... vite-project  # プロジェクトの名前を適当に
√ Select a framework: » vue  # Vueを選択
√ Select a variant: » vue-ts  # Typescript版にしました

Scaffolding project in C:\Users\..\vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

~~

インストールの最後に表示されているコマンドは後で実行します。

2.3 - 開発サーバー

先程表示されたコマンドを順番に実行します。

cd vite-project  # 作成したプロジェクトフォルダに移動
npm install  # プロジェクトフォルダ内で実行
npm run dev  # 開発サーバーの起動

数秒後に開発サーバーが起動します。

> vite-project@0.0.0 dev
> vite

Pre-bundling dependencies:
  vue
(this will be run only when your dependencies or config have changed)

  vite v2.7.10 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1283ms.

2.4 - 動作確認

http://localhost:3000/ にアクセスしましょう。



上記のような初期画面が表示されればサーバーの起動に成功しています！

試しに「count is」の部分をクリックしてみましょう！

ちゃんと動いていますね！

動作確認は以上です。

3. ViteとDjango

もちろんDjangoと組み合わせて開発することもできます！

フロントをVue.js、バックエンドをDjango REST frameworkと分けて開発可能ですので、
興味がある方は調べてみて下さい。

以上、Viteの導入手順でした。