Vue CLIとは？
Vue.jsを使ったアプリ開発を行う上で、開発を支援するためのコマンドラインインターフェイスになります。ツール、ライブラリ等のアプリ開発に必要な環境を簡単に構築することができます。
Vue CLIの特徴
- 開発プロジェクトの企画時のプロトタイピングに対応している。
- 開発したアプリの面倒なビルドをサポートしてくれる。
- webpackを使用したビルドは、様々な開発環境があり複雑になり難しいが、様々な開発環境を想定したテンプレートが備わっており、非常に簡単にビルド環境を構築する手助けをしてくれる。
Vue CLIのバージョン
| バージョン | 説明 |
|---|---|
| 2系 | 現在多く採用されているバージョンです。 |
| 3系 | Vue CLIの最新版です。 |
Vue CLIでよく利用されるテンプレート
Vue CLIには、様々なテンプレートがあります。
| テンプレート | 説明 |
|---|---|
| webpack | ウェブアプリでよく利用されるテンプレート。ファイル数が多く、設定も複雑なプロダクト向け。 |
| webpack-simple | ウェブアプリでよく利用されるテンプレート。ファイル数が少なく、設定も簡単な学習、プロトタイプ向け。 |
| PWA | |
| Electron |
他のテンプレートについて知りたい場合は、詳しくは、githubに上がっていますので、ご確認下さい。
https://github.com/vuejs-templates
Vue CLIコマンドの用途
| コマンド名 | 説明 |
|---|---|
| npm run serve | 開発中のみに使います。サーバーを起動してホットデプロイで開発しやすくします。 |
| npm run build | 本番環境に持っていくためのdistフォルダ(webpackで圧縮)を作成するために使います。 |
Vue CLIで生成したファイルについて
| ファイル名 | 説明 |
|---|---|
| node_modules | 膨大なパッケージが入ります。 |
| public | 静的なファイルを全て置いておきます。webpackで圧縮するものに含めない静的ファイルが対象になります。（favicon等） |
| └index.html | webpackで圧縮する際に元となるHTMLです。 |
| dist | 「npm run build」を実行すると本番用のこのディレクトリが生成されます。 |
| src | 開発中のソースになります。最終的にwebpackでビルドして静的ファイルにします。 |
| ├assets | CSSを格納します。 |
| ├components | Vue.jsのコンポーネントを配置します。 |
| ├App.vue | |
| └main.js | srcの中のファイル(assetsやcomponentsも含めて)の頂点のファイルになります。ここで記述するVueインスタンスがpublicフォルダのindex.htmlに入ってきます。 |
| babel.config.js | babelの設定ファイルです。 |
| package-lock.json | |
| package.json |
この記事へのコメントはありません。