業務でVue.jsを使う機会があり、Vue CLIについて調べたのでまとめた
Vue CLIとは
Vue.jsを使った開発環境を整えるためのCLI (Command Line Interface)
2018/08/01現在、Vue CLI 3のステータスがRC (Release Candidate)*1
よって、正式バージョンのリリースが秒読み状態
数ヶ月もすれば環境はガラッと変わっていると思うので、ご参考までに。
前提条件
Node.jsとnpmがインストールされていること
インストール
npm i -g vue-cli
2018/08/01現在、stable versionの 2.9.6 が入る
今すぐ3.xを試したい好奇心旺盛な人は、
npm i -g @vue/cli
3.x へのアップデートに伴い、vue-cliから@vue/cliにパッケージ名が変更されている
2.x が入っていて 3.x に上げたい人は、npm rm -g vue-cli してから、3.xをインストールする必要があるみたい
プロジェクトの作成
vue create {project-name}
Vue CLI 3ではプロジェクト作成の推奨コマンド
Usage: create [options] <app-name> create a new project powered by vue-cli-service Options: -p, --preset <presetName> Skip prompts and use saved or remote preset -d, --default Skip prompts and use default preset -i, --inlinePreset <json> Skip prompts and use inline JSON string as preset -m, --packageManager <command> Use specified npm client when installing dependencies -r, --registry <url> Use specified npm registry when installing dependencies (only for npm) -g, --git [message|false] Force / skip git initialization, optionally specify initial commit message -f, --force Overwrite target directory if it exists -c, --clone Use git clone when fetching remote preset -x, --proxy Use specified proxy when creating project -h, --help output usage information
2系までのvue initに比べ、柔軟にプロジェクトを作成することができる
コマンドを入力すると、設定をデフォルトで行うかマニュアルで行うか聞かれるのでカーソルキーで選択し、Enterキーで確定する
defaultを選択した場合、babel + eslint の標準的なプロジェクトが作成される
Manually select featuresを選択した場合、プロジェクトに必要な要素を選択できるのだが...
正直チェックの付け方が分からなく、3分は悩んだ
Enterを押すと次の画面に行くし、適当なショートカットを探しても見つからない
結果から言うと 1~9 でチェックをON/OFFできる
この記事を読んだ方にはA~Zをポチりまくるという悲しいことは是非しないでいただきたい (恥を晒していくスタイル)
チェックできる要素は以下の9つ
- Babel
- TypeScript
- Progressive Web App (PWA) Support
- Router
- Vuex
- CSS Pre-processors
- Linter / Formatter
- Unit Testing
- E2E Testing
チェック後はEnterで先に進み、選択した機能に応じてyes/noを答えていく
TypeScriptがサポートされていたり、Linterの選択肢にPrettierが含まれていたり色々お〜となった
プロジェクトを作成した後は、
cd {project-name} でプロジェクトディレクトリに移動し、
yarn serve でアプリが立ち上がる(これはyarnの場合、npmの場合はnpm run serve)
vue init {template} {project-name}
Usage: init [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init) Options: -c, --clone Use git clone when fetching remote template --offline Use cached template -h, --help output usage information
2.x のプロジェクト作成時に良く使われてたコマンド
templateを基にした構成でプロジェクトを作成することができる テンプレートで良く使われるものは下の3つ
webpack
2018/8/1時点で一番starが付いているvue-cli用テンプレート(7,774)*2
webpackを使った単一ファイルコンポーネントのテンプレート
webpack + vue-loader + hot-reload + ESLint + Jest + Nightwatch
GitHub - vuejs-templates/webpack
A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
pwa
PWA(Progressive Web App)用のテンプレート
GitHub - vuejs-templates/pwa
PWA template for vue-cli based on the webpack template
webpack-simple
webpack + vue-loader とシンプルなテンプレートで見通しが良くカスタマイズしやすい
これも単一ファイルコンポーネントとして.vueファイルが生成される
GitHub - vuejs-templates/webpack-simple
A simple Webpack + vue-loader setup for quick prototyping.
こちらもいくつか質問されるので、良きように答える
するとプロジェクトが作成される
cd {project-name} でプロジェクトディレクトリに移動し
npm run dev でアプリが立ち上がる
段々雑になった気がしないでもないが、とりあえずこんな感じ
