最終更新日 2025-04-01

環境構築

概要

Vueを学習するための環境構築

クイックスタート が大きなヒントになるが、いきなり２系統あるので戸惑うと思われる。
「Composition API」(nodeを使う方)を基本とするのが良いが、
すでにかなり出来上がってるサイトにほんの一部 Vue を使うだけなら、「Option API」が良い選択になりやすい。

Nodejsのインストール

パスを通す形でインストールしていること。

Viteのインストール

Viteのインストールが必要。
これが無いと、そもそも自動で作成されるconfig系ファイルを利用したビルドが出来ない。

npm install -g vite

プロジェクトテンプレ作成

どこぞの作業ディレクトリを作成して、以下。
プロジェクトの雛形が生成される。
基本は TypeScriptを選ぶ形。

npm create vue@latest

ビルド

vscodeでCTRL+SHIFT+B
(ViteのBuildが走る)

プレビュー

vite preview

で実行出来る。

npm run dev

でも良い。

コンソールに出てくる、http:localhost:**** を CTRL+クリック