vue课程大纲

vuejs

开场白

大家好，欢迎来到妙味课堂。
这次我们带来了一套全新的Vue进阶课程。q

推出这套课程是因为vue的关注度越来越高,许多公司都在使用vue开发项目，想深入学习Vue的同学也越来越多，但是我们之前关于vue的课程并没有那么深入，所以这一次准备了一套Vue的进阶课程，来满足实际的开发需求。

p我们本套课程 更偏向于实战， ****主要会包含这4块内容

课程内容：
1. vue-cli 脚手架
2. vue-router 管理视图
3. vueX 状态管理
4. asios 数据请求

那接下来分别了解一下每一块都涉及到了那些内容

q首先是vue-cli脚手架,****它会帮我们生成项目的目录，我们首先会安装它，之后我们会详细介绍它生成的目录结构，通过了解之后去理解一个项目搭建的思想。
vue-cli脚手架就是基于webpack做构建的，可以通过webpack把我们的代码编译和打包，生成浏览器可运行的代码。会介绍在这个工具中webpack是如何配置的。

**接着是vue-router，**它会帮助我们管理应用的视图。我们会详细介绍它的安装配置，路由嵌套、视图切换的动效和按需加载方面的知识。我们会体会到它是如何更方便的帮助我们构建单页应用的。

**接着是Vuex，**他会管理整个应用的状态。 组件的嵌套可能非常复杂，在这些组件中传递数据会非常棘手。除此之外 多个视图也很有可能共享或者变更同一份状态。维护这类代码的时候会非常困难， 在后面的课程中，我们会使用Vuex来解决这些问题的。会从它的核心概念讲起，分析它使用的应用场景和使用它提供的API。

**最后是asios模块，使用这个模块来帮助我们处理数据请求。 **我们会讲解它API的使用，还会教大家使用它来拦截请求和响应，最后还会介绍他的Promise特性。

****那我们的这套课程主要会分这为4个部分。

**通过这套课程你至少能学习到**两个方面的内容
通过本次课程你能够学到什么东西，能学到什么：
1. 开发工具

首先是vue开发过程中涉及到的周边工具,之后你能快速使用这些工具搭建自己的项目结构，并配合webpack来打包我们的文件。

1. 开发流程

   接着你会在vue的基础之上，搭配使用vue的模块，可以把这些模块应用到你实际项目的开发流程中。

****在学习这套课程之前， 你可能需要一些前置知识

首先你需要了解ES6的基础语法，因为我们之后的代码都是基于es6的语法来写的。我们的项目要跑在nodejs的运行环境中，所以你要轻度使用过nodejs。还需要你会使用npm来安装模块。

希望本套课程能够对你有所帮助。

前置知识

es6的语法有些了解，nodejs npm

我们先来了解一下这次课程包含的内容：

我们在做项目的过程中，要创建项目的目录结构，每次手动创建会很麻烦很繁琐，Vue提供了脚手架工具Vue-cli，一个命令就帮助我们快速的生成项目结构。我会对这个脚手架的安装，生成的目录做详细的介绍。

webpack是非常流行的构建工具，可以把我们的代码通过编译和打包，生成浏览器可运行的代码，vue-cli脚手架就是基于webpack做构建的，会详细介绍它是如何配置的，以及如何编译和构建的。

现在做的页面是通过ajax请求对数据进行持久化，这样做保证前端用户体验，在不重新刷新整个页面的情况下，只需要改变DOM中要更新的那部分数据和内容。特别是移动端应用场景，刷新页面后会重新加载很多资源，虽然有些资源会被缓存，但是页面中的DOM，css和js都会被浏览器重新解析一遍，因此有些页面通常会做成SPA单页应用。

那就需要利用vue-router来做路由的管理，帮助我们对应不同的视图，并且可以在切换视图的时候可以有过渡的特效。还有很惊艳的亮点就是所需要的视图不是一次性全部加载，是按需加载对应的视图。我会详细的讲解vue-router的配置和使用，并且会配上运用到这些知识点的例子。

我们在写组件通信的时候，往往使用自定义事件的方式进行通信。但是当组件嵌套的比较深，这样触发自定义事件会向上传递很多层，不利于代码的书写和维护。还有多个组件共享一套数据，这些组件在传递数据或改变数据的时候，如果不对这些数据做好管理，那么在组件交互中改变了数据，会变的难以维护。这时候就需要有一个工具专门的帮助我们管理这些数据。那就需要用到Vuex，它会帮助我们把所有的数据放在一个容器中，然后根据一些规则进行管理。我会讲解Vuex的设计理念，以及核心的组成部分，并配上例子让大家更好的理解vuex这种工作模式。

Vue这个框架本身是不提供ajax通信功能的，官方推荐使用第三方的模块axios来做这件事情。axios提供了很多的功能，其中包括，支持在浏览器和node上使用，基于Promise语法标准、自动转换JSON数据。我会事先准备写好的后端，通过真实的数据传输过程来讲解axios的使用。

学习目标

本次课程是对vue在项目开发中必备的周边工具做进一步的学习，已达到在项目开发中对每个环节核心功能的理解和使用，这样才能支撑基于Vue的项目开发。

在整个项目，分为
第一阶段：Vue技术栈的介绍

    纯属于介绍技术工具，并会在讲解过程中配上符合技术点的案例

第二阶段：项目实战开发
    仿"闲鱼APP"项目，这一部分包含大量的组件，在短时间内开发需要用到第三方提供的组件

    刚上手，对第三方的组件库不是很熟悉，还没踩够坑，也是时间仓促，并没有实现出来完整的项目，无法进行展示。

第二阶段是在第一阶段的基础上进行的实战运用，也就说必须学完第一阶段才能进行实战开发，
所以目前想采用的方式是这样的：

    前期只讲解第一阶段的内容，在课程的介绍中，着重强调技术栈这一部分的讲解，而实战项目会捎带提一下说学完这些技术栈后紧接着会有实战项目。

第一阶段的内容也不少，总共要介绍4个技术工具。其中的vue-router的配置和vuex 数据状态管理使用，目前好多人都在期待这块内容。也需要精心的准备才能讲好。

接下来的计划：
    1. 课前介绍 这周五录制完成
    2. 技术栈 三周时间录制完成