Vue.js + Viteの環境構築してみた！

目次

• 公式ドキュメントを参照しながらVue.jsの環境構築を行う。

今回は、Vue.jsに触れるはじめの一歩として公式サイトを参考にしながら、環境構築を進めていきます。

　 前提条件

• コマンドラインに精通していること
• Node.jsのバージョン16.0以上をインストールすること

以下のコマンドをコマンドラインで実行する。

>npm init vue@latest

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

          Scaffolding project in ./<your-project-name>...
          Done.

いったんはっきりと分からなかったので公式ドキュメントに従い全て「No」を選択。

※今回は、公式ドキュメントを参照しながら作業をしているのでファイル名は「document」としました。

続いて、以下を順番に実行する。

> cd document
> npm install

すると早速、警告！！

 　npm WARN deprecated sourcemap-codec@1.4.8: Please
 　use@jridgewell/sourcemap-codec instead

こちらのエラーの原因は、sourcemap-codecのパッケージが廃止されたことによる警告とのこと。
jridgewell/sourcemap-codecはsourcemap-codecの後継であり、同様の機能を提供しているので、以下のコマンドより解決。

　npm install --save-dev @jridgewell/sourcemap-codec

無事にインストールが完了した後に以下のコマンドを実行。

> npm install
> npm run dev

無事にVueを起動することができました！！

引き続き作業を進めながら情報発信していきたいと思います。