この記事はもともと1967年に出版されましたhttps://www.telerik.com/blogs/a-first-look-at-the-vue-cli
こんにちは再び!😃
最近、恥知らずな自己昇進を申し訳ありません😅), その中で、我々はVueがどのように機能するかのすべての基礎を経験した.
しかし、我々はVEEを見るだけではなく<script> 静的なHTMLファイルにタグを付け、ページのJSに直接設定します.
これは、ビッグガールのツールに卒業し、Vueとの作業の最も楽しい側面の一つを見ている- CLI(コマンドラインインターフェイス)です.
恐れない、それは超簡単です!

Sadly, for this tutorial i'm going to have to assume that you have a little knowledge of how to navigate inside the terminal with basic cd commands, because this is way out of scope of what Vue CLI is or does. The cd command is super basic though, and you can easily google for a video or quick tutorial if you need a refresher

セットアップ

我々が始める前に、我々が我々のコンピュータにセットアップする必要がある2、3のものがあります.あなたが既にそれらを持っている場合は、いくつかのこれらの上にスキップしてください.

NODEJS

私たちのシステムで動作するCLIを得るためには、ノードを最初にインストールする必要があるでしょう.特に、この文書を書くときには、少なくとも8.8.9を使う必要があります.
以前にノードをインストールしたが、使用しているバージョンが不明な場合は、端末を開き、次のコマンドを実行しますnode -v . 出力を得るべきですv11.9.0 , エラーが発生した場合、マシンにノードがインストールされていない可能性があります.
ノードの公式ページへhttps://nodejs.org/en/ そして、非常にホームページでは、ダウンロードする2つの緑のボタンが表示されます.先に行くと言うバージョンをクリックしてLTS あなたが何をしているかを知っていない限り、長期的なサポート.
現在のオペレーティングシステムをダウンロードし、ダブルクリックしてインストールウィザードを開きます.完了したら、もう一度端末を起動し、実行してみてくださいnode -v もう一度すべてが動作していることを確認します.
もう一つは、ノードをインストールするときにも得るNPM (ノードパッケージマネージャ)無料でお使いのコンピュータにインストール!私たちは、後でこれを使用するつもりです、それで、あなたがここがどこから来たかについて疑問に思うならば、ちょっとそれを心にとめておいてください.

糸(任意)

使用を好む人もいるyarn オーバーnpm パッケージマネージャーの彼らの選択として、個人的に私は好みを持っていないとプロジェクトとチームの要件に応じて両方を使用します-しかし、あなたが行くためにそれを取る場合はhttps://yarnpkg.com/en/ をクリックしてInstall Yarn ボタン.
もう一度、ファイルをダウンロードし、インストールウィザードに従ってください.完了したら、それをチェックすることができますyarn 正しく実行してマシンに追加されましたyarn -v 端末で.

CLIのインストール

