【vue2】vue全家桶介绍,学习vue必备

news2025/7/9 14:15:39

1d43f75f092a4050a8ce31e2d85f6868.gif

🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:vue全家桶介绍,学习vue必备!!!

【前言】当你看到这一篇文章,恭喜你!你将会对vue的认识度有一个进一步的提高,本文将用简洁明了的大白话介绍vue全家桶是什么、怎么用。考虑到文章篇幅的限制,本文将适当的引入我之前介绍全家桶之一的博客同大家进行一个分享,我相信大家看完这些文章一定会有一个很大的收获!

好了,开始我们vue全家桶的认识!


目录

一、vue介绍

1.1 由来:

1.2 vue特性:

1.3 更多信息:

二、vue全家桶

2.1 vue-cli

2.2 vue-router

2.3 vuex

2.4 axios

2.5 UI组件库

期待大家的肯定支持!你的关注是我更新的最大动力——


一、vue介绍

1.1 由来:

引入vue作者尤雨溪的话:

        “Vue 一开始完全是一个个人兴趣项目。2013 年的时候我还在 Google Creative Lab,那时候前端框架还处于比较草莽的阶段,React 刚刚发布还没几个人知道,最成熟的是 AngularJS (Angular 1)。我当时一方面是想自己实现一个简单的框架练练手,另一方面是想尝试一下用 ES5 的 Object.defineProperty 实现数据变动侦测。众所周知 AngularJS 使用的是脏检查,而当时大部分的应用还需要支持 IE8,所以不能全面使用 ES5,而个人项目则不需要考虑这些。Vue 就是这样作为一个实验性质的项目开始的。"

发展历程:

        从最初的实验阶段(2013 年中到 2014 年 2 月),0.x 阶段 (2014 年 2 月到 2015 年 10 月),1.x 阶段 (2015 年 10 月到 2016 年 9 月),到现在的2.x 阶段 (2016 年 9 月至今),加上正式对外发布之前的时间,到今天已经有 足足5 年多的时间了。 0.x - 1.0 的改动主要集中在模版语法上,在 1.0 之后,模版语法就相对稳定,没有再经历过特别大的改动了。2.0 的改动则专注于内部的渲染机制变化,引入了 Virtual DOM,从而获得了服务端渲染、原生渲染、手写渲染函数等能力。目前 3.0 正在竭力的开发过程中,主要集中于利用 ES2015 的新特性、改进内部架构和性能优化上。

1.2 vue特性:

1.vue四大特点:

jsvaScript渐进式、易用、灵活、高效  官方文档:Vue.js

2.javaScript渐进式框架介绍:

  • a. Vue.js提供了很多的功能,但是这些功能并不是集成在一起的,而是分开的

    • 类似于Nodejs,拆分成很多个小模块

  • b. 在项目中我们用到什么,就导入什么

    • 这样可以保证我们用到的最少

  • c. 说人话:Vue相当于是一个五星级自助餐,我们想要用什么就拿什么,这样可以最大限度避免浪费资源

3.vue设计模式:

vue是MVVM设计模式的框架。

  • MVVM设计模式:一种软件架构模式,决定了写代码的方式。

    • M:model数据模型(ajax获取到的数据)

    • V:view视图(页面)

    • VM:ViewModel 视图模型(vue实例)

  • MVVM通过数据双向绑定让数据自动地双向同步 不在需要操作DOM

    • V(修改视图) -> M(数据自动同步)

    • M(修改数据) -> V(视图自动同步)

1. 在vue中,不推荐直接手动操作DOM!!!

2. 在vue中,通过数据驱动视图,不要在想着怎么操作DOM,而是想着如何操作数据!!

1.3 更多信息:

关于vue的学习指南请大家移步博主的vue专栏:vue专栏(从0开始,大家可以看看)

目前文章已书写了16篇文章,后面会持续更新喔!我有信心能够很好的帮助大家由0到1帮大家学习好相关知识点,系统的学习好vue,不再迷路!!!


二、vue全家桶

2.1 vue-cli

1.官方介绍:

Vue CLI 是一个用于快速 Vue.js 开发的完整系统,提供:

  • 交互式项目脚手架通过 .@vue/cli
  • 运行时依赖项 (),即:@vue/cli-service
    • 可升级;
    • 构建在 webpack 之上,具有合理的默认值;
    • 可通过项目内配置文件进行配置;
    • 可通过插件扩展
  • 丰富的官方插件集合,集成了前端生态系统中最好的工具。
  • 一个完整的图形用户界面,用于创建和管理 Vue.js 项目。

Vue CLI 旨在成为 Vue 生态系统的标准工具基线。它确保各种构建工具与合理的默认值一起顺利运行,因此您可以专注于编写应用程序,而不是花费数天时间争论配置。同时,它仍然提供了调整每个工具配置的灵活性,而无需弹出。

大白话:我们专注于框架中的业务与数据的处理即可,用cli会自动帮我们处理默认的配置与用Cli还可以通过插件可扩展我们的项目中功能

vue cli学习指南:【vue2】Vue Cli脚手架与VueTools的安装详解

