I. Introduction
In the article before Vue learning the basics of points, we still using the traditional way, by reference vue.js this file on the html page, which will be introduced Vue to our project development. With the advent of Node.js, and React, Angular, this kind of front-end development Vue MVVM framework, to move closer to the front more and more like the back-end, front-end engineering ideas began to emerge. Now the front-end development, is no longer just an html page, cited above, a variety of js, css file to complete the development.
And the back end is similar to the front began to appear a variety of templates has been very sound framework, began to appear for the front-end component package management tools, a variety of unit testing libraries, as well as front-end for unique js, css, image ... this static resource file packer module. So, from the beginning of this article, we'll start from scratch, learning the basics of the relevant Vue before the combination, by Vue CLI and Element UI to build a front-end based on the Vue SPA framework of the project template.
Series Catalog Address: https://www.cnblogs.com/danvic712/p/9549100.html
Warehouse Address: https://github.com/Lanesra712/Grapefruit.VuCore/tree/master/app/grapefruit.ui
Second, dry goods collection
Vue CLI is a complete system based on Vue.js framework for rapid development, it is a scaffolding frame generation tool that can help us generate a template-based front-end frame Vue, we can based front-end development of Vue on this basis. You can understand it as a template development framework based on a variety of Microsoft .NET platform provided by us, just as ASP.NET Core Web API, or ASP.NET Core MVC framework for this type of foundation, we can in this framework development on the template, which developed and standardized project with a unified standard.
Element UI is hungry it a front-end component library based Vue.js done, you can understand it to be similar to Boostrap or EasyUI this front-end UI library based front-end components in the library idea Vue implemented. By using this component library, we can better unified front-end style of the project and more convenient for development. Of course, you can also use your own handwriting or other component library set.
1, the installation
Before using Vue CLI, we first need to install this component package, you can install npm or yarn by the way, of course, that you need to install on your computer Node.js. The entire installation process is very simple, you can write from before my ASP.NET Core combat: Use ASP.NET Core Web API and Vue.js, built around the end of the separation frame this article to see how to install Node.js and Vue CLI.
If you have completed the installation, we can through the command line or scaffolding comes with project management to build a page belonging to your front-end framework of the project template Vue, where I chose to carry out the command line to create a project. Of course, before creating the items we need to view the installation Package correct command. You can use the following command to check for proper installation, when the console output version information, represents your component package has been successfully installed.
vue --version ## View installed cli version information vue
2, initialize the project
When we installed, we will be able to create a front-end project template from the command line. First, you need to create a path into the next project, open a terminal, and then use the following command to create our project. For some reason, speed connection npm source may be slower, so when you create a project, Vue CLI will prompt whether we will Taobao mirror source added npm, thereby accelerating the speed of our visit, you are free to choose.
# Vue create the project name
vue create grapefruit.ui
At this point, you can see from the console gives two options, the first is the system default project template configuration, while the second is that we can choose our own front-end component project templates What needs to be loaded. Here, we choose the second, to decide what components to load.
In the choice of front-end components, we can be up and down arrow keys to switch selected by the spacebar, when the decision component of good project load, we can be determined by the Enter key. In this template project, I added five components shown in the figure, you can be loaded on demand according to their needs. The basic function of each component are described below.
Babel: This is a JavaScript transcoder, when we use the new syntax, the old version of the browser may not be able to support this new syntax, by Babel, we can add different conversion rules that can automatically the transition to the new version of syntactic sugar to traditional JavaScript syntax.
TypeScript: It provides strong language features some JavaScript that is not supported, for example, classes, interfaces, parameters, type constraints, and so, it makes us more like JavaScript to write C # or Java this strongly typed language, of course, will eventually compile js file into the browser so that recognize.
PWA: Progressive Web applications, primarily standardized framework using the provided implementation and native applications similar in web application user experience, allowing users to think they're using native applications, micro-channel applet in fact can be seen as a carrier of PWA applications.
Router: This we should be very familiar with, in the previous article, we have introduced, is the official Vue routing management components.
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 这个模板对我们的项目进行调整，从而适应我们自己的开发习惯。