浅谈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项目

# 全局安装 vue - cli
npm install - g @vue / cli
vue create 项目名称

5、axios

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

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

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

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

vue全家桶学多久能上手项目,vue全家桶插件有哪些
VUE中文教程 . 火星的中文基础教程不知道你是初学还是已经入门了入门了就去verycd下.高级场景设计教程].W3D源我就不贴了搜一下就能有gnomon的教程都还算不错但是是英文你可以看操作加自己理 ...
Vue全家桶：Vuex
Vue全家桶之VueX(六)
Vue全家桶 + webpack 构建单页应用初体验
文章指南主题承接这上一篇Vue + Webpack 构建模块化开发框架详解,我们知道了如何使用webpack对vue进行打包,从而开始我们的前端模块化开发之路,这一篇在上一篇的基础上讲解 Vu ...
Vue全家桶之组件间的通信（四）
Vue全家桶之组件间的通信(四) 概述组件是Vue中最强大的功能,组件实例之间的数据无法直接相互引用,所以需要掌握组件间通信的方式和技巧. 组件实例之间的关系可以分为父子关系.兄弟关系和隔代关系.针 ...
使用Vue-cli从零开始搭建Vue全家桶(仿b站客户端)项目(1.环境配置、实现登录功能)
1.前言技术栈:Vue全家桶+Element.ui组件库+Axios 功能:具有登录.配置个人信息.修改个人头像.发布评论.发布动态等功能话不多说,先看成品动图,也可点击此链接进行 ...
Vue 全家桶 + Electron 开发的一个跨三端的应用
GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...
Vue 全家桶 + Electron 开发的一个跨三端的应用 1
代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
vue取div当前宽度_【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
[在线+源码]vue全家桶+Typescript开发一款习惯养成APP
vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. 源码地址欢迎star 项目演示地址建议直接添加到主屏幕(ios端体验差一些). ...

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

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

最新文章

热门文章