2.2 vue-router

1.路由是什么?

URL 与 页面 之间的对应规则

路由中的页面:主要指vue的组件(在vue中 页面 和 盒子 都是 组件)

2.为什么要学习vue中的路由

vue是一个渐进式框架,一个网页由很多个页面组成,那我页面之间如何跳转呢?

在vue中,页面跳转主要由路由来实现

vue-router学习指南:【vue2】对路由的理解

2.3 vuex

1.vuex介绍

vuex的作用是解决多组件状态共享的问题,在大型的项目中,组件通讯会变得很混乱,使用vuex可以统一管理组件之间的通讯

它是独立于页面而单独存在的,所有的组件都可以把它当作一座桥梁来进行通讯。

2.使用vuex好处

  • 响应式:只要vuex中的数据变化,对应的组件会自动更新(类似于vue数据驱动)
  • 操作更简洁 : 类似于sessionStorage,只有几个方法

2.vuex使用场景

  • 1.不是所有的场景都适用于vuex,只有在必要的时候才使用vuex,能不用就不要用

    • 使用了vuex之后,会一定程度上增加了项目的复杂度

  • 2.适合使用vuex场景

    • 这个数据需要在多个地方使用,如果采用组件传值方式,写起来很麻烦,而且多个地方都要写

      • 例如:用户信息(姓名,头像),可能会在很多个地方使用(个人页面,评论页面等)

  • 3.不适合使用vuex场景

    • 这个数据需要在多个地方使用,如果某个数据仅仅只是在两个组件之间通讯,优先使用props或$emit

  • 4.vuex特点

    • 所有组件数据共享

    • 响应式: 一旦vuex数据修改,所有使用的地方都会自动更新

 vue-router学习指南:【vue2】vuex超超超级详解!(核心五大配置项)

2.4 axios

1.axios作用:

ajax是一种在javaScript代码中发请求并获取响应数据的技术,我们的axios是一个别人封装好的、用来发ajax请求的工具。那么我们发送请求与响应数据可以用来做什么呢?这样做有什么好处呢?可以实现——当我们不刷新页面的情况下,我们从服务器获取请求的数据,以局部更新我们定点的数据而不是我们整个页面的刷新。

2.常用的请求方法

post、get、put、patch、delete

 axios学习指南:AJAX专栏

2.5 UI组件库

这个也是突出了我们脚手架厉害的地方:可以使用我们插件进行拓展。

为什么用框架:缩减我们开发的时间与难度

1.下面是我们常见的UI框架

1.PC端组件库

  • ElementUI  官网地址:https://element.eleme.cn/#/zh-CN
  • Ant Design Vue  官网地址:https://www.antdv.com/docs/vue/introduce-cn/

2.移动端 UI 组件库

  • Vant  官网地址:https://youzan.github.io/vant/#/zh-CN/

  • Vuetify  官网地址:https://vuetifyjs.com/zh-Hans/


至此本文已结束,愿你学的开心!!!

——期待大家的肯定支持!你的关注是我更新的最大动力——

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406525.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue开发实例(11)之el-menu实现左侧菜单导航

作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢迎您关注&…

【Vue从入门到进阶】Node.js安装与配置

✅作者简介:CSDN一位小博主,正在学习前端,欢迎大家一起来交流学习🏆 📃个人主页:白月光777的CSDN博客 🔥系列专栏:Vue从入门到进阶 💬个人格言:但行好事&…

OpenAI 发布GPT-4——全网抢先体验

OpenAI 发布GPT-4 最近 OpenAI 犹如开挂一般,上周才刚刚推出GPT-3.5-Turbo API,今天凌晨再次祭出GPT-4这个目前最先进的多模态预训练大模型。与上一代GPT3.5相比,GPT-4最大的飞跃是增加了识图能力,并且回答准确性也得到显著提高。…

使用SpringBoot一小时快速搭建一个简单后台管理(后端篇)

不好意思让大家久等啦,最近也是因为学期末了,事情多了一点,所以更新的比较慢,请大家谅解下~ 好了话不多说,进入今天的教程环节 本次案例一共两篇文章教学: (第一篇):数据…

聊聊vue3的defineProps、defineEmits、defineExpose

最近在开发中用到了vue3的defineProps、defineEmits和defineExpose&#xff0c;感觉发现新大陆一般&#xff0c;所以利用闲碎时间对这三个方法做个总结。 defineProps const props defineProps<{foo: String,bar?: Number }>()defineProps 是vue3的写法并且是一个仅 …

Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器

本文首发&#xff1a;《Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器》 Video.js 是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一&#xff0c;也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染&#xff0c;在引入 Video.js 后&#xff0…

idea连接SQL Server数据库

数据库配置 1.安装数据库&#xff1a;自行安装 我的SQL Server版本为2019 2.登录数据库&#xff0c;登陆方式有两种&#xff0c;连接数据库选择SQLServer身份验证 1.windows登录&#xff0c;直接登录 2.SQLServer登录&#xff0c;需要输入用户名和密码&#xff0c;默…

【Vant Weapp】van-cell 单元格

