佐藤洋介のログ

だいたいすぐに忘れるからここに書き残す

Vue CLI 3(vue-cli v3)を使用してVue開発環境を整える

1. vue-cli v3を使用する

$ npm install -g @vue/cli
$ vue --version
3.0.5

2. Vueプロジェクトを作成する

$ vue create vue_test

f:id:satouyousuke:20181010144444p:plain
対話形式で環境を整える
デフォルトではbabel, eslintが選択されている
マニュアル選択で必要なものをいれていく

f:id:satouyousuke:20181010144454p:plain
スペースキーで使用するか否かを決定する

f:id:satouyousuke:20181010144512p:plain
ルーターでヒストリーモードを使用するか聞かれる
見栄えがいいので使用する
ヒストリーモードの詳細は以下
https://router.vuejs.org/ja/guide/essentials/history-mode.html

f:id:satouyousuke:20181010144516p:plain
SASS/SCSSを選択した

f:id:satouyousuke:20181010144520p:plain
ESLint + Pretterを選択した

f:id:satouyousuke:20181010144523p:plain
Lintを使用するタイミング
コミット、セーブ時両方を選択した

f:id:satouyousuke:20181010144526p:plain
設定の保存先をpackage.json

f:id:satouyousuke:20181010144529p:plain
一連の設定を保存するか否か
保存しない
これでとりあえず終了

3. ブラウザで確認する

$ cd vue_test
$ npm run serve
($ npm run build でプロダクションビルド)
止め方がわからなかった「ctrl + c」

ブラウザでlocalhost:8080にアクセス

f:id:satouyousuke:20181010144532p:plain
vueが表示される

ファイル構成
f:id:satouyousuke:20181010144535p:plain