在上一章中，我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板，就像我们 .NET 程序员在使用 asp.net core 时一样，我们更多的会在框架基础上按照自己的开发习惯进行调整。因此在后面几章的学习中，我将会在整个项目基础上，按照自己的需求进行修改设定。
PS：因为毕竟自己还是传统意义上的后端开发，所以这里最终搭建完成的前端项目模板，其实是按照 PanJiaChen 开源的 vue-admin-template 模板进行修改仿写，所以你可以把这个系列后续的文章当成是对于 vue-admin-template 模板的使用资料补充。
系列目录地址：Vue.js 牛刀小试
仓储地址：https://github.com/Lanesra712/ingos-web
在之前学习 Vue 基础知识点的文章中，我们还是采用传统的方式，通过在 html 页面上引用 vue.js 这个文件，从而将 Vue 引入到我们的项目开发中。伴随着 Node.js 的出现，以及 React、Angular、Vue 这类的前端 MVVM 框架的发展，前端越来越像后端靠拢，前端工程化的思想开始出现。现在的前端开发，已经不再只是一个 html 页面，上面引用各种 js、css 文件就可以完成开发的了。
与后端类似，前端开始出现各种已经很完善的框架模板、开始出现针对前端组件包的管理工具、各种各样的单元测试库，以及针对前端所特有的 js、css、image…这种静态资源文件的模块打包器。那么，从本篇文章开始，我们就从零开始，结合之前学习的 Vue 相关的基础知识，通过 Vue CLI 和 Element UI 去搭建一个基于 Vue 的 SPA 前端项目框架模板。
系列目录地址：Vue.js 牛刀小试
仓储地址：Chapter03-Silver Use Vue CLI To Build Vue Project
在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前，无法抛弃 Jquery 的重要理由，除了优秀的前端 DOM 元素操作性以外，能够非常便捷的发起 http 请求也占有非常重要的地位。
既然我们已经开始使用 Vue 进行前端开发，抛弃了对页面 DOM 元素的操作，难道，为了方便的发起 http 请求，还需要在项目中加载 jquery 或者是手动创建 http 请求吗？
答案当然是不用的，作为目前主流的前端框架，开发者、社区早已经为我们提供好了解决方案。随着 Vue 作者尤雨溪宣布不再维护 vue-resource，转而推荐大家使用 axios，目前在 Vue 社区中 axios 开始占据 http 库的主导地位，所以这一章我们就介绍下如何使用 axios 发起 http 请求。
系列目录地址：Vue.js 牛刀小试
仓储地址（前端）：Chapter02-Bronze Use Axios To Make HTTP Request
仓储地址（后端）：Chapter02-Bronze ASP.NET Core Sample API
在上一章的学习中，通过举例说明，我们了解了 Vue Router 中命名路由、命名视图的使用方法，以及如何通过 query 查询参数传参，或者是采用 param 传参的方式实现路由间的参数传递。通过学习我们可以发现，在实现路由间的参数传递时，我们将 Vue Router 与我们的组件强耦合在一起，这无疑是不合适的，那么本章我们就来学习，如何实现组件和 Vue Router 之间的解耦。
系列目录地址：Vue.js 牛刀小试
仓储地址：Chapter02-Bronze Decouple Component from Router
在上一章的学习中，我们简单介绍了前端路由的概念，以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由。但是在实际使用中，我们经常会遇到路由传参、或者一个页面是由多个组件组成的情况。本章，我们就来介绍下在这两种情况下 Vue Router 的使用方法以及一些可能涉及到的概念。
系列目录地址：Vue.js 牛刀小试
仓储地址：Chapter02-Bronze Routing Pass in Vue.js
前端路由是什么？如果你之前从事的是后端的工作，或者虽然有接触前端，但是并没有使用到单页面应用的话，这个概念对你来说还是会很陌生的。那么，为什么会在单页面应用中存在这么一个概念，以及，前端路由与我们后端的路由有什么异同呢。本章，我们就来简单介绍下前端路由的概念，以及如何在 Vue 中使用 Vue Router 来实现我们的前端路由。
系列目录地址：Vue.js 牛刀小试
仓储地址：Chapter02-Bronze Build Router in Vue.js
在之前的前端开发中，为了实现我们的需求，通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素，得益于 Jquery 对于 DOM 元素优异的操作能力，我们可以很轻易的对获取到的 DOM 元素进行操作。但是，当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后，对于 DOM 的操作我们就应当完全的交给框架，而我们只需要关注于数据。难道，在 Vue 中就不能手动获取到页面上的 DOM 元素了吗，答案当然是可以手动获取到 DOM 元素的，在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能，当然，这也只是 ref 其中一项的功能。本章，我们就来学习 Vue 中 ref 的相关使用。
系列目录地址：Vue.js 牛刀小试
仓储地址：Chapter02-Bronze Get Elements
在上一章的学习中，我们继续学习了 Vue 中组件的相关知识，了解了在 Vue 中如何使用组件的 data、prop 选项。在之前的学习中有提到过，组件是 Vue 中的一个非常重要的概念，我们通过将页面拆分成一个个独立的组件，从而更好地实现代码复用，使我们的代码更加简洁，容易维护。既然在 Vue 中我们会大量的使用到组件，必定会涉及到组件之间的通信，那么本章我们就来学习，如何实现组件间的数据交互。
系列目录地址：Vue.js 牛刀小试
仓储地址：Chapter02-Bronze Component’s Communication
在上一章的学习中，我们学习了 Vue 中组件的基础知识，知道了什么是组件，以及如何创建一个全局/局部组件。不知道你是否记得，在上一章中，我们提到组件是一个可以复用的 Vue 实例，它与 Vue 实例也只是拥有些许的差异。本章，我们将继续学习组件的相关基础知识，了解 Vue 的组件中的 data、prop 选项的使用。
系列目录地址：Vue.js 牛刀小试
仓储地址：Chapter02-Bronze Component Advance
在之前的学习中，我们对于 Vue 的一些基础语法进行了简单的了解，通过之前的代码可以清晰的看出，我们在使用 Vue 的整个过程，最终都是在对 Vue 实例进行的一系列操作。
这里就会引出一个问题，就像我们刚开始学习 C# 的时候把全部的代码一股脑的写到 Main 方法中，现在我们把所有对于 Vue 实例的操作全部写在一块，这必然会导致 这个方法又长又不好理解。
在 C# 的学习过程中，随着不断学习，我们开始将一些相似的业务逻辑进行封装，重用一些代码，从而达到简化的目的。那么，如何在 Vue 中如何实现相似的功能呢？这里就需要提到组件这一概念了，本章，我们就来学习 Vue 中组件的基础知识。
系列目录地址：Vue.js 牛刀小试
仓储地址：Chapter02-Bronze Component Concept
Update your browser to view this website correctly. Update my browser now