甘い!我々が必要とするすべてを持っているので、我々は実際に進んで、VUE CLIを我々のコンピュータにインストールすることができます.
端末を開き、次のコマンドを実行します.(注意してください、私はNPMと糸コマンドの両方を表示するつもりです、両方を走らせる必要はありません-あなたが使いたいものを選んでください.

npm install -g @vue/cli

yarn global add @vue/cli

端末でこのコマンドを実行すると、一握りのスクリプトが実行されます.これについて心配しないでください、あなた自身にコーヒーを得に行って、それがすべてをインストールすることをするまで、待ちます.
注意-g and global これらのコマンドの両方のフラグは、このパッケージがインストールされていることを意味しますglobally あなたのコンピュータで.つまり、特定のフォルダに移動することなく、ファイルシステム内のどこからでもコマンドを使用できるようになります.
もう一度、すべてが正しく実行されてインストールされていることを確認しましょうvue --version 端末では、CLIのバージョン番号で出力を戻す必要があります.

プロジェクトの作成

我々の手を汚くして、実際にこのものを使う時間です.既にプロジェクトを作成したいフォルダに移動していない場合は、ターミナルを起動します.
現在実行したいコマンドはvue create <name> , どこ<name> プロジェクトの名前です-また、作成されるフォルダです.
では、最初のプロジェクトを実行します.

vue create avocados

フィッティング?
あなたはプロジェクトを構成するのに役立つ質問の束でヒットするつもりですが、パニックではない、彼らはすべて非常に自己説明している.
最初の画面では、デフォルト設定(初心者用のOKです)を選択するか、手動設定オプションで手動で選択します.
あなたのプロジェクトの設定では、VUEXのようなオプションを選択していない場合は心配しないでください-いつでも、すべてのこれらの再インストールする機会は、後でプロジェクトの上部にある時点で任意の時点で.
手動設定を選んだ場合は、プロジェクトのオプションを設定するオプションのウィザードを実行します.あなたは、矢印キーで、これをナビゲートすることができます選択し、スペースバーでオプションを選択解除し、Enterキーで次の画面にスキップします.
ここでは、グローバルな状態管理のためのタイプスクリプトのサポート、ルータベースの設定やVEXを追加するような選択肢を作ることができます.
したら、CLIはそのことを行いますし、数秒後にあなたの光沢のある新しいプロジェクトが準備されます.どうぞcd そして、フォルダ構造をチェックしましょう.

フォルダ構造

ああ!私は、この新しいプロジェクトをコードの中で開くつもりです、そして、私はアイコンをきれいにするために材料アイコンテーマを使っています.

クイック実行!

NodeRuleモジュール:あなたの依存関係のコードを、あなたがインストールすることができますまたは削除を使用してnpm and yarn

パブリックフォルダ:このフォルダはindex.html あなたのWebサーバーは、アプリケーションのURLに移動するときにロードされます.それが必要とするすべてのファイルはVueによって自動注入されるので、あなたは本当にここで起こることについて多くを心配する必要はありません.

SRC :すべてのコード、コンポーネント、資産などを置く場所です.

ルートファイル:プロジェクトのルートで、設定ファイルの束が表示されます.eslintrc.js あなたのES lint構成のために..gitignore Gitについてpackage.json and package-lock.json or yarn.lock パッケージ管理のためのファイル、および他のあなたの前の選択肢に応じて.

だからokはい、今何ですか?
親指の良いルールは、あなたが新しいプロジェクトを持っているときに、あなたの利用可能なスクリプトを参照したい場合はpackage.json ファイル.前方に移動し、それを開いて、あなたが呼ばれるJSONのエントリが表示されますscripts .

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

左側では、スクリプトの名前を取得し、キーの右側にある:値のペアは、スクリプトが実際に何をするのかを取得します.
どうやって使うの?まあ、それは実際には非常に簡単です.
NPMを使っているなら、端末にタイプしますnpm run <scriptname> , 例えばnpm run serve . あなたが糸を使っているならば、あなたはタイプしますyarn serve .

奉仕する

VUE CLIを使用するとき、あなたが働いている2つの主なスクリプトがありますserve もう一つはbuild .
先に行きなさいnpm run serve or yarn serve あなたの端末で(あなたは前にプロジェクトディレクトリにある必要があります)、そして、そのマジックを実行するのに数秒を与えてください.それはすべてのあなたの現在の資産をコンパイルして、束ねて、最終的にこの伝説を吐き出します.

いくつかのことが今起こっている.

このコマンドはあなたのためにサーバーを解雇しましたcontrol + c 端末のウィンドウで.

サーバーは、あなたのコードで行う変更を監視しているときに、それらを保存すると、それはすぐにあなたの資産を再バンドルされます(そしてエラーがある場合はあなたにエール).

これはあなたにlocalhost URLをコピーして貼り付けたり、コマンド/コントロールをクリックして、ブラウザを提供し、プロジェクトを表示できるようになります.

これは、動的に何かを変更するときにブラウザの中からアプリケーションの部分を動的に再読み込みするホットリロード機能を持っているので、例えば、CSSのビットを変更する場合は、ブラウザが自動的にCLI終了後に更新される取得を再コンパイルします.

したがって、ボトムライン、あなたがプロジェクトに取り組んでいるならば、あなたはずっとこれをバックグラウンドで実行して欲しいです.
一方、あなたはbuild コマンド.
先に行きなさいnpm run build or yarn build そして、あなたの資産をコンパイルするのに数秒を与えてください.
あなたのルートで新しいフォルダを取得しますdist どれがあなたのコピーの中にありますかindex.html , しかし、この時間は、minifiedとそれは埋め込まれたスクリプトとスタイルをロードする必要があります.
このフォルダの中にもcss and js コンパイル済みプロジェクトを保持するフォルダ.
要するに、これは最終的に、アプリケーションを配備するためにWebサーバーに入れたいフォルダです.

ボーナス

Vue CLIは実際にGUIを持っています.🤯
端末のプロジェクトルートに頭を置き、コマンドを実行するvue ui そして、驚くべき準備.あなたが表示/削除/プラグインをインストールすることができます完全なWebアプリケーションのGUIを取得し、依存関係をチェックアウトして、プロジェクトの設定を再生しても、以前に学んだスクリプトを実行することができます!

結論

VueのCLIを知っていると使用している-必要があります-すべての開発者は、Vueを使用してスパを作る.私は、端末が最初のタイマーのための暗くて怖い新しい世界でありえるということを知っています、しかし、あなたが一度、これらのステップを通り抜けるならば、私はそれがより少なくて、使用するのがより少なくなるようになります.(と他のすべてが失敗した場合は、あなたをバックアップするWeb UIを持っている!)