当前位置: 首页 > news >正文

vue周边库安装与开发者工具(vue系列二)

目录

  • 第一章、安装周边库
    • 1.1)状态管理:Pinia
    • 1.2)路由管理:Router
    • 1.3)HTTP 客户端:Axios
    • 1.4)UI 组件库:Element
  • 第二章、下载Vue插件并安装
    • 2.1)安装开发者工具
      • 2.1.1)浏览器Vue.js devtools下载插件
      • 2.1.2)安装插件
      • 2.1.3)验证是否安装成功

友情提醒:

先看目录,了解文章结构,点击目录可跳转到文章指定位置。

第一章、安装周边库

1.1)状态管理:Pinia

安装:Pinia (npm install pinia),流行的状态管理库,相比 Vuex 更轻量、更简单,API 设计更符合 Composition API 的风格

①执行以下命令

npm install pinia

②在 dependencies 字段中查找 pinia。
如果找到了 pinia 并且有版本号,说明 Pinia 已经成功安装。
在这里插入图片描述

1.2)路由管理:Router

安装:Vue Router (npm install vue-router)Vue 官方的路由管理器,用于构建单页面应用 (SPA),实现页面间的导航和跳转。
①执行以下命令

npm install vue-router

②验证方法同pinia相同

1.3)HTTP 客户端:Axios

安装:Axios (npm install axios)一个基于 Promise 的 HTTP 客户端,用于发送 HTTP 请求,与后端 API 进行交互。 功能强大,支持拦截器、取消请求等高级特性。
①执行以下命令

npm install axios

②验证方法同pinia相同

1.4)UI 组件库:Element

安装:Element Plus (npm install element-plus)一套基于 Vue 3 的 UI 组件库,提供丰富的 PC 端组件,风格统一、美观易用。
①执行以下命令

npm install element-plus

②验证是否安装成功
在这里插入图片描述

第二章、下载Vue插件并安装

2.1)安装开发者工具

2.1.1)浏览器Vue.js devtools下载插件

Chrome浏览器安装Vue.js devtools插件
1、浏览器访问极简插件

在这里插入图片描述

2、右上角搜索框搜索vue.js DevTools插件
在这里插入图片描述

3、在本地解压刚刚下载的插件,解压后如图:
在这里插入图片描述
4、打开谷歌浏览器–更多工具–拓展程序
注意:打开开发者模式
在这里插入图片描述

2.1.2)安装插件

将解压的文件拖入拓展程序页面安装
在这里插入图片描述

2.1.3)验证是否安装成功

安装后可以在谷歌商店看到已安装
在这里插入图片描述
访问vue网站时,点击F12,可进入调试界面
在这里插入图片描述

相关文章:

  • JavaScript 简单类型与复杂类型-复杂类型传参
  • Oracle 排除交集数据 MINUS
  • AOSP14 Launcher3——手势上滑关键类AbsSwipeHandler解析
  • NDT和ICP构建点云地图 |【点云建图、Ubuntu、ROS】
  • 【特权FPGA】之UART串口
  • ZYNQ笔记书签
  • 高等数学同步测试卷 同济7版 试卷部分 上 做题记录 第三章微分中值定理与导数的应用同步测试卷 A 卷
  • Blender安装基础使用教程
  • 仓储物流园区可视化平台,推动物流高效运转
  • Android 14 、15动态申请读写权限实现 (Java)
  • spark RDD相关概念和运行架构
  • 软件架构评估利器:质量效用树全解析
  • KWDB创作者计划—KWDB多副本集群保姆级部署
  • QT 老版本下载地址被禁 如何下载
  • YOLO检测目标后实现距离测量
  • 清华大学:VR交通场景下行人避让车辆行为研究
  • 2019年计算机真题
  • 数据集 | 沥青路面缺陷目标检测
  • C++语言程序设计——02 变量与数据类型
  • 构建灵活的接口抽象层:支持多种后端数据存取的实战指南
  • 东莞网站建设设/网站搜索优化公司
  • js检测网站是否能打开/乐天seo培训
  • 厦门网站定制/备案域名出售平台
  • 网站建设进度图/产品seo基础优化
  • wordpress适应式网站博客模板/网站查询系统
  • 哪建设网站好/怎样做推广营销