Vueスキャフォールディングのインストールと新しいプロジェクト（およびelement-uiとaxiosの導入）

1つは、vue.jsをインストールする

1はじめに

Vue.js（ビューと同様に/vjuː/と発音）は、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他のヘビーウェイトフレームワークとは異なり、Vueはボトムアップのインクリメンタル開発設計を採用しています。Vueのコアライブラリはビューレイヤーのみに焦点を当てており、習得が非常に簡単で、他のライブラリや既存のプロジェクトとの統合も非常に簡単です。一方、Vueは、Vueエコシステムによってサポートされる単一ファイルコンポーネントとライブラリで開発された複雑な単一ページアプリケーションを完全に駆動できます。

Vue.jsの目標は、可能な限り単純なAPIを介して、応答データバインディングと結合されたビューコンポーネントを実装することです。

Vue.jsはMVVMモードのフレームワークであり、読者が角度のある経験を持っている場合は、すぐにVueを使い始めることができます。

vue.jsの機能：

• 使いやすさ：HTML、CSS、JavaScriptをすでに知っていますか？今すぐガイドを読んで、アプリケーションの構築を開始してください。

• 柔軟性：シンプルで小さなコア、プログレッシブテクノロジースタック。あらゆる規模のアプリケーションに対応できます。

• 高効率：16kb min + gzip実行サイズ、超高速仮想DOM、最も心配のない最適化

2.環境設定

Vueが推奨する開発環境：

• Node.js：javascriptランタイム環境（ランタイム）、さまざまなシステムがさまざまなプログラミング言語を直接実行します

• npm：Nodejsの下のパッケージマネージャー。中国でのnpmの使用は非常に遅いため、Taobao NPMミラー（http://npm.taobao.org/）の使用をお勧めします。

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

• webpack：その主な目的は、リソースのマージやパッケージ化など、CommonJS構文を介してブラウザー側で公開する必要があるすべての静的リソースを準備することです。

• vue-cli：ユーザーが生成したVueプロジェクトテンプレート

3.node.jsをインストールします

node.jsの公式ウェブサイトからノードをダウンロードしてインストールします。インストールプロセスは非常に簡単で、「次のステップ」までは問題ありません（ばかげたインストール）。
インストールが完了したら、次の図に示すように、コマンドラインツールを開いてノード-vを入力します。対応するバージョン番号が表示されれば、インストールは成功しています。

npmパッケージマネージャーはノードに統合されているため、npm -vと直接入力すると、次の図に示すようにnpmのバージョン情報が表示されます。

4.cnpmをインストールします

npmの一部のリソースがブロックされているか、外部リソースであるため、npmを使用して依存パッケージをインストールすると失敗することがよくあります。そのため、npmの国内ミラーであるcnpmが必要です。

コマンドラインにnpminstall -g cnpm --registry = http：//registry.npm.taobao.orgと入力し、以下に示すようにインストールが完了するまで待ちます。

完了後、npmの代わりにcnpmを使用して依存パッケージをインストールできます。cnpmについて詳しく知りたい場合は、Taobaonpmミラーの公式ウェブサイトを確認してください。

5.vue-cliスキャフォールディングツールをインストールします

1）vue-cliの履歴バージョン情報を表示し、インストールとアンインストールを実装します

インストールする前に、次のコマンドを使用して、vue-cliがインストールされているかどうかを確認します。インストールされている場合は、特定のインストールバージョンを確認できます。インストールレコードがある場合は、後で説明するアンインストールコマンドを使用してアンインストールする必要があります

//-V是大V，书写小v会报错
vue -V

これまでのところ、vue-cliスキャフォールディングはバージョン4.Xに更新されています。npmコマンドを使用して、vue-cliスキャフォールディングのすべての情報を直接表示できます。

npm view @vue/cli versions  --json

コマンドを使用して、3.0以降のすべてのバージョン情報を照会します。

ここで注意してください

