Vue基础-综合案例(基于vue2)

一、目标

  • 能够知道如何使用vue-cli创建vue项目
  • 能够知道如何在项目中安装与配置element-ui
  • 能够知道element-ui中常见组件的用法
  • 能够知道如何使用axios中的拦截器
  • 能够知道如何配置proxy接口代理

二、目录

  • vue-cli
  • 组件库
  • axios拦截器
  • proxy跨域代理
  • 用户列表案例

vue-cli

1.什么是vue-cli

vue-clivue脚手架)是vue官方提供的、快速生成vue工程化项目的工具。

特点:

①开箱即用

②基于webpack

③功能丰富且易于扩展

④支持创建vue2和vue3的项目

vue-cli的中文官网首页:https://cli.vuejs.org/zh/

安装:

2.安装vue-cli

vue-cli是基于Node.js开发出来的工具,因此需要使用npm将它安装为全局可用的工具: 

2.1解决Windows PowerShell不识别vue命令的问题

默认情况下,在PowerShell中执行vue --version命令会提示如下的错误消息:

如何解决查看版本号的时候报错:

 

 解决方案如下:

①以管理员身份运行PowerShell

②执行set-ExecutionPolicy RemoteSigned命令

③输入字符Y,回车即可

3.创建项目

vue-cli提供了创建项目的两种方式

4.基于vue ui创建vue项目

步骤1:在终端下运行vue ui命令,自动在浏览器中打开创建项目的可视化面板: 

