[Vue 牛刀小试]：第十六章 - 针对传统后端开发人员的前端项目框架搭建

 1、前言

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

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

　　系列目录地址：http://www.javashuo.com/article/p-bzzucmub-ba.html

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

 2、干货合集

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

　　 Element UI 则是饿了么基于 Vue.js 所作的一套前端组件库，你能够把它理解成相似于 Boostrap 或是 EasyUI 这种前端的 UI 库基于 Vue 中组件的思想所实现的前端库。经过使用这套组件库，咱们就能够更好地统一整个项目的前端样式以及更加方便的进行开发。固然，你也能够采用别的组件库或是本身手写一套。

　　一、安装

　　在使用 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 版本信息

　　二、初始化项目

　　当咱们安装完成后，咱们就能够经过命令行去建立一个前端项目模板。首先，进入你须要建立项目的路径下，打开终端，而后使用下面的命令来建立咱们的项目。由于某些缘由，链接 npm 源的速度可能会比较慢，因此在建立项目时，Vue CLI 会提示咱们是否将淘宝的镜像源添加 npm 中，从而加快咱们访问的速度，你能够自由选择。

# vue create 项目名称
vue create grapefruit.ui

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

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

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

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

　　PWA：渐进式的 Web 应用，主要是利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验，让用户觉得本身正在使用的是原生应用，微信的小程序其实就能够当作是一种 PWA 应用的载体。

　　Router：这个你们应该很熟悉了，在前面的文章中咱们也有介绍过，是 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

 3、总结

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

 4、参考

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

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

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

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