Vue开发常用库(含npm安装命令)

核心生态系统:

  • Vue Router - 官方路由管理器

    npm install vue-router@4  # Vue 3
    npm install vue-router@3  # Vue 2
    
  • Pinia - 新一代状态管理库

    npm install pinia
    
  • Vuex - 传统状态管理库

    npm install vuex@next     # Vue 3
    npm install vuex          # Vue 2
    

UI组件库:

  • Element Plus - Vue 3桌面端组件库

    npm install element-plus
    # 图标库
    npm install @element-plus/icons-vue
    
  • Ant Design Vue - Ant Design的Vue版本

    npm install ant-design-vue@next  # Vue 3
    npm install ant-design-vue       # Vue 2
    
  • Quasar - 全平台Vue框架

    npm install -g @quasar/cli
    npm install quasar @quasar/extras
    
  • Vuetify - Material Design组件库

    npm install vuetify@next         # Vue 3
    npm install vuetify              # Vue 2
    
  • Naive UI - 轻量级Vue 3组件库

    npm install naive-ui
    

开发工具:

  • Vite - 快速构建工具

    npm create vue@latest my-project  # 使用create-vue脚手架
    # 或者
    npm create vite@latest my-project -- --template vue
    
  • Vue CLI - Vue脚手架工具

    npm install -g @vue/cli
    vue create my-project
    
  • Nuxt.js - 服务端渲染框架

    npx nuxi@latest init my-nuxt-app
    # 或者
    npm install nuxt@latest
    

实用库:

  • VueUse - 组合式API工具集

    npm install @vueuse/core
    npm install @vueuse/components  # 可选组件
    
  • Vue-i18n - 国际化解决方案

    npm install vue-i18n@9          # Vue 3
    npm install vue-i18n@8          # Vue 2
    

HTTP请求:

  • Axios - HTTP客户端
    npm install axios
    

工具库:

  • Lodash - 实用工具库

    npm install lodash
    npm install @types/lodash        # TypeScript类型定义
    
  • Day.js - 轻量级日期处理

    npm install dayjs
    
  • UUID - 唯一标识符生成

    npm install uuid
    npm install @types/uuid          # TypeScript类型定义
    

VSCode扩展安装

VSCode扩展通过扩展商店安装,以下是扩展ID(可用于命令行安装):

# 使用code命令安装扩展
code --install-extension Vue.volar                    # Vue 3官方扩展
code --install-extension octref.vetur                 # Vue 2扩展
code --install-extension hollowtree.vue-snippets      # Vue代码片段
code --install-extension formulahendry.auto-rename-tag # 自动重命名标签
code --install-extension esbenp.prettier-vscode       # Prettier格式化
code --install-extension dbaeumer.vscode-eslint       # ESLint
code --install-extension bradlc.vscode-tailwindcss    # Tailwind CSS
code --install-extension ms-ceintl.vscode-language-pack-zh-hans # 中文包

常用开发依赖:

# TypeScript支持
npm install -D typescript @vue/tsconfig# 代码规范
npm install -D eslint prettier @vue/eslint-config-prettier# 构建工具插件
npm install -D @vitejs/plugin-vue  # Vite Vue插件
npm install -D unplugin-auto-import unplugin-vue-components  # 自动导入

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

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

相关文章

[硬件电路-39]:激光光路的光信号处理、模拟电路的电信号处理、数字电路的电信号处理、软件的信号处理,有哪些共通的操作、运算、变换?

激光光路、模拟电路、数字电路及软件中的信号处理在操作、运算和变换层面存在显著共性,这些共性体现了信号处理的核心逻辑在不同技术领域的通用性。以下是具体分析: 目录 一、共通操作:信号处理的基础动作 1、放大与衰减 2、滤波 3、调制…

Grails(Groovy)框架抛出NoHandlerFoundException而不是返回404 Not Found

本文记录在基于Spring(Boot)框架(使用Java语言)和Grails框架(使用Groovy语言)下,开发Controller接口,对不存在的URL请求,接口返回404 not found,而不是抛出NoHandlerFoundException异…

muduo中事件循环线程池的理解

事件循环线程池的理解前置知识reactor模型thread::start()方法的理解创建线程池子线程被唤醒的几种情况子线程被主线程唤醒新连接到来有消息需要发送时(多reactor情况时)关闭连接时子线程被唤醒执行任务在 上一篇中,我们讨论了关于简单的线程…

AI智能体“上下文工程”实践:来自 Manus 项目的经验总结

转载:https://manus.im/blog/Context-Engineering-for-AI-Agents-Lessons-from-Building-Manus 在启动 Manus (manus.im/app) 项目之初,我的团队面临一个关键抉择:究竟是基于开源基础模型训练一个端到端的智能体模型,还是在前沿大…

day19 链表

定义链式存储的线性表头文件相关定义 typedef int datatype;//定义数据域类型 typedef struct Node {union{int len; //头结点数据域datatype data; //普通节点数据域};struct Node *next; //节点指针域 }Node,*Node_ptr;链表的函数 注意事项 1.创建节点时,需要初…

