[Vue]開発環境を構築する

新しいことを学ぶときは、まず開発環境を構築する必要がありますが、最近はフロントエンドの技術を学びたいと思いますが、Vueの開発環境はまだ比較的簡単にセットアップできます。

ビルド環境

1.開発ツール

VSCode
VSCode plugin-vue（構文の強調表示）

2.動作環境

Node.jsをインストールする
バージョン情報ノードを表示-v

3.パッケージ管理ツール

npm（外部ソース）は
node.jsとともにインストールされ、バージョン情報を表示しますnpm -v
cnpm（淘宝網のソース）

npm install -g cnpm --registry = https：// registry.npm.taobao.org

インストールパッケージ

npm install -g @ vue / cli

パッケージをアンインストール

npmアンインストールvue-cli -g

4.パッケージツール

Webpackをインストールする

npm install webpack -g

5. vue-cli（足場）をインストールする

vue-cli 4.0+が@ vue / cliに変更されました。古いバージョンがインストールされている場合は、最初にアンインストールしてください

インストールする

npm install -g @ vue / cli

古いバージョンのvue-cliをアンインストールします

npmアンインストールvue-cli -g

バージョン情報を表示する
vue -V（大文字であることに注意）
使用する

プロジェクトを作成します。 vue create projectName
コンパイルとホットアップデート：npm run serve
コンパイルと圧縮： npm run build

練習

プロジェクトを作成する

プロジェクトを作成するフォルダーへのcmd

1.足場作成プロジェクト

1.1足場の作成 vue create my-project 注：プロジェクト名は大文字にすることはできません
。セットアップを選択するキーダウン、設定（デフォルト/手動）を選択1.2を、ここでデフォルトを選択してください
。1.3を選択し、作成完了を待つ入力
1.4プロジェクトを作成したが、同じファイル名を生成しますクリップ

2. UI経由で作成

UIを見る

作成ページが開き、プロジェクトの作成、デバッグの開始、コンパイル、生成などを行うことができます。UIは非常にシンプルで、導入されません。

デバッグと実行

cmdをプロジェクトフォルダー（上記で作成したフォルダーではなく、scaffolding / uiで作成したプロジェクト名フォルダー）に実行します。

npm run serve

実行するたびに対応するフォルダを見つける必要があります。これはさらに面倒です。使用するためのヒントをいくつか紹介します

VSCodeによって開発された場合は、ターミナルで直接実行します

2. Powershellを介して実行し、対応するフォルダーを開き、Shift +マウスの右ボタンを押して、Powershellをここで開くことを選択します

3.対応するフォルダーを直接見つけるために、フォルダーパスの前にcmdスペースを追加します

コンパイルして生成

コマンド実行

npm run build

プロジェクトファイルにdistフォルダーを生成する

フロントエンドファイルを展開する

1.バックグラウンドサーバー（IIS、tomcat）で公開する

生成されたリソースファイルをバックグラウンドサーバーの静的リソースフォルダーにコピーし、バックグラウンドサーバーがスタートアップページを設定する

アドバンテージ
1. シンプル、複数のサーバーを展開する必要なし
短所
1. フロントエンドの担当者はバックエンドの担当者と協力する必要がある
2. リリース後、デバッグの問題があるか、バックエンドサーバーに基づく必要がある

2.独立したフロントエンド展開

nginxは、フロントエンドリソースのWebサーバーとして機能し、バックエンドサーバーのリクエストをリバースします

アドバンテージ

ドキュメントの検査を容易にするために、フロントエンドとバックエンドが別々に配置
フロントエンドとバックエンドの担当者が通信コストを削減
nginxのクロスドメイン問題を解決でき、バックグラウンドサーバー処理なし

短所

複雑さを追加しますが、これはnginxではあまりありません

nginx設定ファイル

    サーバー{ 
        リッスン        80 ; 
        server_name localhost; 

       
        場所 / { 
            ルートF：\ Codes \ Vue \ my - project \ dist; 
            index index.html index.htm; 
        } 

        location / api { 
            proxy_pass http：// 127.0.0.1:8080; 
        } 
}

転送元を指定してください：https://www.cnblogs.com/WilsonPan/p/12719082.html

おすすめ