Vue CLIの導入方法

どうも　最近Vuejsを始めたので
アウトプットしていこうと思います

Vue CLIとは

VueCliはVue.jsで開発するための便利ツールであります
私の解釈で話しますと、
VueCLIはVueを使うときに最初にうつコマンドのところであり
プロジェクト生成するときに使います。
CLIはコマンドインターフェースであります。

なぜこんな説明をしたかと言いますと、
なんと私

Vue.jsと　Vue CLIって違うものなの？

とかなんかあたかも対等な関係的な感じで考えていました。
当たり前に違いました。

導入方法

１　Vue CLIをグローバルにインストール

 % npm install -g @vue/cli

2.これでバージョンを確認

 vue --version

3.プロジェクトを作成(hoge-appのところは自分の作りたいプロジェクトの名前）

 vue create hoge-app

4.プロジェクトを作るとこのようなものが出てきます
とりあえず初めてのかたであれば設定をカスタマイズできるManually select featuresを選択します

Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 

1. これに関しては用途に合わせて選んでください 　　初めての方の場合は私と同じCSS Pre-processorsとbabelを選んどきましょう

Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

おそらくこの後に私と同じCSS Pre-processorsを選んだ方は
CSS Pre-processorsの具体的になんのライブラリを使用するか選ぶこととなるでしょう

その後。。。。

６.babelやESLintの記述をどのファイルに記述するか選びます
　専用の設定ファイルを使用する場合はIn dedicated config filesを選びます
私はIn dedicated config files選びます。

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

７.今回の設定をプリセットするか選択します
yを選択すると今後今までの作業を省略することができます。

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)


これでエンターキーを押したらおしまいです
お疲れ様でした