vue全家桶都有什么

全家桶,顾名思义,对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。
注:此文章主要讲解vue-cli脚手架开发方式,主要介绍各插件安装方法及其功能特点,不介绍各插件的具体使用方式,具体使用方式详见其他详细介绍文章。

一、vue-cli

vue-cli也叫脚手架,官方定义为Vue.js 开发的标准工具!相比scirpt标签引入,脚手架具有如下特点:
1)、功能丰富
对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。
2)、易于扩展
它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。
3)、无需 Eject
Vue CLI 完全是可配置的,无需 eject。这样你的项目就可以长期保持更新了。
4)、CLI 之上的图形化界面
通过配套的图形化界面创建、开发和管理你的项目。
5)、即刻创建原型
用单个 Vue 文件即刻实践新的灵感。
6)、面向未来
为现代浏览器轻松产出原生的 ES2015 代码,或将你的 Vue 组件构建为原生的 Web Components 组件。

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli//安装完成后创建一个项目,vue ui为图形化构建,相对简单(推荐)
vue create my-project
# OR
vue ui

二、vueRouter

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

1)嵌套的路由/视图表
2)模块化的、基于组件的路由配置
3)路由参数、查询、通配符
4)基于 Vue.js 过渡系统的视图过渡效果
5)细粒度的导航控制
6)带有自动激活的 CSS class 的链接
7)HTML5 历史模式或 hash 模式,在 IE9 中自动降级
8)自定义的滚动条行为

vueRouter 安装

npm install vue-router
//安装后在mainjs引入
import VueRouter from 'vue-router'Vue.use(VueRouter)

三、vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

什么情况下我应该使用 Vuex?
Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

安装方法

npm install vuex --save

四、Axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性
1)从浏览器中创建 XMLHttpRequests
2)从 node.js 创建 http 请求
3)支持 Promise API
4)拦截请求和响应
5)转换请求数据和响应数据
6)取消请求
7)自动转换 JSON 数据
8)客户端支持防御 XSRF

安装方法

 npm install axios

五、搭配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 桌面端中后台组件库。

Vue全家桶有哪些?(详细)相关推荐

  1. Vue全家桶 Vuex的详细介绍

    文章目录 Vuex状态管理 认识状态管理 Vuex的基本使用

  2. 【 Vue全家桶 · Vue CLI(四)】Vue项目的详细目录结构解析

    文章目录 前言 -- 一级目录解析 一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...

  3. Vue全家桶+Mint-Ui打造高仿QQMusic,搭配详细说明

    Vue-QQMusic 简介: http://www.tuicool.com/articles/jQfEJzq 最近有点小闲置,于是乎希望写点东西,正好自己喜欢听歌,便决定自己写一个QQ音乐的简易版. ...

  4. vue全家桶+Echarts+百度地图,搭建数据可视化系统

    本文章篇幅略长,内容有点多 大佬可根据目录选择性查阅 新人可一步步来阅读 1 前言 1.1 业务场景 突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未 ...

  5. 网易云音乐接口+vue全家桶开发一款移动端音乐webApp

    网易云音乐接口+vue全家桶开发一款移动端音乐webApp 项目还在develop中,感兴趣想要参与的小伙伴可以私我 效果图: 骨架屏 首页 侧边栏 每日推荐 歌单 播放器(小) 播放器(大) 详细信 ...

  6. VUE全家桶 REACT jQuery

    VUE VUE.js是一款JavaScript框架,Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. VUE只关注视图层,Vue 的目标是通过尽可能简单的 AP ...

  7. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  8. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vu ...

  9. Vue 全家桶 + Electron 开发的一个跨三端的应用

    GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...

最新文章

  1. 山西计算机软考知识点,计算机软考考试必备知识点:数据标准化
  2. 使用Xshell密钥认证机制远程登录Linux
  3. 骁龙660_高通骁龙660可以带动6g运行内存吗?
  4. 工程师必备:C/C 单元测试万能插桩工具
  5. 注册终止处理函数atexit()
  6. Transaction marked as rollbackOnly异常处理 Duplicate entry 'xxx' for key
  7. 01-MySQL安装、配置和使用
  8. 中秋祝福网页制作_幼儿园中秋节活动方案(附环创)
  9. hibernate的各种保存方式的区别 (save,persist,update,saveOrUpdte,merge,flush,lock)等
  10. 马三步内可以到达的点
  11. vue-router仿天猫底部导航栏
  12. 魔兽争霸无法在这个计算机,魔兽争霸提示内存不足 无法执行此操作 然后自动退出游戏了 怎么处理?我内存8G 硬盘1T WIN7 32位系统...
  13. Web安全深度剖析第三章读书笔记
  14. office服务器草稿位置,精确定位图片在Word文档中的位置的操作方法
  15. July 16th 模拟赛C T3 圆周舞蹈 Solution
  16. 5G混战:改变世界不需要论资排辈
  17. 自动化测试和软件测试的区别,自动化测试和手动测试之间的区别
  18. Error evaluating ORM mappings block for domain
  19. 推荐3个生活工具类的小程序,非常实用哦!
  20. centos的wget无法解析域名

热门文章

  1. 使用Rose绘制用例图、类图、状态图等详细步骤说明
  2. 注意!白盒、SDN/NFV的“魔掌”正在向互联网交换中心(IXP)逼近
  3. 【老生谈算法】matlab实现K-means算法源码——K-means算法
  4. 终极单词index 排序 Q-R
  5. 分布式应用服务调用的方式
  6. 5e怎么绑定一键跳投_苹果cms怎么使用?
  7. java实现fPing
  8. 《分布式配置管理平台XXL-CONF》
  9. 【python】pycharm环境搭建及配置
  10. 一则“吹毛求疵”的广告,试图积极改变女性形象