知識の枝

"All is well"

ViteでVueのプロジェクトを立ち上げる手順

約16日前 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の導入手順でした。