【第三节】Class与Style绑定

文章目录Class与Style绑定绑定HTML Class对象语法数组语法绑定内联样式对象语法数组语法自动添加前缀Class与Style绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式,因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符…

CMOS知识点 离子注入工艺

知识点8:离子注入是为了将掺杂剂(如硼、磷等)精确引入硅晶片的近表面区域,以改变其电学性质。工艺过程:电离与加速:掺杂剂原子在离子源中被电离(带电),通过高压电场&…

从安装到上手:Ubuntu 22.04 玩转 Containerd 2.1.3 容器运行时

Containerd 是一款支持 OCI 规范的容器运行时,注重容器部署和生命周期管理的简单性、健壮性与可移植性,常被嵌入到 Docker 和 Kubernetes 等系统中。本文将详细介绍在 Ubuntu 22.04 服务器上通过二进制包手动安装 Containerd 的完整步骤,包括…

Hadoop与云原生集成:弹性扩缩容与OSS存储分离架构深度解析

Hadoop与云原生集成的必要性Hadoop在大数据领域的基石地位作为大数据处理领域的奠基性技术,Hadoop自2006年诞生以来已形成包含HDFS、YARN、MapReduce三大核心组件的完整生态体系。根据CSDN技术社区的分析报告,全球超过75%的《财富》500强企业仍在使用Had…

飞算科技:以创新科技引领数字化变革,旗下飞算 JavaAI 成开发利器

作为国家级高新技术企业,飞算科技专注于自主创新,在数字科技领域持续深耕,用前沿技术为各行业客户赋能,助力其实现数字化转型升级的飞跃。​飞算科技凭借深厚的技术积累,将互联网科技、大数据、人工智能等技术与实际应…

多线程Python爬虫:加速大规模学术文献采集

1. 引言 在学术研究过程中,高效获取大量文献数据是许多科研工作者和数据分析师的需求。然而,传统的单线程爬虫在面对大规模数据采集时,往往效率低下,难以满足快速获取数据的要求。因此,利用多线程技术优化Python爬虫&a…

NX717NX720美光固态闪存NX724NX728

美光NX系列固态闪存深度解析:技术、性能与市场洞察一、技术架构与核心创新美光NX系列固态闪存(包括NX717、NX720、NX724、NX728)的技术根基源于其先进的G9 NAND架构。该架构通过5纳米制程工艺和多层3D堆叠技术,实现了存储单元密度…

浅谈——C++和C#差异

虽然这个话题看着似乎有些关公战秦琼的味道,但是作为游戏开发者,C和C#一定是绕不开的两门语言。不过虽然说是比较二者差异,因为我学习的过程主要是先学C,所以我先基于C的认知,再来聊聊C#之中的不同。(为什么…

rocky9-zabbix简单部署

目录 一、准备 1、(rocky9) 2、配置数据库 二、配置文件 1、导入初始架构与数据 2、配置相关文件 三、启动服务 1、浏览器访问 2、解决乱码问题 ​编辑 四、监控 ① 添加主机 1、修改配置文件 2、启动服务 3、网页添加 ②添加监控模块 1…

tabBar设置底部菜单选项、iconfont图标(图片)库、模拟京东app的底部导航栏

欢迎来到我的UniApp技术专栏!🎉 在这里,我将与大家分享关于UniApp开发的实用技巧、最佳实践和项目经验。 专栏特色: 📱 跨平台开发一站式解决方案 🚀 从入门到精通的完整学习路径 💡 实战项目经…

7.22总结mstp,vrrp

一、MSTP技术MSTI和MSTI域根MSTP中的端口角色3. MSTP工作原理 MSTP 计算方法• CST/IST的计算和RSTP类似 • MSTI的计算仅限于区域内 • MSTI计算参数包含在IST BPDU中,和IST的计 算同步完成&#xfe…

【电脑】网卡的基础知识

网卡(Network Interface Card, NIC)是计算机中用于连接网络的关键组件之一,它负责管理和发送数据包到互联网或其他局域网设备。下面是一些关于网卡的详细知识:网卡的基本结构MAC地址:每个网卡都有一个唯一的物理地址&a…

IPv4枯竭时代:从NAT技术到IPv6的演进之路

🔍 开发者资源导航 🔍🏷️ 博客主页: 个人主页📚 专栏订阅: JavaEE全栈专栏 IPv4(Internet Protocol version 4)是互联网最核心的通信协议之一,自 1981 年正式标准化以来…

模式结构-微服务架构设计模式

需求(Forces)结果上下文(Resulting context)相关模式(Related patterns)需求:必须解决的问题需求部分描述了必须解决的问题和围绕这个问题的特定上下文环境。需求有时候是相互冲突的,所以不能指望把他们全部都解决(必须取舍&#…

30个常用的Linux命令汇总和实战场景示例

下面汇总常用的 30 个常用的 Linux 命令,每个都附有简要说明和典型示例,适合日常开发、服务器维护或系统学习使用。30 个常用的 Linux 命令汇总 一、文件与目录操作(基础)命令说明示例ls列出文件和目录ls -l 显示详细信息cd切换目…