記事ディレクトリ
概要
CLI はコマンドライン インターフェイスであり、コマンド ライン インターフェイスと訳されますが、一般的にはスキャフォールディングとして知られています。
Vue CLI は、Vue.js に基づく迅速な開発のための完全なシステムであり、以下を提供します。
- @vue/cli を介したインタラクティブなプロジェクト スキャフォールディング。
- @vue/cli + @vue/cli-service-global によるゼロ構成プロトタイピング。
- ランタイム依存関係 (@vue/cli-service):
- アップグレードすることができます。
- 賢明なデフォルト構成を備えた Webpack 上に構築されています。
- これは、プロジェクト内の構成ファイルを通じて構成できます。
- プラグインで拡張可能。
- フロントエンドエコシステムの最高のツールを統合する公式プラグインの豊富なコレクション。
- Vue.js プロジェクトを作成および管理するための完全なグラフィカル ユーザー インターフェイス。
Vue CLI は、Vue エコシステム内のツール基盤の標準化に努めています。インテリジェントなデフォルト構成に基づいてさまざまなビルド ツールをスムーズに接続できるため、構成の問題に何日も悩まされることなく、アプリケーションの作成に集中できます。同時に、各ツールがイジェクトせずに構成を調整できる柔軟性も提供します。
インストール
ノードのバージョン要件
Vue CLI 4.x には、Node.js v8.9 以降が必要です (v10 以降を推奨)。n、nvm、または nvm-windows を使用して、同じコンピュータ上の複数のノード バージョンを管理できます。
この新しいパッケージは、次のコマンドのいずれかを使用してインストールできます。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
インストールすると、コマンド ラインで vue コマンドにアクセスできるようになります。vue を実行して、使用可能なすべてのコマンドのヘルプ メッセージが表示されるかどうかを確認するだけで、正常にインストールされたことを確認できます。
次のコマンドを使用して、バージョンが正しいかどうかを確認することもできます。
vue --version
プロジェクトを作成する
vue作成
次のコマンドを実行して新しいプロジェクトを作成します。
vue create hello-world
Windows 上で minTTY 経由で Git Bash を使用している場合、対話型プロンプトは機能しません。このコマンドは、winpty vue.cmd create hello-world 経由で開始する必要があります。ただし、引き続き vue create hello-world を使用したい場合は、~/.bashrc ファイルに次の行を追加してコマンドのエイリアスを作成できます。alias vue='winpty vue.cmd' 更新された bashrc ファイルを有効にするには、Git Bash ターミナル セッションを再起動する必要があります。
プリセットを選択するように求められます。基本的な Babel + ESLint 設定を含むデフォルトのプリセットを選択することも、「機能を手動で選択する」を選択して必要な機能を選択することもできます。
このデフォルト設定は、新しいプロジェクトのプロトタイプを迅速に作成するのに最適ですが、手動設定では、実稼働指向のプロジェクトにさらに必要なオプションが提供されます。
機能を手動で選択する場合は、プロンプトの最後で、将来再利用できるプリセットとして選択内容を保存することを選択できます。次の章ではプリセットとプラグインについて説明します。
~/.cross
保存されたプリセットは、ユーザーのホーム ディレクトリの .vuerc という名前の JSON ファイルに保存されます。保存されたプリセット/オプションを変更する場合は、
このファイルを編集します。プロジェクトの作成プロセス中に、依存関係をより速くインストールするために、お気に入りのパッケージ マネージャーを選択するか、淘宝網の npm ミラー ソースを使用するように求められます。これらの選択内容は ~/.vuerc にも保存されます。
vue create コマンドには、次のコマンドを実行して調べることができるいくつかのオプションがあります。
vue create --help
用法：create [options] <app-name>
创建一个由 `vue-cli-service` 提供支持的新项目
选项：
-p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项
-d, --default 忽略提示符并使用默认预设选项
-i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command> 在安装依赖时使用指定的 npm 客户端
-r, --registry <url> 在安装依赖时使用指定的 npm registry
-g, --git [message] 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git 跳过 git 初始化
-f, --force 覆写目标目录可能存在的配置
-c, --clone 使用 git clone 获取远程预设选项
-x, --proxy 使用指定的代理创建项目
-b, --bare 创建项目时省略默认组件中的新手指导信息
-h, --help 输出使用帮助信息
GUIを使用する
vue ui コマンドを使用して、グラフィカル インターフェイスでプロジェクトを作成および管理することもできます。
vue ui
上記のコマンドを実行すると、ブラウザ ウィンドウが開き、グラフィカル インターフェイスでプロジェクト作成プロセスが案内されます。
2.x テンプレートをプルする (古いバージョン)
Vue CLI 3 以上およびそれ以前のバージョンは同じ vue コマンドを使用するため、Vue CLI 2 (vue-cli) は上書きされます。古いバージョンの vue init 関数をまだ使用する必要がある場合は、ブリッジ ツールをグローバルにインストールできます。
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected]` 相同
vue init webpack my-project