ViteでVueのプロジェクトを立ち上げる手順
約217日前
2022年1月7日12:22
デジタル
JavaScript Vue.js
2022/1/7 投稿
Vite 公式サイト
Vue.jsを触ったことがある人のほとんどはVue CLIを使用してフロントエンド開発を行っていると思います。
ViteはそんなVue CLIよりも高速で動作するビルドツールと言われており、注目を集めています。
今回はViteの導入&開発サーバーの立ち上げまでを解説します。
流れとしては
とにもかくにも 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をインストールします。
パソコンに下記がインストールされていますので、Node.jsのコマンドプロンプトを起動しましょう。
![]()
コマンドプロンプトが起動したら下記を実行下さい。
Pythonでいうpipに相当するものと解釈して頂いて問題ありません。
インストールを開始するといくつか質問されます。
先程表示されたコマンドを順番に実行します。
数秒後に開発サーバーが起動します。
http://localhost:3000/ にアクセスしましょう。
上記のような初期画面が表示されればサーバーの起動に成功しています!
試しに「count is」の部分をクリックしてみましょう!
ちゃんと動いていますね!
動作確認は以上です。
もちろんDjangoと組み合わせて開発することもできます!
フロントをVue.js、バックエンドをDjango REST frameworkと分けて開発可能ですので、
興味がある方は調べてみて下さい。
以上、Viteの導入手順でした。
デジタル
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@latestnpmは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の導入手順でした。