I.はじめに
ポイントの基本を学んでVueの前の記事では、我々はまだ我々のプロジェクトの開発へのVueを導入されるHTMLページでこのファイル、vue.js参照することにより、従来の方法を使用して。Node.jsのの出現により、および反応して、角度、フロントエンド開発のVue MVVMフレームワークのこの種は、より近く前に、より多くのバックエンドのように移動するには、フロントエンドエンジニアリングのアイデアが現れ始めました。今、フロントエンドの開発は、もはや単なるhtmlページ、上に引用し、JSの様々な開発を完了するために、CSSファイルではありません。
そして、バックエンドには、テンプレートの様々な表示されるように、フロントに類似し始めている非常に健全な枠組みとなっている、フロントエンドコンポーネントパッケージ管理ツール、独自のJS、CSS、画像のためのユニットテストライブラリの様々なだけでなく、フロントエンドのために表示されるようになりました...この静的リソースファイルパッカーモジュール。だから、この資料の冒頭から、私たちは、プロジェクトテンプレートのVueのSPAフレームワークに基づいてフロントエンドを構築するためにVueのCLIおよび要素UIにより、組み合わせの前に、関連のVueの基本を学んで、ゼロから始めましょう。
シリーズカタログ住所：https://www.cnblogs.com/danvic712/p/9549100.html
倉庫住所：https://github.com/Lanesra712/Grapefruit.VuCore/tree/master/app/grapefruit.ui
第二に、呉服コレクション
VueのCLIは、 迅速に開発するためのVue.jsフレームワークに基づいた完全なシステムですが、それは、私たちは、テンプレートベースのフロントエンドフレームのVueの生成を助けることができ足場フレーム生成ツールである、我々は、このベースでのVueのフロントエンド開発をベースとすることができます。あなたは私たちがこのフレームワークでできるだけの基盤のこのタイプのためのASP.NETコアのWeb API、またはASP.NETコアMVCフレームワークとして、私たちが提供するマイクロソフトの.NETプラットフォームの多様に基づいて、テンプレート開発フレームワークとしてそれを理解することができます統一規格で開発されたテンプレート、および標準化されたプロジェクトの開発。
要素UIが Vue.jsが行われ、それがフロントエンドコンポーネントライブラリベース飢えている、あなたはVueのは、実装ライブラリの考え方に基づいて、フロントエンドコンポーネント、このフロントエンドのUIライブラリブートストラップやEasyUIと類似していることを理解することができます。このコンポーネントライブラリを使用することにより、我々は、プロジェクトのより良い統一フロントエンドのスタイルと開発のためのより便利なことができます。もちろん、あなたも、あなた自身の手書き文字や他のコンポーネントライブラリのセットを使用することができます。
1、インストール
VueのCLIを使用する前に、私たちが最初にこのコンポーネントのパッケージをインストールする必要があり、あなたがあなたのコンピュータにインストールする必要があることを、当然のことながら、この方法でNPMや糸をインストールすることができますNode.js. インストールプロセス全体が非常に簡単です、あなたは私の前から書くことができます 使用ASP.NETコアのWeb APIとVue.js、分離フレームの終了を中心に構築された：ASP.NETコア戦闘 のNode.jsとVueのをインストールする方法を確認するには、この記事CLI。
インストールが完了した場合、我々は、コマンドラインを介したり、足場は、私はプロジェクトを作成するためのコマンドラインを実行するために選択したプロジェクトテンプレートのVueのフロントエンドフレームワークに属するページを構築するために、プロジェクト管理が付属しています。もちろん、アイテムを作成する前に、我々は、インストールパッケージの正しいコマンドを表示する必要があります。あなたは、コンソール出力のバージョン情報は、コンポーネントパッケージが正常にインストールされている表したときに、適切なインストールを確認するには、次のコマンドを使用することができます。
VUEの--version ##ビューインストールCLIのバージョン情報VUE
2、プロジェクトの初期化
我々はインストールすると、我々は、コマンドラインからフロントエンドのプロジェクトテンプレートを作成することができます。まず、あなたは、次のプロジェクトへのパスを作成し、端末を開き、私たちのプロジェクトを作成するには、次のコマンドを使用する必要があります。何らかの理由で、高速接続NPMソースが遅くなることがありますが、プロジェクトを作成するときに、VueのCLIは、我々が淘宝網のミラーソースは、それによって私たちの訪問のスピードを加速、NPMを追加するかどうかを促すメッセージが表示されますので、あなたが自由に選択できます。
＃Vueのは、プロジェクト名の作成
VUEをgrapefruit.uiを作成します
この時点で、あなたはコンソールから見ることができる第二は、我々は我々自身のフロントエンドコンポーネントプロジェクトをロードする必要がどのようなテンプレートを選択できることである一方、最初は、システムのデフォルトのプロジェクトテンプレートの設定で、二つの選択肢を提供します。ここでは、ロードするためにどのようなコンポーネントを決定するために、第二を選択します。
フロントエンドコンポーネントの選択では、我々は時に優れたプロジェクトロードの決定コンポーネント、我々はEnterキーで決定することができ、スペースバーで選択切り替えるように上下の矢印キーをすることができます。このテンプレートプロジェクトで、私は図に示す5つのコンポーネントを追加して、あなたは自分のニーズに応じてオンデマンドでロードすることができます。各コンポーネントの基本的な機能を以下に説明します。
バベル：これはJavaScriptのトランスコーダ、我々は新しい構文を使用する場合、ブラウザの古いバージョンは、我々はそれを自動的できる異なる変換ルールを追加することができ、バベルにより、この新しい構文をサポートすることができないかもしれません伝統的なJavaScriptの構文のシンタックスシュガーの新バージョンへの移行。
活字体：それはクラス、インタフェース、パラメータ、型制約、および、例えば、サポートされていないいくつかのJavaScriptを特徴と強力な言語を提供し、それは当然のこの強く型付けされた言語、C＃やJavaのを書くことよりはJavaScriptように私たちを行い、最終的にコンパイルされますそれは認識してjsのブラウザにファイルを。
PWA：プログレッシブ、Webアプリケーション、主に標準化されたフレームワーク、提供された実装と、Webアプリケーションのユーザーエクスペリエンスで同様のネイティブアプリケーションを使用して、ユーザーがネイティブアプリケーションを使用していると思うすることができますが、実際にはマイクロチャネルアプレットは、と見ることができますPWAアプリケーションのキャリア。
ルータは、この私たちは、前回の記事では、我々は公式のVueのルーティング管理コンポーネントで、導入している、と非常に精通している必要があります。
Vuex：一个 Vue.js 中的状态管理模式，这里的状态可以简单理解为数据。因为在使用 Vue 的开发中，我们会编写各种组件，有些时候，多个组件之间需要共享相同的数据，以及，各个组件之间的数据传递也比较复杂，所以我们需要一个集中式的状态管理器从而更好的管理数据，方便组件之间的通信。
CSS Pre-processors：CSS 的预处理器，可以让我们以一种编程的方式来写 CSS 文件，当然最终它们都会被编译器编译成标准 css 文件。
Linter / Foramtter：代码格式检查和格式化工具，主要是为了让我们的项目中写的代码可以更好的采用统一的风格。
Unit Testing / E2E Testing：单元测试工具
当我们选择好需要加载的组件后，就可以继续了。因为我们加载了 Vue Router，所以这里我们需要对前端路由的模式进行设定，这里我们继续使用 history 路由模式。
之后，我们需要选择一个 CSS 的预处理器，根据你自己的使用习惯选择即可。
因为之前有加载 ESLint 代码格式化组件，所以这里我们需要加载格式化和代码风格的规则，这里我选择的是 Airbnb 的规范，你可以自己选择其他的，当然你也可以编写出属于你自己的代码规范。
执行 ESLint 检查的时间节点，这里我全部勾选上。同时，如果你和我一样使用的是 VS Code 进行开发的话，你可以安装 ESLint 插件，这样在编写代码时，就会自动提示出不符合规范的代码。
加载的这些组件，需要一个配置文件进行配置，你可以选择全部放到 package.json 中，也可以选择将每个组件的配置单独放到一个配置文件中。这里我选择一个组件一个配置文件。
最后一步，是否保存这次的设置，如果保存的话，下次在创建项目时就可以直接使用了。
然后，慢慢等待项目依赖的组件加载完成，这一步的快慢，取决你的网速和人品，请坐和放宽。
当所有的依赖加载完成后，系统提示我们进入到项目路径，然后执行 npm run serve 命令。
当我们执行 npm 命令后，可以看到项目已经运行起来了，我们可以打开浏览器进行查看，当出现下面的页面时，恭喜你，项目的基础模板已经搭建的差不多了。
项目的基础模板已经可以正常运行了，现在我们就可以将 Element UI 添加到我们的项目中。饿了么为 Vue CLI 3 准备了相应的模板插件，所以这里我们就可以直接通过命令来加载 Element 插件到我们的项目中。
vue add element
因为整个项目会基于 Element 的组件进行搭建，所以这里我们直接选择全局引入；对于默认的样式，这里我们不做任何的修改，之后选择简体中文。当插件安装完成后，我们可以重新运行我们的项目进行查看。可以看到，页面上已经添加了一个 Element UI 中的按钮组件。
当 Element UI 安装完成后，饿了么官方也有针对 VS Code 的插件，所以这里我们也可以安装，从而更便捷在项目开发中使用到 Element 中的组件。
同时，作为一个完整的项目，我们需要与采用 ASP.NET Core Web API 开发的后端进行数据交互，所以我们需要添加 axios 这个组件库，这里我们使用 npm 安装即可。至此，我们的项目的基础框架模板就已经创建完成了。
npm install axios
三、总结
这一章主要是学习如何通过 Vue CLI 3 和 Element UI 去搭建一个基础的前端项目。在下一篇文章中，我将参考文章最后列出的参考文章和 vue-admin-template 这个模板对我们的项目进行调整，从而适应我们自己的开发习惯。