目录 自定义内容​​​​​​​ 自定义右侧value&#xff08;姓名手机号&#xff09; 自定义右侧value&#xff08;文件预览&#xff09; 自定义下方label描述信息 真机border相当明显 修改样式&#xff08;下边框、文字&#xff09; 循环列表中的cell 自定义内容 自定义…

前端必学 - 大文件上传如何实现

前端必学 - 大文件上传如何实现写在前面问题分析开始操作一、文件如何切片二、得到原文件的hash值三、文件上传四、文件合并技术点总结【重要】一、上传文件&#xff1f;二、显示进度三、暂停上传四、Hash有优化空间吗&#xff1f;五、限制请求个数六、拥塞控制&#xff0c;动态…

Vue+element ui实现好看的个人中心

目录一、效果图二、项目结构三、界面效果和代码实现1.路由注册2.个人主页实现3.编辑弹窗按钮实现4.个人简介实现5.发贴页实现6.收藏页实现7.关注和收藏页实现四、总结一、效果图 仿照原神社区的个人中心写了个个人中心界面&#xff0c;下图分别为原神社区个人中心主页和我画的…

vue项目天地图使用

最近的项目中遇到了新的需求&#xff0c;需要在项目中使用天地图&#xff0c;因为第一次接触&#xff0c;官方的网站引用之类的也没有进行详细的介绍&#xff0c;自己去找的时候发现这部分的文章也比较少&#xff0c;有的问题也没有讲清楚&#xff0c;所以发布这篇文章分享总结…

关于将tomcat卸载干净

这学期我们开始学习Java Web技术&#xff0c;要求安装tomcat&#xff0c;我到官网上下载的时候不小心下载了最新的测试版&#xff0c;但是安装的eclipse无法配置最新班的tomcat&#xff0c;就开启了我的下载、卸载之旅&#x1f62d;&#x1f62d; 在此之前也有在网上找了很多相…

小程序怎么自定义导航栏,导航栏放图片、设置高度

今天来说一下小程序的自定义导航栏。 1、设置导航栏style为custom&#xff1a; 2、这是刷新页面&#xff0c;页面的内容就跑到了页面的顶端&#xff0c;不留丝毫间隙&#xff1a; 3、然后定义一个components&#xff0c;就是我们自定义的导航栏组件&#xff1a; &#xff…

Vue3 + Element Plus 按需引入 - 自动导入

文章目录1 前言1.1 目的1.2 最终效果2 准备工作3 按需引入3.1 安装插件3.2 修改 vite.config.ts 文件4 其他4.1 ElMessageBox 使用时报错4.1.1 Eslint 报错&#xff1a; ElMessageBox is not defined.eslint(no-undef)4.1.2 TS 报错&#xff1a; Cannot find name ElMessageBox…

html设置背景颜色以及背景图片

背景颜色 backgroud-color:transparent color transparent : 背景色透明 color : 指定背景颜色 直接设置标签的style属性&#xff08;行内样式&#xff09; 例&#xff1a;将这个段落的背景设为红色 用选择器进行设置&#xff08;内嵌样式、外链样式&#xff0…

做技术,最忌讳东张西望

又好长时间没更新&#xff0c;研二了&#xff0c;忙着做实验、写论文、发论文&#xff0c;再加上给我导做一些事情&#xff08;都习惯了&#xff0c;以前很不爽的事情&#xff0c;现在居然能这么平静的说出来&#xff09;。 但这不是我今天说的重点&#xff0c;而是另外一件事…

3 分钟掌握 Node.js 版本的区别

在我们日常开发中&#xff0c;Node.js 使用场景越来越多&#xff0c;大到服务端项目&#xff0c;小到开发工具脚本&#xff0c;所以掌握 Node.js 一些基础知识是非常有必要的。 今天主要聊一下 Node.js 中 LTS 和 Current 的区别和如何选择合适的版本。 一、版本介绍 在官网上…

vue使用jsMind(思维导图)

前言 jsMind 是一个显示/编辑思维导图的纯 javascript 类库&#xff0c;其基于 html5 的 canvas 进行设计。 我们使用它可能需要在网页上单纯的使用这种图样的效果&#xff0c;而其他交互却是自定义的&#xff0c;我这边选择的是jsMind 与 网上的一个jsmind.menu.js&#xff…

Node.js 全网最详细教程 (第一章:Node学习入门必看教程)

1&#xff1a;Node的学前必知&#xff1a; 1: 在学习node之前&#xff0c;想必你应该学习过HTML&#xff0c;CSS&#xff0c;JavaScript 2: 浏览器中的JavaScript由两部分组成&#xff1a;JS核心语法和WebAPI JS核心语法WebAPI变量&#xff0c;数据类型DOM操作循环&#xff0…

Nginx静态资源部署

目录 Nginx静态资源概述 Nginx静态资源的配置指令 listen指令 server_name指令 location指令 设置请求资源的目录root / alias index指令 error_page指令 静态资源优化配置语法 Nginx静态资源压缩实战 Gzip模块配置指令 Gzip压缩功能的实例配置 Gzip和sendfil…