npmコマンドのインストールは、3.0以降では異なります。
3.0より前のバージョンをインストールまたはアンインストールする場合は、次のコマンドを使用します。

//安装3.0以前的vue-cli版本
npm install vue-cli -g

//卸载3.0以前的vue-cli版本
npm uninstall vue-cli -g

3.0以降のvue-cliコマンドをインストールまたはアンインストールします

//安装3.0+版本
npm install @vue/cli -g

または

//安装3.0+版本
npm install  -g @vue/cli

//卸载3.0+版本
npm uninstall @vue/cli -g

または

//卸载3.0+版本
npm uninstall  -g @vue/cli

上記のコマンドを使用して、デフォルトで最新バージョンを直接インストールします。

2）指定されたバージョンのvue-cliをインストールします

特定のバージョンのvue-cliがインストールされていて、他の互換性の問題がある場合は、他のバージョンをダウングレードしてインストールする必要があります。次のコマンドプロセスに従ってください。

//查看vue-cli历史版本
npm view @vue/cli versions  --json

//卸载已经安装的版本注意是vue-cli3.0+，命令有些区别
//卸载3.0+版本
npm uninstall -g @vue/cli

//重新安装指定版本
npm install -g @vue/cli@4.5.6

上記の最後の@は、指定された特定の履歴バージョンです。指定されていない場合、最新バージョンがデフォルトでインストールされます。

3）、cnpmを使用してvue-cliをインストールします

2）小さなステップで、npmコマンドを使用してvue-cliをインストールします。cnpmは上記の4番目のタイトルにインストールされているため、次のコマンドを使用してインストールできます。

//安装vue-cli
cnpm install -g @vue/cli@4.5.6

//重新安装指定版本
cnpm install -g @vue/cli@4.5.6

これで、Taobaoミラーを使用してvue-cliをインストールできます。これは、npmが使用するリソースライブラリのインストールプロセスが遅いか、ネットワークなどの要因によりインストールプロセスでエラーが発生する可能性があるためです。インストールにはnpmを使用してみてください。ただし、アンインストールしてください。 npmコマンドを使用する必要があり、cnpmに置き換えることはできません。
インストールが完了したら、vue -V（このVは大文字）を使用してバージョン番号を表示できます。

vue -V

（上記のcnpmインストール方法に置き換えられます）もちろん、cnpmをインストールしたくないが、npmによって構成されたリソースライブラリをTaobaoミラーに直接置き換えることができます。次に、npmコマンドを使用してTaobaoリソースのミラーを直接参照します。ライブラリ。
端末入力：

npm info vue

出力は次のとおりです。

vue情報を表示します。

 npm config get registry

npmリソースライブラリ（レジストリ）がデフォルトのアドレスに対応していることがわかります：https：//registry.npmjs.org/

次のコマンドを使用して、デフォルトのレジストリをTaobaoミラーに変更します

npm config set registry http://registry.npm.taobao.org

変更が成功すると、nmpコマンドを使用してインストールするときにTaobaoリソースライブラリから直接インストールされ、速度と安定性が保証されます。

6.vue-cliを使用してプロジェクトをビルドします

1）、vueuiグラフィカルインターフェイスを使用して新しいプロジェクトをビルドします

vue-cli3.0 +は、視覚的なプロジェクト管理ツールを追加します。cli3.0+のグローバルインストールが完了したら、cmdにコマンドを直接入力できます。vueuiを開始できます。アドレスのデフォルトはlocalhost：8000です
。参照してください。 to：vue-cl4 GUIを使用するvueプロジェクトを作成し、elementUIを導入する

2）、コマンドラインを使用して新しいプロジェクトをビルドします

• ディスクEのノードフォルダに新しいプロジェクトを組み込む場合は、下図のコマンドを使用してノードフォルダに入る必要があります。

• プロジェクトを作成する

vue create <プロジェクト名>を使用してプロジェクトを作成します

vue create vuetest

vuetestはプロジェクト名で、コマンド実行結果は下図のようになります。