步骤2:在详情页面填写项目名称

 步骤4:在功能页面勾选需要安装的功能(Choose Vue Version、Babel、CSS预处理器、使用配置文件

 步骤5:在配置页面勾选vue的版本需要的预处理器

 步骤6:将刚才所有的配置保存为预设(模板),方便下一次创建项目时直接复用之前的配置

 步骤7:创建项目并自动安装依赖包:

vue ui的本质:通过可视化的面板采集到用户的配置信息后,在后台基于命令行的方式自动初始化项目:

项目创建完成后,自动进入项目仪表盘: 

5.基于命令行创建vue项目 

步骤1:在终端下运行vue create demo2命令,基于交互式的命令行创建vue的项目:

 步骤2:选择要安装的功能:

 步骤3:使用上下箭头选择vue的版本,并使用回车键确认选择:

 步骤4:使用上下箭头选择要是用的css预处理器,并使用回车键确认选择:

 6.梳理vue2项目的基本结构

主要的文件:

src->App.vue

src->main.js 

8.在vue2的项目中使用路由

在vue2的项目中,只能安装并使用3.x版本的vue-router

版本3和版本4的路由最主要的区别:创建路由模块的方式不同

8.1回顾:4.x版本的路由如何创建路由模块

 8.2学习:3.x版本的路由如何创建路由模块

步骤1:在vue2的项目中安装3.x版本的路由:

 

 

 组件库

1.什么是vue组件库

在实际开发中,前端开发者可以把自己封装的.vue组件整理、打包、并发布为npm的包,从而供其他人下载和使用。这种可以直接下载并在项目中使用的现成组件,就叫做vue组件库

2.vue组件库bootstrap的区别

二者之间存在本质的区别:

  • bootstrap只提供了纯粹的原材料(css样式、HTML结构以及JS特效),需要由开发者做进一步的组装和改造
  • vue组件库是遵循vue语法、高度定制的现成组件,开箱即用。

3.最常用的vue组件库

PC端

  • Element UI(https://element.eleme.cn/#/zh-CN)
  • View UI(http://v1.iviewui.com/)
  • element plus

移动端

  • Mint UI(http://mint-ui.github.io/#!/zh-cn)
  • Vant(https://vant-contrib.gitee.io/vant/#/zh-CN/)

4.Element UI

Element UI是饿了么前端团队开源的一套PC端vue组件库。支持在vue2和vue3的项目中使用:

  • vue2的项目使用旧版的Element UI(https://element.eleme.cn/#/zh-CN)
  • vue3的项目使用新版的Element Plus(https://element-plus.gitee.io/#/zh-CN)

 4.1在vue2的项目中安装element-ui

 4.2 引入element-ui

 开发者可以一次性完整引入所有的element-ui组件,或是根据需求,只按需引入用到的element-ui组件:

  • 完整引入:操作简单,但是会额外引入一些用不到的组件,导致项目体积过大
  • 按需引入:操作相对复杂一些,但是只会引入用到的组件,能起到优化项目体积的目的

4.3 完整引入

 

 4.4按需引入

借助babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

步骤1:安装babel-plugin-component:

步骤2:修改根目录下的babel.config.js配置文件,新增plugins节点如下:

 步骤3:如果你只希望引入部分组件,比如Button,那么需要在main.js中写入以下内容:

 4.5把组件的导入和注册封装为独立的模块

 axios拦截器

1.回顾:在vue3的项目中全局配置axios

2.在vue2的项目中全局配置axios

3.什么是拦截器

拦截器会在每次发起ajax请求得到响应的时候自动被触发。

 应用场景:

①Token身份认证

②Loading效果

等等

4.配置请求拦截器

通过axios.interceptors.request.use(成功的回调,失败的回调)可以配置请求拦截器。示例代码如下:

 注意:失败的回调可以被省略

4.1请求拦截器-Token认证

 4.2请求拦截器-展示Loading效果

借助于element ui提供的Loading效果组件(https://element.eleme.cn/#/zh-CN/component/loading)可以方便的实现Loading效果的展示:

 5.配置响应拦截器

通过axios.interceptors.response.use(成功的回调,失败的回调)可以配置响应拦截器。示例代码如下:

注意:失败的回调函数可以被省略!

 5.1响应拦截器-关闭Loading效果

调用Loading实例提供的close()方法即可关闭Loading效果,示例代码如下:

 

 proxy跨域代理

1.回顾:接口的跨域问题

vue项目运行的地址:http://localhost:8080/

API接口运行的地址:http://www.escook.cn/api/users

 2.通过代理解决接口的跨域问题

通过vue-cli创建的项目在遇到接口跨域问题时,可以通过代理的方式来解决:

①把axios的请求根路径设置为vue项目的运行地址(接口请求不再跨域)

②vue项目发现请求的接口不存在,把请求转交给proxy代理

③代理把请求根路径替换为devServer.proxy属性的值,发起真正的数据请求

④代理把请求到的数据,转发给axios 

 

 注意:

devServer.proxy提供的代理功能,仅在开发调试阶段生效

②项目上线发布时,依旧需要API接口服务器开启CORS跨域资源共享

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

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

相关文章

利用mysqldump实现分库分表备份的shell脚本

一、信息摘要 linux版本:CentOS 7.9 mysql版本:MySQL 5.7.36 脚本实现功能:利用mysqldump工具实现对mysql中的数据库分库备份,和对所备份数据库中的表分表备份 二、shell脚本 #!/bin/bash ######################### #File n…

ARM和MIPS的区别

ARM和MIPS的区别主要有以下几方面: 指令集:ARM支持32位和64位指令,而MIPS同时支持32位和64位指令。除法器:MIPS有专门的除法器,可以执行除法指令,而ARM没有。寄存器:MIPS的内核寄存器比ARM多一…

gRPC-初识Protocol Buffers

简介 gRPC gRPC是一个高性能、开源和通用的 RPC 框架,面向移动和 HTTP/2 设计。gRPC 基于 HTTP/2 标准设计,带来双向流、流控、头部压缩、单 TCP 连接上的多复用请求等特性。这些特性使得其在移动设备上表现更好,更省电和节省空间占用。 特点…

[Linux]进程控制详解!!(创建、终止、等待、替换)

hello,大家好,这里是bang___bang_,在上两篇中我们讲解了进程的概念、状态和进程地址空间,本篇讲解进程的控制!!包含内容有进程创建、进程等待、进程替换、进程终止!! 附上前2篇文章…

使用Beego和MySQL实现帖子和评论的应用,并进行接口测试(附源码和代码深度剖析)

文章目录 小项目介绍源码分析main.gorouter.gomodels/user.gomodels/Post.gomodels/comment.gocontrollers/post.gocontrollers/comment.go 接口测试测试增加帖子测试查看帖子测试增加评论测试查看评论 小项目介绍 经过对需求的分析,我增加了一些额外的东西&#x…

Open3D (C++) ISS特征点提取

目录 一、算法原理1、原理概述2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。爬虫网站自重,把自己当个人 一、算法原理 1、原理概述 内部形状描述子(ISS)是一种表示立体几何形状的方法,该算法含有丰富的几何特征信息,可以完成高质量的点云配准。设…

禁用右键菜单AMD Software: Adrenalin Edition

本文参考链接: 删除win11右键一级菜单的AMD驱动栏 - 哔哩哔哩 windows11 求助删除右键菜单方法_windows11吧_百度贴吧 Windows安装最新的AMD显卡驱动后,右键菜单会多出AMD Software: Adrenalin Edition。使用一些右键菜单管理工具也没能屏蔽禁用掉该功…

Java8 两个List求差

一、需求背景 有两个List实体对象如下&#xff1a; List实体1 List<Long> exitList mapper.selectXXX();//从中间表中查出已经存在的用户id列表List实体2List<SysUser> userList mapper.selectXXX();//从系统用户表中查询符合条件是用户listSysUser的属性大致如…

2023年全网电视盒子无线ADB修改桌面(无需ROOT)

前言 1.主要是为了解决电视盒子等安卓设备无法卸载或者停用原始桌面导致无法选用第三方桌面。 解决方案 1.首先自行下载我提供的网盘APK 2.点击打开中国移动云盘 3.不管你是通过U盘还是局域网共享能够让你的电视安装第三方应用&#xff0c;毕竟每个品牌的安装方法不尽相同…

mybatis-config.xml-配置文件详解

文章目录 mybatis-config.xml-配置文件详解说明文档地址:配置文件属性解析properties 属性应用实例 settings 全局参数定义应用实例 typeAliases 别名处理器举例说明 typeHandlers 类型处理器environments 环境environment 属性应用实例 mappers配置 mybatis-config.xml-配置文…

C语言字符串的处理

用惯了Java C#这些语言&#xff0c;C语言中处理字符串还是有些不习惯的&#xff0c;所以这里写一下学习笔记。 C中字符串就是字符数组&#xff0c;是指向字符的指针&#xff0c;并且以空字符 \0 结尾&#xff0c;字符串作为函数的参数传递时一般使用指针类型&#xff0c;使用数…

运维高级--shell脚本完成分库分表

为什么要进行分库分表 随着系统的运行&#xff0c;存储的数据量会越来越大&#xff0c;系统的访问的压力也会随之增大&#xff0c;如果一个库中的表数据超过了一定的数量&#xff0c;比如说MySQL中的表数据达到千万级别&#xff0c;就需要考虑进行分库分表&#xff1b; 其…

解决kite在jupyter lab中显示not running问题

1、问题描述 在anaconda中启动jupyter lab前&#xff0c;安装了jupyterlab-kite。重启jupyter lab&#xff0c;不可以正常使用kite&#xff0c;显示not running。 尝试过重装jupyterlab、jupyterlab-kite等各种方式&#xff0c;但都不管用。经过多次试验与网上查找了诸多文献…

iOS-持久化

目的 1.快速展示&#xff0c;提升体验 已经加载过的数据&#xff0c;用户下次查看时&#xff0c;不需要再次从网络&#xff08;磁盘&#xff09;加载&#xff0c;直接展示给用户 2.节省用户流量&#xff08;节省服务器资源&#xff09; 对于较大的资源数据进行缓存&#xf…

c语言重定向stdout 到 /dev/null 及恢复

------------------------------------------------------------ author: hjjdebug date: 2023年 07月 27日 星期四 17:49:49 CST descriptor: c语言重定向stdout 到 /dev/null 及恢复 ------------------------------------------------------------ #include <stdio.h&g…

【Matlab】基于长短期记忆网络的数据回归预测(Excel可直接替换数据)

【Matlab】基于长短期记忆网络的数据回归预测(Excel可直接替换数据) 1.模型原理2.数学公式3.文件结构4.Excel数据5.分块代码6.完整代码7.运行结果1.模型原理 “基于长短期记忆网络(Long Short-Term Memory, LSTM)的数据回归预测”是一种利用LSTM神经网络进行数据回归预测的…

ClickHouse(六):Clickhouse数据类型-1

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,Kerberos安全认证,大数据OLAP体系技术栈-CSDN博客 &…

从电容到晶体管的基本介绍

​随着科技的不断进步&#xff0c;元器件在现代电子学中扮演着至关重要的角色。从电容器到晶体管&#xff0c;各种元器件都具有不同的特性和用途。本文将从基础知识出发&#xff0c;介绍电子学中常见的元器件&#xff0c;以及它们在电路中的作用和应用。 电容器 电容器是一种…

Docker复杂命令便捷操作

启动所有状态为Created的容器 要启动所有状态为"created"的Docker容器&#xff0c;可以使用以下命令&#xff1a; docker container start $(docker container ls -aq --filter "statuscreated")上述命令执行了以下步骤&#xff1a; docker container l…

深度学习论文: Q-YOLO: Efficient Inference for Real-time Object Detection及其PyTorch实现

深度学习论文: Q-YOLO: Efficient Inference for Real-time Object Detection及其PyTorch实现 Q-YOLO: Efficient Inference for Real-time Object Detection PDF: https://arxiv.org/pdf/2307.04816.pdf PyTorch代码: https://github.com/shanglianlm0525/CvPytorch PyTorch代…