Vue全家桶
Vue全家桶
2. 路由管理器:vue-Router
vue-router是Vue官方推出的路由管理器,主要用于管理URL,实现URL和组件的对应,以及通过URL进行组件之间的切换,从而使构建单页面应用变得更加简单。主要有以下特点:
1)嵌套的路由/视图表
2)模块化的、基于组件的路由配置
3)路由参数、查询、通配符
4)基于 Vue.js 过渡系统的视图过渡效果
5)细粒度的导航控制
6)带有自动激活的 CSS class 的链接
7)HTML5 历史模式或 hash 模式,在 IE9 中自动降级
8)自定义的滚动条行为
vue Router安装:
npm install vue-router
//安装后在mainjs引入
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3. 状态管理模式:vuex
在一些大型项目中,有时我们会遇到单页面中包含着大量的组件及复杂的数据结构,而且可能各组件还会互相影响各自的状态,在这种情况下组件树中的事件流会很快变得非常复杂,也使调试变得异常困难。为了解决这一问题,引入了Vuex这种状态管理模式,Vuex是状态管理模式的一种实现库,主要以插件的形式和Vue.js进行配合使用,能够使我们在Vue.js中管理复杂的组件事件流。
vuex安装方法:
npm install vuex --save
4. Axios
Axios是一个基于promise的HTTP库,简单的讲就是可以发送get、post请求。
Axios特性:
1)从浏览器中创建 XMLHttpRequests
2)从 node.js 创建 http 请求
3)支持 Promise API
4)拦截请求和响应
5)转换请求数据和响应数据
6)能够取消请求
7)自动转换 JSON 数据
8)客户端支持防御 XSRF
安装方法:
npm install axios
或者直接引入
<pre class="brush:html;toolbar:false;">npm install axios</pre>
5. UI框架:iview、vant、elementUI
iview 一套基于 Vue的高质量UI 组件库(分为小程序和pc端等不同版本);
vant 轻量、可靠的移动端 Vue 组件库,是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库,旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。
Ant Design Vue 是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。
elementUI 是基于 Vue 2.0 桌面端中后台组件库。
6. 打包工具:webpack
webpack是一个模块打包工具,可以把前端项目中的js、cs、scss/less、图片等文件都打包在一起,实现自动化构建,给前端开发人员带来了极大的便利。
安装方法:
npm install webpack -g