Kugelblitz
Webフロントエンド開発方法（お手軽版）
まず今入ってるnode.js、npmのバージョン確認。
C:\>node -v
v20.1.0
C:\>npm -v
9.6.5nvmでnode.jsをアップデート
C:\>nvm install ltsnvm use でアップデートしたバージョンに切り替え。
C:\>nvm use 20.13.1
Now using node v20.13.1 (64-bit)
C:\>node -v
v20.13.1
C:\>npm -v
9.6.5
npmをアップデート。
C:\>npm update -g npm
removed 73 packages, and changed 93 packages in 4s
24 packages are looking for funding
run `npm fund` for details
C:\>npm -v
10.8.0viteでvue.jsの環境構築。
C:\foo\project>npm create vite@latest
Need to install the following packages:
create-vite@5.2.3
Ok to proceed? (y) y
> npx
> create-vite
√ Project name: ... BarProject
√ Package name: ... BarProject
√ Select a framework: » Vue
√ Select a variant: » JavaScript
Scaffolding project in C:\foo\project\BarProject...
Done. Now run:
cd BarProject
npm install
npm run dev
C:\foo\project>cd BarProject
C:\foo\project\BarProject>npm install
added 27 packages, and audited 28 packages in 9s
4 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
C:\foo\project\BarProject>npm run dev作成されたBarProjectディレクトリを、Visual Studio Codeのワークスペースに追加する。
viteなので、統合ターミナルから、
npx viteで開発サーバを立ち上げることができる。
ビルドは、
npx vite buildで行うことができる。distディレクトリにビルドした結果が格納される。
2024/05/28 08:45
Loading...