• 選択機能の手動選択（手動構成）
  注：カーソルを使用して上下に切り替え、スペースを使用して選択し、Enterを使用して確認し
  ます。
  次の図のオプションを選択してEnterキーを押します。次に、次の図を入力して選択します。 vue.jsの3.Xバージョン。車が
  下の画像に入ると、履歴モードを使用するかどうか、つまり、URLに＃番号があり、URLアドレスに＃が表示されていないかどうかを確認するメッセージが表示されます。 、Enterキーを押して下の画像を入力し、
  [少ないモード]を選択して、Enterキーを押して下の画像を入力します

ESLint + Prettierを選択し、Enterキーを押して下の画像を入力します

保存することを選択したら、保存時にLintを確認し、Enterキーを押して次の図を入力します

構成ファイルをpackage.jsonファイルに書き込むことを選択し、Enterキーを押して次の図を入力し、
この構成をファイルに保存しないことを選択します。保存しないと、すべての新しいプロジェクトが上記で選択したパラメーターを再構成し、次のインターフェイスを待ちますインストールが完了したことを示します。
このとき、図のプロンプトコマンドを入力してサービスを実行します

//进入vuetest目录
cd vuetest
//运行生产模式服务
npm run serve

次の図のプロンプトが表示されたら、図のアドレスを介して
loacalhost：8080にアクセスし、デフォルトのインターフェイスを開くことができます。次の図に示すように、
新しいプロジェクトのビルドが完了しました。

router（ルーティング）やvuex（vue状態管理）などのパラメーターの紹介については、次の記事を参照してください。
ポータル1
ポータル2
ポータル3
実際には、コマンドラインとvueのステップとパラメーターを使用して作成されます。 uiインターフェースの作成は同じですが、使用するグラフィカルインターフェース作成の利点の1つは、gitファイルを自動的に分割してバージョン管理を実現できることです。

7.参照要素-新しいプロジェクトのUI

ここでは、vue uiを使用してElement-UIプラグインの依存関係を増やします。
最初にコマンドライン入力を開きます

vue ui

次のインターフェイスが表示されると、ブラウザでvue uiプロジェクトダッシュボードが自動的に開き、
左上隅の下矢印をクリックしてプロジェクトマネージャを選択し、
[インポート]をクリックして前の記事で新しくビルドされたプロジェクトvuetestをインポートして

戻りますプロジェクトダッシュボードインターフェイスの左上隅にある隅のドロップダウンボックスで、インポートしたばかりのvuetestプロジェクトを選択し
、次に左側のメニューでプラ​​グインを選択してから、下部にある[プラグインの追加]ボタンをクリックします。右側のインターフェイスの右側で、
element-uiをクエリして検索し、
下の図の赤いボックスプラグインを選択してインストールします。クリックして、1234の手順で入力します。インストールが完了したら、クリックしてすぐに利用できる転送を完了することを忘れないでください。

通常のプロセスに従って、サービスをインストールして再起動した後、localhost：8080にアクセスすると、次のインターフェイス
が赤いボックスのテキストとelボタンボタンで表示され、インストールが成功していることがわかります。

ただし、複数のインストールおよび下位バージョンの実験の後、4.xのバージョンは、現在の要素-UIの互換性にエラーを報告します。システムが開くたびに、ページが次のエラー空白で、コンソールが出力されます。
によると、プロンプトが表示されたら、Vueを取得できないと思います。たとえば、element-uiはまだ4.xと互換性がないため、vue-cliバージョンを3.Xに減らすことを強くお勧めします。

8.新しいプロジェクトでaxiosを参照します

