Vue CLI 3メモ
Install
npm install -g @vue/cli
cli-service-global *
試しに使ってみることに適している。
vue serveとvue buildの2つのコマンドを使用できるようになる。
Install
npm install -g @vue/cli-service-global
vue serve *
vue createコマンドで生成されたプロジェクトのデフォルトの処理を実行する。
index.html、package.jsonや各種ライブラリの設定ファイルを置くことができる。
vue build *
指定したファイルをバンドルして出力する。
出力するファイルの形式はBuild Targetsにある。
プロジェクトの作成 *
vue create *
コマンドラインでプロジェクトを作成
vue ui *
GUI(ブラウザ)でプロジェクトを作成
プラグイン *
-
プラグインはwebpackの設定やvue-cli-serviceのコマンドを変更する。
プラグインのインストール
vue addコマンドを使用する。
npmのレポジトリを指定する。
// 以下の2つは等価
vue add @vue/cli-plugin-babel
vue add @vue/babel
// 以下の2つは等価
vue add vue-cli-plugin-foo
vue add foo
// vue-cli-plugin-routerやvue-cli-plugin-vuexは存在しないが
// 以下のように指定することができる。
vue add router
vue add vuex
プロジェクトローカルプラグイン(Project local plugin) *
Service Plugin
package.jsonのvuePlugins.serviceに以下のようにファイルを登録することでPluginAPIを使用したService Pluginを登録することができる。
UI plugin
package.jsonのvuePlugins.serviceに以下のようにファイルを登録することでUI APIを使用したUI Pluginを登録することができる。
{
"vuePlugins": {
"service": ["your-commands.js"],
"ui": ["your-ui.js"]
}
}
プリセット(Presets) *
.vuerc等に設定を書くとvue createした時にその内容が反映される。
CLI Service *
@vue/cli-serviceをローカルにインストールするとvue-cli-serviceが./node_modules/.bin/vue-cli-serviceにインストールされる。
package.jsonのscriptに指定することができる。
{
// ...
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
-
cache-loaderは Vueのシングルファイルコンポーネント、 Babelの対象物、 TypeScriptのファイル をコンパイルするときに使用される。
ファイルはnode_modules/.cacheディレクトリにキャッシュされる。
コンパイルでうまくいかなかったらnode_modules/.cacheディレクトリを削除して試してみる。 -
thread-loaderはBabelとTypeScriptが変換する時に使用される。
vue.config.jsでparallel: falseすると無効になる。
vue-cli-service serve *
-
webpack-dev-serverをベースにしたdevelopment serverを提供する。
-
デフォルトでHot-Module-Replacement (HMR)が動作する。
-
vue.config.jsのdevServerで設定を変更することができる。
vue-cli-service build *
-
ファイルをバンドルしてdistに置く。
-
--modernはModern Modeでアプリケーションをビルドする。
新しいブラウザーのみを対象とする時に指定する。 -
--targetはビルドの出力形式(app | lib | wc | wc-async (default: app))を指定する。
Build Targets -
--reportビルドの結果の分析
vue-cli-service inspect *
- webpackの設定を確認する。
Gitフック
@vue/cli-serviceをインストールするとyorkieがインストールされる。
package.jsonのgitHooksキーに設定することでGitの実行時に実行されるフックを登録することができる。