vue-cliの導入から新規でVue.jsのプロジェクト作成とビルド方法まとめ
最終更新日: 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)」にもまとめておりますので参考に。
上記以外にも、package.jsonや.gitignore、.babelrcなどの設定ファイルが含まれています。また初回ビルド以降では、後述にあるビルドされたファイルが含められるdistフォルダもあります。
いかがでしょうか、Vue.jsを使ってウェブアプリケーションを構築する際には、このようにVue CLIを使うことでビルドに必要な環境やテンプレートファイルが一式揃って、手軽に始めることができます。より詳しくはこちらの書籍がとても参考になるのでオススメです!
vue-cliの環境構築
まずは、グローバルにvue-cliをインストールしていきます。下記コマンドでインストールしたら、バージョンを確認して表示されていればOKです。$ npm install -g vue-cli $ vue --version 2.9.6vue-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プロジェクトの基本的なフォルダ構成
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でベースとなるインデックスファイル |
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を使うことでビルドに必要な環境やテンプレートファイルが一式揃って、手軽に始めることができます。より詳しくはこちらの書籍がとても参考になるのでオススメです!
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories