■ はじめに
https://dk521123.hatenablog.com/entry/2020/04/30/000000
https://dk521123.hatenablog.com/entry/2020/12/19/000000
の続き。
目次
【1】Vue CLI とは? 【2】環境構築 【3】Vue CLIコマンド 1)vue-cli-service serveコマンド 2)vue init コマンド / vue create コマンド
【1】Vue CLI とは?
* 開発環境をセットアップしてくれたりする便利コマンドラインツール
できること
* プロジェクト作成 * 開発サーバ稼働 * ビルド * コンパイル * 単体テスト * 静的コード解析 etc...
【2】環境構築
1)Node をインストールする
* 以下の関連記事を参照のこと。
https://dk521123.hatenablog.com/entry/2018/06/05/211900
2)コマンドで設定を行う
# インストール npm install -g @vue/cli @vue/cli-service-global # 確認 vue --version @vue/cli 4.5.9
補足:トラブルシュートのために...
* 以下のコマンドでbinの場所を確認できる ~~~~~~~ npm bin -g ~~~~~~~
【3】Vue CLIコマンド
* 以下のサイトが詳しい
https://fumiononaka.com/Business/html5/FN1809001.html
1)vue-cli-service serveコマンド
* 開発用サーバーを起ち上げる
構文
vue-cli-service serve [options]
例
# --open:ブラウザが自動で開く vue-cli-service serve --open
2)vue init コマンド / vue create コマンド
* ゼロから作るアプリケーションのテンプレートを作成 * vue init / vue create コマンドの違いは、以下のサイトを参照。
https://qiita.com/teraco/items/74a6104d3e201c4f654e
構文:vue init コマンド
vue init webpack [project-name]
例:vue init コマンド
# vue-init をインストールする npm install -g @vue/cli-init # 「my-app」ってプロジェクトを新規で立ち上げる vue init webpack my-app <<質問が来るので答える>> ? Project name my-app ? Project description Hello world ? Author sample ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "my-app". ...略... To get started: cd my-app npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
構文:vue create コマンド
vue create [project-name]
例:vue create コマンド
vue create my-app ~~~~~ <<質問が来るので答える>> Vue CLI v4.5.9 ? Please pick a preset: (Use arrow keys) Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) > Manually select features <=今回は、こちらを選ぶ <<質問が来るので答える>> Vue CLI v4.5.9 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Choose Vue version (*) Babel (*) TypeScript >(*) Progressive Web App (PWA) Support (*) Router (*) Vuex ( ) CSS Pre-processors (*) Linter / Formatter (*) Unit Testing (*) E2E Testing <<質問が来るので答える>> ? Choose a version of Vue.js that you want to start the project with 2.x > 3.x (Preview) ・・・略・・・ ~~~~~
参考文献
https://igatea.hatenablog.com/entry/2018/10/27/114113
https://dev.classmethod.jp/articles/change-vue-project-devserver-port/
https://qiita.com/tomo0/items/8dc619cc271f4c69658a
関連記事
Vue ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vue + NightWatch で E2Eテスト をする
https://dk521123.hatenablog.com/entry/2021/02/06/220603