初めてのVue.js　超入門その１

2023年7月25日 14:07

初めてVue.jsに挑戦するにあたり、準備したことなどをメモしておく。
使用機種：MacBookAir M1
参考書籍：Vue.js3超入門

Chrome ウェブストアにアクセスし、「Vue.js devtools」で検索。
legacy（旧版）ではない方を選択して、インストール。
「機能拡張を管理」から、「ファイルのURLへのアクセスを許可する」をONにしておく。

すでにインストール済みのため、省略。

> node -v
v18.12.0

> npm install -g @vue/cli

Vue CLI は、Vue3 開発のためのコマンドツール。
・ごく簡単な表示をさっと作ったり、
・本格的なアプリケーションプロジェクトを構築したり、
・プログラムをその場で実行しブラウザで表示させたり、
そのような機能が用意されている。

yarn関連っぽいエラーが出る。調べて分からなかったのでとりあえず次に進めてみる。

プロジェクトを作る

vue用のフォルダを作成し、cdコマンドでそのフォルダに移動して、以下のコマンドを実行。

> vue create hello_app

プリセット、パッケージマネージャーを選択するようになるので、以下のように選択してEnterキーを押す。※は選択した方です。
・プリセット => 　※[Vue 3]、[Vue 2]
・パッケージマネージャー => ※[npm]、[yarn]

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: NPM

以下の画面が表示されたらOK。

🎉  Successfully created project hello_app.
👉  Get started with the following commands:

 $ cd hello_app
 $ npm run serve

指定されたように、コマンドを実行。

> cd hello_app             // カレントディレクトリの移動
> npm run serve            // サーバを起動

ブラウザから「http://localhost:8080」にアクセスすると、表示された。
スクリプト中断は、Ctrlキー＋Cキー。

Webサーバーにアップして公開するためには、プロジェクトをビルドして、公開用のファイルを作成する。

> npm run build

プロジェクトのフォルダの中に「dist」フォルダが作成される。
これらのファイルをまとめてアップロードすれば、公開できる。

> npm init vite-app vite_app

Need to install the following packages:
  create-vite-app@1.21.0
Ok to proceed? (y)

Done. Now run:

  cd vite_app
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

無事に終了。
指定されたコマンドを順番に実行。

> cd vite_app         // カレントディレクトリの移動
> npm install         // 必要なパッケージをフォルダ内にインストール（少し時間がかかる）
> npm run dev         // サーバを起動

サーバが起動するので、ブラウザからアクセス。
こちらの方法だと、ポート番号が3000番になる。

以下のコマンドを実行すると、ブラウザが起動する。

> vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

プロジェクトの操作（serveやbuild）がGUIで操作できるようになる。
それだけでなく、いろいろな情報も随時確認しながら操作を進めることができる。

まだ今回はVue3の中身まで入っていないけど、基本となる環境構築ができました。
Visual Studio Code を使ってコーディングしていくけど、そちらのメモは省略。

開発の方式も「フルスクラッチ」と「プロジェクト」があるようなので、これからが楽しみです。

この記事が気に入ったらサポートをしてみませんか？