一、前言

 

　　在之前学习Vue基础知识点的文章中，我们还是采用传统的方式，通过在html页面上引用vue.js这个文件，从而将Vue引入到我们的项目开发中。伴随着Node.js的出现，以及React、Angular、Vue这类的前端MVVM框架的发展，前端越来越像后端靠拢，前端工程化的思想开始出现。现在的前端开发，已经不再只是一个html页面，上面引用各种js、css文件就可以完成开发的了。

 

　　与后端类似，前端开始出现各种已经很完善的框架模板、开始出现针对前端组件包的管理工具、各种各样的单元测试库，以及针对前端所特有的js、css、image...这种静态资源文件的模块打包器。那么，从本篇文章开始，我们就从零开始，结合之前学习的Vue相关的基础知识，通过VueCLI和ElementUI去搭建一个基于Vue的SPA前端项目框架模板。

 

　　系列目录地址：https://www.cnblogs.com/danvic712/p/9549100.html

 

　　仓储地址：https://github.com/Lanesra712/Grapefruit.VuCore/tree/master/app/grapefruit.ui

 

　　二、干货合集

 

　　VueCLI是一个基于Vue.js进行快速开发的完整系统框架，它是一个框架生成脚手架工具，可以帮助我们生成基于Vue的前端框架模板，我们可以在这个基础上进行基于Vue的前端开发。你可以把它理解为我们.NET平台中微软所提供的各种基础的开发框架模板，就像ASP.NETCoreWebAPI或者是ASP.NETCoreMVC这一类的基础框架，我们可以在这个框架模板上进行开发，从而开发出具有统一标准、规范化的项目。

 

　　ElementUI则是饿了么基于Vue.js所做的一套前端组件库，你可以把它理解成类似于Boostrap或是EasyUI这种前端的UI库基于Vue中组件的思想所实现的前端库。通过使用这套组件库，我们就可以更好地统一整个项目的前端样式以及更加方便的进行开发。当然，你也可以采用别的组件库或是自己手写一套。

 

　　1、安装

 

　　在使用VueCLI之前，我们首先需要安装这个组件包，你可以通过npm或是yarn的方式进行安装，当然，前提是你需要在你的电脑上安装好Node.js。整个安装的过程很简单，你可以从我之前写的ASP.NETCore实战：使用ASP.NETCoreWebAPI和Vue.js，搭建前后端分离框架这篇文章中来查看如何安装Node.js和VueCLI。

 

　　如果你安装已经完成，我们就可以通过命令行或是脚手架自带的项目管理页面去搭建一个属于你的Vue前端项目框架模板，这里我就选择命令行的方式进行创建项目。当然，在创建项目前我们需要通过命令来查看组件包的安装是否正确。你可以通过下面的命令去检查安装是否正确，当控制台输出版本信息后，则代表你的组件包已经成功安装了。

 

　　vue--version##查看安装的vuecli版本信息

 

　　2、初始化项目

 

　　当我们安装完成后，我们就可以通过命令行去创建一个前端项目模板。首先，进入你需要创建项目的路径下，打开终端，然后使用下面的命令来创建我们的项目。因为某些原因，连接npm源的速度可能会比较慢，所以在创建项目时，VueCLI会提示我们是否将淘宝的镜像源添加npm中，从而加快我们访问的速度，你可以自由选择。

 

　　#vuecreate项目名称

 

　　vuecreategrapefruit.ui

 

　　此时，从控制台中可以看到给出了两个选项，第一项为系统预设的项目模板配置，而第二项则是我们可以自己选择我们的项目模板需要加载什么前端组件。这里，我们选择第二项，自己来决定加载什么组件。

 

　　在选择前端组件时，我们可以通过上下方向键进行切换，通过空格键进行选择，当决定好项目加载的组件后，我们可以通过Enter键来进行确定。在这个模板项目中，我添加了上图所示的五个组件，你可以根据自己的需求进行按需加载。每个组件的基本功能介绍如下。

 

　　Babel：这是一个JavaScript转码器，当我们使用新的语法时，旧版本的浏览器可能就无法支持这种新的语法，通过Babel，我们就可以添加不同的转换规则，从而就可以自动的将新版本的语法糖转换成传统的JavaScript语法。

 

