序文：
プラットフォームを開発したい場合は、バックエンドテクノロジーを習得するだけでなく、フロントエンドページを通じてそれを表示する必要があります。これにより、美的効果が得られるだけでなく、優れた成果を達成するための操作が容易になります。インタラクティブな効果。
ここで私は Vue フロントエンド フレームワークに出会いました。アプリ用の Ele.me Mint UI、Web ページ用の We UI、Tencent WeChat の WeChat アプレットなど、市場には便利な Vue ベースのフロントエンド コンポーネント ライブラリが数多くあります。 iView UI、すべてのレベルのlayUI、そしてこれから学習するEle.meによって起動されるElement UIは、主にブラウザインターフェース表示のフレームワークに使用されます。
1.node.jsをインストールする
「Software Installation Package」ディレクトリにnode-v12.18.2-x64.msiをインストールします。
ダウンロードアドレス: https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi
ターミナル ウィンドウで、対応するノードまたは npm がインストールされているかどうかを確認します。
ノード -v
npm -v
2.タオバオcnpmをインストールする
NPM Mirror_NPM ダウンロード アドレス_NPM インストール チュートリアル - Alibaba オープンソース ミラー ステーション
ターミナルを開き、次のコマンドを実行します。
npm install -g cnpm --registry= https://registry.npm.taabao.org
cnpm 情報のクエリ: cnpm -v
3. vue-cli スキャフォールディングをインストールする
#使用npm
npm install -g @vue/cli
#或者使用淘宝npm镜像源（建议使用cnpm）
cnpm install -g @vue/cliインストールプロセス中に次のエラーが報告された場合:
インストールするには、次のコマンドを実行できます: npm install --save vue-runtime-helpers
次のコマンドを実行します。
npm install --save vue-runtime-helpers
4. vs code または webstorm を使用してエンジニアリング プロジェクトを作成する
ソースコード管理のために git をインストールすることをお勧めします
#创建项目
vue create 项目名
或者在webstorm里新建一个vue.js的项目
#如果使用gitbash
winpty vue.cmd create 项目名
#或者创建默认工程目录
vue create 项目名 --default
#用命令vue init webpack+项目名称
#来生成和初始化项目，推荐初始化项目名称到加入路由那处选择默认，之后全选no，之后npm初始化那里选推荐默认选项npm就好;
如下图所示： 
ターミナルウィンドウに「vue」と入力します
作成したプロジェクトディレクトリをエディタで開く
5. プロジェクトを開始する
方法 1:
ターミナルを開き、次のコマンドを実行します。
cnpm 実行サーブ
方法 2:
指定されたプロジェクト ディレクトリに移動してプロジェクトを実行します
cd プロジェクト ディレクトリ (cd my_vue)
cnpm 実行サーブ
コンポーネントの関係:
コンポーネントディレクトリ - サブコンポーネントファイルを保存します
App.vue----親コンポーネント ファイル
- 親コンポーネントが子コンポーネントを使用する場合は、次の点に注意してください。
- <script> のサブコンポーネント モジュールをインポートします
- エクスポートのデフォルトのコンポーネントでサブコンポーネントを宣言する
- テンプレートでこれを参照してください
ディレクトリ解決
| ディレクトリ/ファイル | 説明する |
|---|---|
| 構成 | ポート番号などを含む設定ディレクトリ。初心者向けにはデフォルトを使用できます。 |
| ノードモジュール | npm によってロードされるプロジェクトの依存関係 |
| 送信元 | ここが開発したいディレクトリです。基本的に行うべきことはすべてこのディレクトリ内にあります。これには、いくつかのディレクトリとファイルが含まれています。
|
| 静的 | 画像、フォントなどの静的リソース ディレクトリ。 |
| テスト | 初期テストディレクトリ、削除可能 |
| .xxxx ファイル | これらは、構文構成、git 構成などを含むいくつかの構成ファイルです。 |
| インデックス.html | ホームエントリファイルには、メタ情報や統計コードを追加できます。 |
| パッケージ.json | プロジェクト構成ファイル。 |
| README.md | プロジェクトドキュメント、マークダウン形式 |