Categories: Vue3

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

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

Vue CLIのインストール

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

コマンド

npm install -g @vue/cli

プロジェクトの作成

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

js

vue create sample_app

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

js

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

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

js

> 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」というフォルダが生成されます。

js

npm run build
  • このdist内のファイルをまとめてWebサーバにupすればサイトを公開できる。
  • 但し、デフォルトでは<script>要素などのパスが絶対パスで記述されているため、Webサーバ直下に格納したときじゃないと上手く動かない仕組みになっている。
  • これを変更するにはGUIで公開パスを修正してからビルドする必要がある。
ファイル/フォルダ 説明
cssフォルダ cssが格納されているフォルダ
jsフォルダ javascriptが格納されているフォルダ
imgフォルダ imgが格納されているフォルダ
favicon.ico faviconファイル
index.html デフォルトで表示されるHTMLファイル

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp

Share
Published by
issiki_wp