38elements.github.io - Vue CLI 3メモ

Vue CLI 3メモ

38elements.github.io Spined HTML

Vue CLI 3メモ Vue CLI 3メモ Vue CLI 3メモ Document Github Packages Configuration Reference 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の実行時に実行されるフックを登録することができる。 Vue.jsメモ ≪redux-actionsメモ Main DOMメモ≫