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

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

核心生态系统:

  • Vue Router - 官方路由管理器

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

    bash 复制代码
    npm install pinia
  • Vuex - 传统状态管理库

    bash 复制代码
    npm install vuex@next     # Vue 3
    npm install vuex          # Vue 2

UI组件库:

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

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

    bash 复制代码
    npm install ant-design-vue@next  # Vue 3
    npm install ant-design-vue       # Vue 2
  • Quasar - 全平台Vue框架

    bash 复制代码
    npm install -g @quasar/cli
    npm install quasar @quasar/extras
  • Vuetify - Material Design组件库

    bash 复制代码
    npm install vuetify@next         # Vue 3
    npm install vuetify              # Vue 2
  • Naive UI - 轻量级Vue 3组件库

    bash 复制代码
    npm install naive-ui

开发工具:

  • Vite - 快速构建工具

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

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

    bash 复制代码
    npx nuxi@latest init my-nuxt-app
    # 或者
    npm install nuxt@latest

实用库:

  • VueUse - 组合式API工具集

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

    bash 复制代码
    npm install vue-i18n@9          # Vue 3
    npm install vue-i18n@8          # Vue 2

HTTP请求:

  • Axios - HTTP客户端

    bash 复制代码
    npm install axios

工具库:

  • Lodash - 实用工具库

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

    bash 复制代码
    npm install dayjs
  • UUID - 唯一标识符生成

    bash 复制代码
    npm install uuid
    npm install @types/uuid          # TypeScript类型定义

VSCode扩展安装

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

bash 复制代码
# 使用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 # 中文包

常用开发依赖:

bash 复制代码
# 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  # 自动导入
相关推荐
卸任4 小时前
Vibe coding工具使用心得
前端·ai编程
brien94 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance5 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M5 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写5 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李5 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易5 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马5 小时前
前沿视界
前端
kyriewen5 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易5 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员