　　TypeScript：它提供了一些JavaScript不支持的强语言特性，例如，类、接口、参数类型约束等等，它使JavaScript写起来更像我们的C#或是Java这种强类型语言，当然最终还是会编译成js文件从而让浏览器识别出。

 

　　PWA：渐进式的Web应用，主要是利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验，让用户以为自己正在使用的是原生应用，微信的小程序其实就可以看成是一种PWA应用的载体。

 

　　Router：这个大家应该很熟悉了，在前面的文章中我们也有介绍过，是Vue官方的路由管理组件。

 

　　Vuex：一个Vue.js中的状态管理模式，这里的状态可以简单理解为数据。因为在使用Vue的开发中，我们会编写各种组件，有些时候，多个组件之间需要共享相同的数据，以及，各个组件之间的数据传递也比较复杂，所以我们需要一个集中式的状态管理器从而更好的管理数据，方便组件之间的通信。

 

　　CSSPre-processors：CSS的预处理器，可以让我们以一种编程的方式来写CSS文件，当然最终它们都会被编译器编译成标准css文件。

 

　　Linter/Foramtter：代码格式检查和格式化工具，主要是为了让我们的项目中写的代码可以更好的采用统一的风格。

 

　　UnitTesting/E2ETesting：单元测试工具

 

　　当我们选择好需要加载的组件后，就可以继续了。因为我们加载了VueRouter，所以这里我们需要对前端路由的模式进行设定，这里我们继续使用history路由模式。

 

　　之后，我们需要选择一个CSS的预处理器，根据你自己的使用习惯选择即可。

 

　　因为之前有加载ESLint代码格式化组件，所以这里我们需要加载格式化和代码风格的规则，这里我选择的是Airbnb的规范，你可以自己选择其他的，当然你也可以编写出属于你自己的代码规范。

 

　　执行ESLint检查的时间节点，这里我全部勾选上。同时，如果你和我一样使用的是VSCode进行开发的话，你可以安装ESLint插件，这样在编写代码时，就会自动提示出不符合规范的代码。

 

　　加载的这些组件，需要一个配置文件进行配置，你可以选择全部放到package.json中，也可以选择将每个组件的配置单独放到一个配置文件中。这里我选择一个组件一个配置文件。

 

　　最后一步，是否保存这次的设置，如果保存的话，下次在创建项目时就可以直接使用了。

 

　　然后，慢慢等待项目依赖的组件加载完成，这一步的快慢，取决你的网速和人品，请坐和放宽。

 

　　当所有的依赖加载完成后，系统提示我们进入到项目路径，然后执行npmrunserve命令。

 

　　当我们执行npm命令后，可以看到项目已经运行起来了，我们可以打开浏览器进行查看，当出现下面的页面时，恭喜你，项目的基础模板已经搭建的差不多了。

 

　　项目的基础模板已经可以正常运行了，现在我们就可以将ElementUI添加到我们的项目中。饿了么为VueCLI3准备了相应的模板插件，所以这里我们就可以直接通过命令来加载Element插件到我们的项目中。

 

　　vueaddelement

 

　　因为整个项目会基于Element的组件进行搭建，所以这里我们直接选择全局引入；对于默认的样式，这里我们不做任何的修改，之后选择简体中文。当插件安装完成后，我们可以重新运行我们的项目进行查看。可以看到，页面上已经添加了一个ElementUI中的按钮组件。

 

　　当ElementUI安装完成后，饿了么官方也有针对VSCode的插件，所以这里我们也可以安装，从而更便捷在项目开发中使用到Element中的组件。

 

　　同时，作为一个完整的项目，我们需要与采用ASP.NETCoreWebAPI开发的后端进行数据交互，所以我们需要添加axios这个组件库，这里我们使用npm安装即可。至此，我们的项目的基础框架模板就已经创建完成了。

 

　　npminstallaxios

 

　　三、总结

 

　　这一章主要是学习如何通过VueCLI3和ElementUI去搭建一个基础的前端项目。在下一篇文章中，我将参考文章最后列出的参考文章和vue-admin-template这个模板对我们的项目进行调整，从而适应我们自己的开发习惯。

 

　　四、参考

 

　　1、从0到1搭建Element的后台框架

 

　　2、vue-cli3项目从搭建优化到docker部署

 

　　3、一张图教你快速玩转vue-cli3

 

　　4、手摸手，带你用vue撸后台系列四(vueAdmin一个极简的后台基础模板)