vue.js導入 vue3 - rinopipapipaのブログ

javascriptの勉強中並行してVue.jsの勉強をしたいので導入方法を残しておきます。

vue.jsとは

javascriptのフレームワークライブラリを追加することで、
webアプリケーションを開発することができる。
MVVM（Model-View-ViewModel）という設計手法がとられているのでプログラムの修正や追加がしやすい。

環境　Ver
仕様OS　 windows 11 pro
vue version @vue/cli 5.0.8
node version v21.7.1

Vue.jsだけインストールするのではなく
Node.js(npm)とvue.jsの２つをインストール

Node.jsのインストール
公式サイトのDLページに行き左側の推奨を押しDL
インストールする際Automatically install the necessary tools.・・・
にはチェックを入れなくて大丈夫です。

node --version
  v21.7.1
npm --version
  10.5.0

を打ち込みバージョンの確認を行い
インストールされているかチェックを行う。

vue.jsのインストール
コマンドプロンプトのホームディレクトリで

  npm install -g @vue/cli

インストール後

  vue --version

を入力してインストールができたかを確認。

vue.js新しいVue.jsプロジェクトを作成

  vue create practice

プロジェクト名はpracticeにして作成

  ? Please pick a preset: (Use arrow keys)
  > Default ([Vue 3] babel, eslint)
      Default ([Vue 2] babel, eslint)
     Manually select features

とでるが
上から　Vue3を使用するかVue2を使用するか手動で設定するかの選択。
今はVue2は使われていないそうなので上か下を選択。
ここでは上を選択。
プロジェクトが作成されたらcd practiceにで移動。
できなかったら下に自分が起こった、
エラー時の対応を書いてあります。
プロジェクトに移動出来たら。

   npm run serve

コマンドを打ち込み以下のように出れば起動成功

> test-vue@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
 DONE  Compiled successfully in 9269ms                            

  App running at:
  - Local:   http://localhost:〇〇〇〇/
  - Network: http://〇〇〇〇/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ブラウザでhttp://localhost:〇〇〇〇/と打ち込み

以下エラーについて

npm install -g @vue/cliができないときは管理者権限でないとできない場合もあるので

  sudo npm install -g @vue/cli

でインストールしてみる。

npmのバージョンが古い
コマンドプロンプトで

  npm install -g npm@latest

を打ち込む

createできないとき
Initializing git repository...
Installing CLI plugins. This might take a while...

00h00m00s 0/0: : ERROR Error: Command failed: yarn config get npmRegistryServer
ERROR: [Errno 2] No such file or directory: 'config'

Error: Command failed: yarn config get npmRegistryServer
ERROR: [Errno 2] No such file or directory: 'config'

自分はこのエラーが出ました。
yarnが取得できないパッケージマネージャーに問題があるよといっています。
実際ここでエラー通りに受け取ってしまいました。
私はubuntuを使っていますが
コマンドプロンプトで実行しましょう。
某プログラミングスクールに通っていて
何でもかんでもubuntuを使っていましたが
ネットにもある通り手順を踏まないといけませんね。

最後に購入した本を載せておきます。
2024年3月3日発売なのでvue3を新しく習おう
という方は参考までに
良い点