OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

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

最終更新日:2019.3.12 Update!!
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を使うことでビルドに必要な環境やテンプレートファイルが一式揃って、手軽に始めることができます。より詳しくはこちらの書籍がとても参考になるのでオススメです!  
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram