VueのCLIおよびvue.config.js（A）

時々、私たちはすぐにVUEの完全なシステムを構築する必要があり、頻繁に使用されるVUE-CLI、VUE-CLIコマンドを使用して簡単に使用し、シンプルに簡単ですが、私はいくつかは、ゆっくりとそこに組み込まれていると感じたときにCLIサービス（ので欠点があり、 @ VUE / CLIサービス）に依存する開発環境です。それは我々がインストールに共通cnpmを使用していない、基本的にインストールするには、ローカルプロジェクトごとにインストール@ VUE / CLIの作成NPMパッケージである、または使用NPMとのWebPACK。あなたが作成反応するアプリに精通している場合は機能セットが同じではないが、その後、@ VUE / CLIサービスは、実際には、-スクリプトを反応させるとほぼ同じです。

追加ボーナスとして、CLIは、あなたは、彼らが必要なものを決めることができますし、オプションパッケージの初期インストールでは、当然のことながら、必要がないことですが、いくつかはあるベル/活字体の翻訳、ESLint統合、ユニットテストとエンドツーエンドのテストを含め、基本的な。あなたは、NPMの実行を実行するときに役立つ、実行VUE-CLI-serviceコマンドは、それが自動的に解析し、記載されているすべてのCLIプラグpackage.jsonをロードします。

まず、インストールが唯一の生涯一度インストールVUE-CLIグローバルインストールは、単にインストールNPMと言って、非常に簡単です。-gがインストールグローバルを表し

NPMインストール-g @ VUE / CLI

正常にインストールは非常に簡単であるかどうかを検出し、あなたはCMDでコマンドをVUEことができるかどうかを確認。

ここVUE -Vで、インストールされたバージョンを確認してください。

第二に、ラピッドプロトタイピング

これが意味することは私の手には、デバッグ用のファイルへの.vue必要性を持っていた、または私はちょうどページを開発した場合、その後、私は非常に複雑なプロジェクトを開始する必要はありません、時間のような無駄、ページがすぐに表示することができますということです。

1は、-g @ VUE / CLIサービス・グローバル//最初のインストールNPM我々は-gがグローバル表し、グローバル展開をインストールする必要があります。

2、ファイルVUEやJSファイルを作成します。私たちは、サフィックスVUEファイルを作成するためにここにいます。

<テンプレート> 
    の<divのid = "TODOリスト-例"> 
        <フォームのV-上：submit.prevent = "addNewTodo"> 
            <ラベル用 = "新しいTODO"> TODO </ label>を追加します。
            < 入力
            V -モデル= "newTodoText" 
            ID = "新しいTODO" 
            プレースホルダ = "Egが猫フィード" 
            > 
            > <ボタンを追加</ボタン> 
        </フォーム> 
        <UL> 
            <LIのV- ためドスに（TODO、指数）」=削除（インデックス） "「クリック= @" "> {{todo.title}} <ボタンID =" removeBtn>削除</ボタン> </ LI> 
        </ UL> 
    </ div> 
</テンプレート> 
<スクリプト>
    エクスポートデフォルト{ 
        データ（）{ 
            リターン{ 
                newTodoText： '' 、
                nextTodoId： 1 、
                ドス：[ 
                    { 
                        ID： 1 、
                        タイトル： '料理を行う' 、
                    } 
                ] 
            } 
        }、
        メソッド：{ 
            addNewTodo：関数（）{
                 この。 todos.push（{ 
                    ID：この.nextTodoId ++ 、
                    タイトル：この.newTodoText 
                }）
                この .newTodoText = '' 
            }、
            削除（インデックス）{ 
                この .todos.splice（インデックス1 ）。
            } 
        } 
    }
 </ SCRIPT> 
<スタイル> 
    #removeBtn { 
        マージン - 左：12ピクセル。
    }
 </スタイル>

その後、我々はここで注意することは、直接このディレクトリで実行を開始することができ、彼がapp.vue命名されている場合、直接VUEを使用することができることである私たちの名前がlzhe.vueとしてカジュアルに非常に似ている場合は、起動するのに役立ちますそして、同様に、我々は起動に示しlzhe.vueエントリーVUEがサーブを指定します。

もちろん、いくつかの開始VUEの構成オプションもあります次のとおりです。

オプション：

   -o、 - オープンは、ブラウザ開くために
   - -c、クリップボードローカルにURLをコピーし、コピーを
   -h、--help出力の使用状況に関する情報

かなり役に立たないと感じ、まだデバッグシングルVUEのラピッドプロトタイピングは、デバッグにプロジェクトを作成する必要はありません。

第三には、完全なプロジェクトを作成します

Vueがlzheコマンドはlzheと呼ばれるプロジェクトを作成するために使用することができ、あなたがプリセット（事前選択）期間を作成するように求められます、インストールする機能何を聞いて作成します。私は3つのオプション、一目インストール機能に続いて、それぞれを持って、最後のオプションは、彼はより多くのオプションを提供しています、自由に設定可能なプロパティを手動で選択です。OK後にキャリッジリターン。

以下は、手動選択であります：

全体の選挙で、スペースが選択または選択解除されている場合

四、VUEのUIは、プロジェクトを作成および管理するためのグラフィカルインターフェイスを使用することができます

あなたは、これはあまりにも面倒ですが、また、キーボードで考えるならば、我々はそれがプロジェクトの作成を達成することは容易であるが、一見のためのページを入るVUE UIにcmdと入力し、VUE UIに使用できるグラフィカルなアイテムを作成するために使用します。

VueのCLIおよびvue.config.js（A）

おすすめ