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  # 自动导入
相关推荐
Baklib梅梅15 小时前
员工手册:保障运营一致性与提升组织效率的核心载体
前端·ruby on rails·前端框架·ruby
涔溪16 小时前
实现将 Vue2 子应用通过无界(Wujie)微前端框架接入到 Vue3 主应用中(即 Vue3 主应用集成 Vue2 子应用)
vue.js·微前端·wujie
IT_陈寒16 小时前
Redis性能翻倍的5个冷门技巧,90%开发者都不知道第3个!
前端·人工智能·后端
T***u33316 小时前
前端框架在性能优化中的实践
javascript·vue.js·前端框架
jingling55517 小时前
vue | 在 Vue 3 项目中集成高德地图(AMap)
前端·javascript·vue.js
油丶酸萝卜别吃17 小时前
Vue3 中如何在 setup 语法糖下,通过 Layer 弹窗组件弹出自定义 Vue 组件?
前端·vue.js·arcgis
J***Q2921 天前
Vue数据可视化
前端·vue.js·信息可视化
JIngJaneIL1 天前
社区互助|社区交易|基于springboot+vue的社区互助交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·社区互助
ttod_qzstudio1 天前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
_大龄1 天前
前端解析excel
前端·excel