【Vue入門】Vue CLIによるプロジェクトの作成

この記事では、Vue CLIを使ったプロジェクトの作成方法を見ていきます。

Vue CLIのインストール
プロジェクトの作成
- プロジェクトの実行
プロジェクトの終了
- Warning: name can no longer contain capital lettersが発生した場合
プロジェクトをビルドする

`Vue CLI`のインストール

Vue CLIをインストールするにはnode.jsで以下を実行します。

コマンド

npm install -g @vue/cli

プロジェクトの作成

プロジェクト名を「sample_app」にする場合は以下のコマンドを実行します。

vue create sample_app

Vue2もしくはVue3を選択します。

Vue CLI v5.0.4
? Please pick a preset:
> Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features

作成が完了するとコンソールが以下の状態になり、プロジェクト名と同名のフォルダ「sample_app」が作成されます。

コマンド

Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.4
✨  Creating project in C:\Users\testuser\OneDrive\IT\Javascript\Vue3\sample_app.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 842 packages, and audited 843 packages in 48s

86 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
🚀  Invoking generators...
📦  Installing additional dependencies...


added 95 packages, and audited 938 packages in 8s

96 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd sample_app
 $ npm run serve

プロジェクトの実行

プロジェクトを実行するには以下のコマンドを実行します。

Linuxコマンド

cd sample_app
npm run serve

実行するとコンソールが以下の状態になります。

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

 INFO  Starting development server...


 DONE  Compiled successfully in 4645ms                                                                                                                                                                       0:03:03


  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.1.9:8081/

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

上記のLocalに書いてあるURLでブラウザにアクセスすると、ページを確認できます。

プロジェクトの終了

プロジェクトを終了したいときはコンソール内でctrl + cを入力します。

`Warning: name can no longer contain capital letters`が発生した場合

プロジェクト名に大文字を使っているとWarning: name can no longer contain capital lettersが発生します。プロジェクト名に大文字は使えないようなので小文字を使いましょう。

PS C:\Users\testuser\OneDrive\IT\Javascript\Vue3> vue create sampleApp
Invalid project name: "sampleApp"
Warning: name can no longer contain capital letters
PS C:\Users\testuser\OneDrive\IT\Javascript\Vue3>

プロジェクトをビルドする

以下のコマンドを実行するとプロジェクトフォルダの中に「dist」というフォルダが生成されます。

npm run build

このdist内のファイルをまとめてWebサーバにupすればサイトを公開できる。
但し、デフォルトでは<script>要素などのパスが絶対パスで記述されているため、Webサーバ直下に格納したときじゃないと上手く動かない仕組みになっている。
これを変更するにはGUIで公開パスを修正してからビルドする必要がある。

ファイル/フォルダ	説明
cssフォルダ	cssが格納されているフォルダ
jsフォルダ	javascriptが格納されているフォルダ
imgフォルダ	imgが格納されているフォルダ
favicon.ico	faviconファイル
index.html	デフォルトで表示されるHTMLファイル