vue全家桶是指什么?有哪些东西?
Vue全家桶一般来说指的是脚手架vue-cli、路由vue-Router、状态管理模式vuex、Axios、elementUI等ui框架和打包工具webpack,下面我们分别介绍。
1. 项目构建工具:vue-cli
vue-cli也叫脚手架,官方定义为Vue.js开发的标准工具。Vue-cli是一个基于Vue.js进行快速开发的完整系统,可以自动生成Vue.js+webpack的项目模板。Vue cli提供了强大的功能,用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli 3.x版本可以通过vue create命令快速创建一个 新项目的脚手架,不需要像vue 2.x那样借助于webpack来构建项目。
相比scirpt标签引入,vue-cli脚手架具有一下特点:
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
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
以上是为大家介绍了“vue全家桶”,希望对大家有所帮助。如果你在学习打算学习Vue,推荐学习面《vue.js教程:vue2.0+vue3.0全套视频教程》
免费获取vue2.0+vue3.0全套视频教程+笔记+源码。
vue全家桶是指什么?有哪些东西?相关推荐
- Vue开发入门(二) | 说说Vue全家桶有哪些~
全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的Vue项目 前言: *Vue两大核心思想:组件化和数据驱动. 组件化:把整体拆分为各个可以复用的个体 数据驱动:通过数据变化直接影响bom展示, ...
- 【 Vue全家桶 · Vue CLI(四)】Vue项目的详细目录结构解析
文章目录 前言 -- 一级目录解析 一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...
- VUE全家桶 REACT jQuery
VUE VUE.js是一款JavaScript框架,Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. VUE只关注视图层,Vue 的目标是通过尽可能简单的 AP ...
- vue全家桶初步了解
vue全家桶初步了解 1.Vue-cli Vue-cli是vue官方出品的快速构建单页应用的脚手架,这里牵扯的东西很多,有webpack,npm,nodejs,babel等等. 1.1.安装vue-c ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用
GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...
- Vue全家桶 + webpack 构建单页应用初体验
文章指南 主题 承接这上一篇Vue + Webpack 构建模块化开发框架详解,我们知道了如何使用webpack对vue进行打包,从而开始我们的前端模块化开发之路,这一篇在上一篇的基础上讲解 Vu ...
- Vue全家桶仿网易优选商城APP源码
介绍: Vue全家桶仿优选商城APP源码,只写了前端,用到的技术栈是Vue全家桶.mintUI.axios,没有实现后端接口,全部是抓包至商城App接口. 实现了挺多的功能的,比如首页.商品列表.商品 ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用 1
代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- elemenetui 布局_2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)主页布局开发-Go语言中文社区...
1.引言 寒假是用来反超的!一起来学习Vue把,这篇博客是关于项目主页布局,请多指教~ 2.整体布局 3 .主页 3.1 实现基本的主页布局 3.2 美化主页的header区域 3.3 实现导航菜单的 ...
最新文章
- php多维数组打印出最长的数组,将php中的多维数组打印到html表中
- 计算机一级b考试理论知识,全国计算机等级考试一级b知识点
- Spring半注解半Xml
- 深入浅出的webpack4构建工具--webpack4+react构建环境(二十)
- php symbol table,gdb方式遍历EG(symbol_table) 哈希表的key_PHP教程
- 免費玩雲端運算,Amazon Web Service 雲端運算平台攻略 【1】
- mysql双机热备的配置步骤
- vSphere Web Client使用指南之安装配置
- vue3动态加载组件
- 基于pandas实现K折交叉验证数据集划分
- [面试经验]一汽大众旗下车联网公司摩斯智联面试记
- 打印机一直在打印不停止的问题
- 【全网详解】从0到1搭建双十一实时交易数据展示平台——Spark+Kafka构建实时分析系统
- 无线信道参数估计算法
- 染色质调控区域的研究:对CHIP-seq和ATAC-seq发展的深入思考
- intrins.h 简介
- 049--python--多人聊天室案例
- 面试官问我 “String 的不可变真的是因为 final 吗“,我回答 “是“ 然后就被挂了。。。。。。
- 2014一年开发技术资料收藏整理(一)
- Semantic UI 之 手风琴 accordion