axiosをインストールする前に、axiosの概要を説明してください。
vueはハイバージョンで公式ライブラリのvue-resourceのメンテナンスを放棄したため、axiosを使用してvueプロジェクトにフロントエンドとバックエンドのインタラクションデータを実装することをお勧めします。通常、axiosライブラリを使用します。これは、ブラウザ側とnode.jsで実行できるpromiseベースのhttpライブラリです。リクエストとレスポンスのインターセプト、リクエストのキャンセル、jsonの変換、cSRFに対するクライアント側の防御など、多くの優れた機能を備えています。したがって、axiosは慎重に研究する必要があります。これは学習のための公式文書です。
axios公式中国語ドキュメントポータル

1）、axiosとvue-axiosの関係

Axiosはライブラリであり、Vueのサードパーティプラグインではありません。使用する場合、Vue.use（）を介してプラグインをインストールすることはできません。プロトタイプにバインドする必要があります。

import Vue from 'vue'
import axios from ‘axios’
//绑定到vue原型链上，直接使用Vue.$axios.get或this.$axios.get
Vue.prototype.$axios = axios

特定の使用法：
上記の使用法も非常に一般的ですが、強迫性障害の人として、Vue.use（）メソッドを使用して直接変更を回避し、Vueでelement-uiプラグインを使用する方法が好きです。プロトタイプ。
vue-axios。これは、axiosをVue.jsに統合する小さなラッパーであり、プラグインのようにインストールできます。
vue-axiosドキュメント

2）axiosとvue-axiosのアンインストールとインストール

インストールする前に、vue.jsバージョンとvue-axiosバージョンの互換性に関するvue-axiosドキュメントを確認してください。

VueJS \ VueAxios	1.x	2.x	3.x
1.x	✔	✔	❌
2.x	✔	✔	❌
3.x	❌	❌	✔

今日は2020年10月19日です。今日は3.Xであるvue-axiosのバージョンを確認しました。つまり、vue 2.Xを使用している場合は、vue-axiosの2.xバージョンをインストールする必要があります。 。、それ以外の場合は、非互換性のエラーが報告されます。
vue-axiosドキュメントで履歴バージョン情報を表示できます。次の図は、最新のバージョン履歴の一部です。
次に、アンインストールとインストールの方法を以下に説明します。

• axiosがプロジェクトにすでにインストールされている場合は、次のコマンドを使用して、最初にaxiosをアンインストールします。

$npm uninstall  axios

• axiosとvue-axiosがプロジェクトにすでにインストールされている場合、バージョンに互換性がないか、再インストールする必要があるため、npm uninstallコマンドを使用してaxiosとvue-axiosを別々にアンインストールするか、次のコマンドを使用して一度にアンインストールします

$npm uninstall  axios vue-axios

• 使用しているvueバージョンが2.X（package.jsonの「依存関係」で表示可能）の場合、vue-axiosの2.1.5バージョンをインストールする必要があります

$cnpm install --save axios vue-axios@2.1.5

上記のコマンドでは、vue-axiosの後に@ 2.1.5を使用して、インストールする特定のvue-axiosバージョンを指定します。インストールが成功すると、インストールされたvue-axiosとaxiosのバージョン情報を「依存関係」で表示できます。 "のpackage.json。

• 使用しているvueバージョンが3.X（package.jsonの「依存関係」で表示可能）の場合、vue-axiosの3.xバージョンをインストールする必要があります

$cnpm install --save axios vue-axios

最新バージョンは3.Xであるため、デフォルトのインストールコマンドを使用できます。vue-axiosのバージョン番号を指定する必要はありません。

3）Vueでのaxiosとvue-axiosの参照

グローバルメソッドVue.use（）を介してプラグインを使用して、mian.jsでaxiosとvue-axiosを参照することは、installメソッドを呼び出すことと同じです。

import Vue from 'vue'

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

特定の使用法の参照：
上の図は、axiosを使用する場合、Vue.axios、this.axios、this。$ httpの3つの参照方法があることを示しています。

axiosをインストールした後、vue-axiosは、Vueプロジェクトの下のnode_modules / _vue-axios / src /index.jsにあるvue-axiosのソースコードを確認できます。Vueのプラグイン作成方法を使用することは、Vueの全体的な生態環境とより一致しています。