在之前学习 Vue 基础知识点的文章中，我们还是采用传统的方式，通过在 html 页面上引用 vue.js 这个文件，从而将 Vue 引入到我们的项目开发中。伴随着 Node.js 的出现，以及 React、Angular、Vue 这类的前端 MVVM 框架的发展，前端越来越像后端靠拢，前端工程化的思想开始出现。现在的前端开发，已经不再只是一个 html 页面，上面引用各种 js、css 文件就可以完成开发的了。
与后端类似，前端开始出现各种已经很完善的框架模板、开始出现针对前端组件包的管理工具、各种各样的单元测试库，以及针对前端所特有的 js、css、image...这种静态资源文件的模块打包器。那么，从本篇文章开始，我们就从零开始，结合之前学习的 Vue 相关的基础知识，通过 Vue CLI 和 Element UI 去搭建一个基于 Vue 的 SPA 前端项目框架模板。
系列目录地址：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 的前端开发。你可以把它理解为我们 .NET 平台中微软所提供的各种基础的开发框架模板，就像 ASP.NET Core Web API 或者是 ASP.NET Core MVC 这一类的基础框架，我们可以在这个框架模板上进行开发，从而开发出具有统一标准、规范化的项目。
Element UI 则是饿了么基于 Vue.js 所做的一套前端组件库，你可以把它理解成类似于 Boostrap 或是 EasyUI 这种前端的 UI 库基于 Vue 中组件的思想所实现的前端库。通过使用这套组件库，我们就可以更好地统一整个项目的前端样式以及更加方便的进行开发。当然，你也可以采用别的组件库或是自己手写一套。
1、安装在使用 Vue CLI 之前，我们首先需要安装这个组件包，你可以通过 npm 或是 yarn 的方式进行安装，当然，前提是你需要在你的电脑上安装好 Node.js。整个安装的过程很简单，你可以从我之前写的 ASP.NET Core 实战：使用 ASP.NET Core Web API 和 Vue.js，搭建前后端分离框架 这篇文章中来查看如何安装 Node.js 和 Vue CLI。
如果你安装已经完成，我们就可以通过命令行或是脚手架自带的项目管理页面去搭建一个属于你的 Vue 前端项目框架模板，这里我就选择命令行的方式进行创建项目。当然，在创建项目前我们需要通过命令来查看组件包的安装是否正确。你可以通过下面的命令去检查安装是否正确，当控制台输出版本信息后，则代表你的组件包已经成功安装了。
vue --version ## 查看安装的 vue cli 版本信息