Vueでプロジェクトをたちあげた件

さて、前回お話しした通りVue-Cliを使いTODOリストを作っていきます。
Vue-Cliのインストール方法がわからないという方はこちらから。

プロジェクトの作成

createコマンドを使いプロジェクトを作成します。
プロジェクト名は「app_todo」です。

vue create app_todo

すると次のような質問がでてきます。

Vue CLI v3.0.1
? Please pick a preset:
default (babel, eslint)
❯ Manually select features

ここではマニュアルを選びます。
ちなみにデフォルトで選ぶと表示されている通りbabelとeslintが一緒にインストールされます。それぞれのパッケージの説明はまたの機会にしたいと思います。
さて、上下キーとエンターでマニュアル設定を選び、どんどん進めていきましょう。
次はこのような選択がでてきます。

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

ここでは「Babel」「Router」「Vuex」「CSS pre^processors」「Linter / Formatter」を選択します。ちなみにスペースキーで選択、選択なしが選べるようになっています。エンターで次に進みます。
すると今回選択したパッケージについて以下のような質問がでてきます。

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

最初はRouterのヒストリーモードについてです。
ヒストリーモードついてはこちらから。
今回は(y)を選びヒストリーモードを使用します。
次にCSSのプリプロセッサーについてです。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ SCSS/SASS
LESS
Stylus

CSSのプリプロセッサーはSCSS / SASSを使います。ここの選択は上下キーで移動しエンターで決定です。
次はリンターのフォーマットの選択です。

? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier

リンターはスタンダードを選び、出来るだけコードをきれいに保つようにします。ここも選択は上下キーで移動しエンターで決定です。
次はリンターの実行タイミングです。

? Pick additional lint features: (Press to select, to toggle all, to invert selection)
❯◉ Lint on save
◯ Lint and fix on commit

リンターはセーブのタイミングで実行するようにします。

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

ここではパッケージの設定ファイルを個別にするかpackage.jsonでするかを決めます。設定は個別で良いかと思いますので上を選択します。

? Save this as a preset for future projects? (y/N)

最後に今回のセッテイングをプリセットとして保存するかどうかの選択です。
今回の設定は特に残さなくてよいので(N)をおします。
これでインストールが始まり完了すると以下のメッセージがでてきます。

🎉 Successfully created project app_todo.
👉 Get started with the following commands:
$ cd app_todo
$ npm run serve

指示の通りapp_todoフォルダに移動し、
npm run serveコマンドでサーバーを起動しましょう。起動が完了すると以下のメッセージがでてきます。

App running at:
DONE Compiled successfully in 6670ms

Local: http://localhost:8080/
Network: http://172.16.0.137:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

http://localhost:8080/に接続するとVueが起動していることがわかります。

これでプロジェクト作成が完了しました。
次はVueをいじっていきましょう！