0%

Programmingプログラミングナレッジ

Posted:2019.03.10

vue-cliの導入から新規でVue.jsのプロジェクト作成とビルド方法まとめ

javascriptのフレームワークとしてお馴染みのVue.jsですが、自分で一から環境構築やプロジェクトを作成するのは大変ですし、知識も必要になってきます。そこでコマンドを入力するだけでVue.jsの環境やプロジェクトのテンプレートファイルが一式で揃えられる「vue-cli」を導入とプロジェクト作成からビルドの方法までをまとめていきたいと思います。

 

こちらの記事はVue CLIのバージョンが2系のものとなります。新しいバージョンのVue CLI3系のインストールと環境構築についてはこちらの記事「vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ」をご覧ください。

 

その前に、vue-cliはnode.jsの環境が必要になりますので、あらかじめインストールをしておきます。詳しくはこちらの記事「WEB開発環境(Mac OS)に必要な各種インストール方法まとめ(1)」にもまとめておりますので参考に。

 

vue-cliの環境構築

まずは、グローバルにvue-cliをインストールしていきます。下記コマンドでインストールしたら、バージョンを確認して表示されていればOKです。

$ npm install -g vue-cli
$ vue --version
2.9.6

 

vue-cliがインストールできたら、Vueプロジェクトのテンプレートを用意していきます。まずはプロジェクト用のディレクトリを作成し、その場所まで移動します。そして下記コマンドでテンプレートを作成していきます。

$ cd プロジェクトディレクトリ
$ vue init [TEMPLATE_TYPE] [PROJECT_NAME]

 

テンプレートの種類はいろいろあるのですが「webpack」がよく使われるようです。プロジェクト名は下記のように任意の名前をつけておきます。

$ vue init webpack vue_sample

 

すると、初期設定が始まり、質問に対して答えていく形で進めていきます。まずはプロジェクト名から確認・変更で適宜、情報を入力、エンターで確定させて進めていきます。

? Project name (vue_sample)

 

次にプロジェクトの説明文を入力します。こちらも適宜入力していきます。続いてプロジェクトの作者名の情報をいれていきます。

? Project description (A Vue.js project)
? Author

 

そしてVue.jsのモードを選択します。コンパイラを含めるかどうかの違いで上下キーで項目の変更可能です。

> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates....

 

次はvue-routerのインストール確認です。Yでインストール、nでインストール無しが選択できます。

? Install vue-router?

 

ESLintのインストール確認です。必要に合わせてインストールしていきます。インストールする場合にはタイプを選択することになり適宜選択します。

? Use ESLint to lint your code?
> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)

 

続いて自動単体テストツールのインストール確認です。こちらも必要に合わせてインストールします。同じくインストールする際には種類を選択します。

? Set up unit tests
> Jest
  Karma and Mocha
  none (configure it yourself)

 

そして自動E2Eテストツールのインストール確認です。こちらも必要であればインストール可能です。

? Setup e2e tests with Nightwatch?

 

最後に、各種モジュールのインストール方法確認です。NPM経由かYarn経由で問題ないでしょう。

? Should we run `npm install` for you after the project has been created? (recommended)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

 

これらの設定が完了するとリソースのインストールとプロジェクトのセットアップが開始され、終了するとローカルホストで動作確認できる開発用のコマンドが表示されます

# Installing project dependencies ...
# ========================

〜 インストール&セットアップ 〜

# Project initialization finished!
# ========================

To get started:
 $ cd [PROJECT_NAME]
 $ npm run dev

 

では早速下記のコマンドでVueプロジェクトのソースコードをビルドしてローカル環境で確認してみます。

$ cd [PROJECT_NAME]
$ npm run dev

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

〜 略 〜

DONE Compiled successfully in 3052ms
Your application is running here: http://localhost:8080

 

開発用モードでローカルホストのサーバーが起動しているので、「http://localhost:8080」でアクセスすると下記のようなページが表示されます。

vue-cliの導入から新規でVue.jsのプロジェクト作成とビルド方法まとめ

 

Vueプロジェクトの基本的なフォルダ構成

Vue.jsのプロジェクトは主に下記の構成でファイルが生成されます。設定によって多少の違いはありますが、重要なものは下記になります。

PROJECT_ROOT
  ┣ build
  ┣ config
  ┣ node_modules
  ┣ src
    ┣ assets
    ┣ components
    ┣ router
    ┣ App.vue
    ┗ main.js
  ┣ static
  ┣ test
  ┗ index.html

 

/build webpackなどのビルド実行のファイルが含まれる
/config ビルドの設定ファイルが含まれる
/node_modules 各種モジュールが含まれる
/src ビルド前のソースコードフォルダ
/src/assets 画像やCSS、その他javascriptなどの静的ファイルが含まれる
/src/components .vueの拡張子がついたコンポーネントファイルが含まれる
/src/router ルーティング用の設定ファイルが含まれる
/src/App.vue index.htmlに出力されるvue側のインデックスファイル
/src/main.js 各種ファイルをインポートして管理するエントリーポイント用ファイル
/static ビルドに含めずにデプロイする用のファイルが含まれる
/test 各種テストツールが含まれる
/index.html SPAでベースとなるインデックスファイル

 

上記以外にも、package.jsonや.gitignore、.babelrcなどの設定ファイルが含まれています。また初回ビルド以降では、後述にあるビルドされたファイルが含められるdistフォルダもあります。

 

Vueプロジェクトのソースコードをビルドし本番用にデプロイ

下記コマンドでプロジェクト内srcフォルダに含まれるソースコード一式を、デプロイ用にビルドします。

$ npm run build

> node build/build.js

〜 略 〜

Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

 

PROJECT_ROOT配下の同階層にdistフォルダが生成され、その中にあるindex.htmlとstaticフォルダの一式を本番サーバーにアップロードしてデプロイ完了です。また、メッセージにもある通り、静的ファイルであるもののウェブサーバー上でないと動作しないので注意が必要です。

 


 

いかがでしょうか、Vue.jsを使ってウェブアプリケーションを構築する際には、このようにVue CLIを使うことでビルドに必要な環境やテンプレートファイルが一式揃って、手軽に始めることができます。より詳しくはこちらの書籍がとても参考になるのでオススメです!

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】