浅谈VUE全家桶（Vue、VueX、Vue-Router、axios、Vue-cli）的理解与认识

1、Vue

       veu是一个渐进式的 、专注于视图层的前端开发框架，通过数据驱动和组件化的方式实现了高效的前端开发 ，既可以通过文件引入的方式在普通页面中被引入使用，也可以基于webpack等构建系统 结合veu-router vuex进行前后端分离方式的项目开发，vue是当今企业当中使用比较多的开发框架 不仅是直接使用 vue还衍生出了很多基于vue封装后的框架。

2、 Vue-router

     Vue-router是一个路由组件，它适用于在vue中构建单页面应用。

     单一页面应用程序：只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。

     vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；

        Hash模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的数据

        History模式：

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

3、Vuex

        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。这意味着本来需要共享状态的更新是需要组件之间的通讯，而现在有了vuex，组件就都和store通讯了。Vuex常用于在大型项目中管理不同组件之间的状态。

        Vuex中的核心概念：State、Getter、Mutation、Action、Module。

state里面就是存放的我们上面所提到的状态

mutations就是存放如何更改状态

getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。

actions就是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。

modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。

4、Vue-cli

vue-cli是 vue 官方提供的、快速生成 vue 工程化项目的工具。

特点：可以快速创建Vue项目

1. # 全局安装 vue - cli

2. npm install - g @vue / cli

3. vue create 项目名称

5、axios

        axios是一个基于promise  的网络请求库，作用于node.js和浏览器中， 简单来说和jq的ajax是一个道理，不过比ajax更加完善。

安装axios在cmd中执行：npm install axios

然后还可以对axios进行二次封装，使它更符合我们项目的需求。