vue-cliの始め方・vue.jsを入門してみよう

Vue.js

前提条件

前提条件として、node.jsとnpmがinstallされている必要があります。

node -v
npm -v

で確認しておきましょう。
もし、インストールがまだの場合は以下のリンクを参照してください。

Macにnode.jsをインストールする手順。 - Qiita
#はじめに。 Macにおける開発環境構築のメモです。 フロントエンドに必須となってきているnode.jsのインストール手順を残しておきます。 今回、node.jsのインストールにあたり、使用するnode.jsのバージョンを切替えられ...

windowsなら

ダウンロード | Node.js

です。

vue-cliのインストール

まず、vue-cliをグローバルにインストールします。

npm install -g vue-cli

インストールされているか確認します。

vue --version  //2.9.6

プロジェクトの作成

cd [任意の場所まで移動]

そして、プロジェクトを作成します。
コマンドは、vue init [テンプレート名] [プロジェクト名]です。

vue init webpack practice

webpackというアプリケーション用テンプレートを使用します。
コマンドを打った後、対話形式のモードになるので選んでいきましょう。

Project name (practice) 

プロジェクト名です。
とりあえずenterで構いません。

? Project description (A Vue.js project) 

プロジェクトの説明ですね。とりあえずenter。

? Author (junpeko5 <〇〇@gmail.com>) 

作者名とメールアドレス。とりあえずenterで。

? Vue build (Use arrow keys)
❯? Runtime + Compiler: recommended for most users 
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific H
TML) are ONLY allowed in .vue files - render functions are required elsewhere 

ランタイム + コンパイラ またはランタイムのみを選択できます。
今回は、ランタイム + コンパイラを選択。

? Install vue-router? (Y/n) Y

vue-routerをインストールするかどうか。今回はYを選択。

? Use ESLint to lint your code? (Y/n) n

今回はnを選択。

? Set up unit tests No

今回はnを選択。

? Setup e2e tests with Nightwatch? No

今回はnを選択。

? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
❯ Yes, use NPM 
  Yes, use Yarn 
  No, I will handle that myself 

npmを選択するとnpmを使った自動インストールが始まります。
30秒ほど待つと完了です。

cd [任意のディレクトリ]

ディレクトリ構成を確認するとこんな感じです。

ls
README.md		index.html		package.json
build			node_modules		src
config			package-lock.json	static

開発サーバーの立ち上げとプロジェクトのビルド

npm run devコマンドを打つと開発環境のWebサーバーが立ち上がり、

ブラウザで確認できます。

 npm run dev

> practice@1.0.0 dev /Users/junpei/Documents/practice
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting                                                                 b       
 DONE  Compiled successfully in 6559ms                                  00:23:20

 I  Your application is running here: http://localhost:8080

示された、http://localhost:8080にブラウザでアクセスし、

が表示されます。

また、

npm run build

と打てば、実際に本番用のソースがdistフォルダに自動生成されます。

vue-cliを使えば、開発環境と本番のビルド環境がコマンドだけで簡単に生成できますね。