vue项目搭建

熊黎龙2025年12月7日大约 4 分钟约 1067 字

vue项目搭建

https://cn.vuejs.org/guide/scaling-up/tooling.html
使用命令行创建项目：pnpm create vue@latest

一个基本的vue项目包：

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --build && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.2",
    "vite": "^7.2.4",
    "vite-plugin-vue-devtools": "^8.0.5"
  }
}

vite: 新一代前端构建工具，提供极速的开发和构建体验，解决传统构建工具速度慢的问题
vue: Vue 3 核心框架，提供响应式系统和组件化开发能力
@vitejs/plugin-vue: （vite插件）让vite支持vue
vite-plugin-vue-devtools: (vite插件)让浏览器无需插件，即可调试vue应用

vue工具链

pnpm add vue-router@latest pinia@latest

{
  "dependencies": {
    "vue-router": "^4.6.3",
    "pinia": "^3.0.4",
  },

}

@vueuse/core: Vue Composition API 工具函数集合，提供大量常用响应式函数（useLocalStorage、useMouse 等），减少重复代码
vue-router: Vue 官方路由管理器，解决单页应用的页面导航和路由管理问题
pinia: Vue 3 官方状态管理库，提供简洁的 API 和 TypeScript 支持，替代 Vuex

VueUse工具库

vueuse中文官网1 vueuse中文官网2

{
  "dependencies": {
    "@vueuse/core": "^8.0.0",
  },

}

@vueuse/core: Vue Composition API 工具函数集合，提供大量常用响应式函数（useLocalStorage、useMouse 等），减少重复代码

vue自动功能

{
  "devDependencies": {
    "unplugin-auto-import": "catalog:build",
    "unplugin-vue-components": "catalog:build",
    "unplugin-vue-macros": "catalog:build",
    "unplugin-vue-router": "catalog:build",
  },
  "resolutions": {
    "unplugin": "catalog:build",
    "vite": "catalog:build"
  }
}

unplugin-vue-router: 基于文件系统的 Vue Router 插件，自动生成路由配置，无需手动维护路由表
unplugin-auto-import 自动导入 API，无需手动 import（如 ref、computed、onMounted 等）
unplugin-vue-components 按需自动导入组件，组件无需手动 import，按需加载
unplugin-vue-macros Vue 宏支持，在构建时处理 defineModel、defineOptions 等宏
unplugin 统一插件系统，为 Vite、Webpack、Rollup 等提供统一插件接口

typescript代码与提示

{
  "devDependencies": {
    "@types/node": "^24.10.1",
    "@vue-macros/volar": "catalog:dev",
  }
}

@types/node: Node.js API 的 TypeScript 类型定义包，提供一些类型定义和工具函数的模块。在代码中导入使用它。
@vue-macros/volar: 为Volar 插件（IDE 扩展）识别 Vue Macros 语法（如 defineModel、defineOptions），提供类型提示。在@vitejs/plugin-vue（vite插件）中配置使用。

typescript检查支持

vite原生支持typescript的编译，但是研发过程的typescript的类型安全检查需要其他工具支持。

{
  "scripts": {
    "type-check": "vue-tsc --build"
  },
  "devDependencies": {
    "typescript": "~5.9.0",
    "vue-tsc": "^3.1.5",
    "@tsconfig/node24": "^24.0.3",
    "@vue/tsconfig": "^0.8.1",
    "@vue-macros/volar": "catalog:dev",
  }
}

typescript: 明确typescript版本和typescript语言支持，其他包的对等依赖包。
vue-tsc: vue文件和ts文件的命令行TS类型安全检查工具，让TypeScript能看懂vue文件。
@vue/tsconfig: vue官方推荐的ts配置模板，“Vue 项目该怎么配 TS”这件事标准化。在jsconfig.json中使用它。
@tsconfig/node24: 针对node.js24的tsconfig配置模板，提供编译的配置。在tsconfig.json中使用它。

提示

peer对等依赖包是说需要手动安装的依赖包，比如说一个项目中大家都要用同一个版本的typescript，如果包自己安装会导致不同包使用typescript版本不一样。
typescript包是依赖typescript语言的其他包的对等依赖包，通过pnpm why typescript可查询。
pnpm v7+提供管理和自动安装对等依赖到.pnpm虚拟存储中，如果没有显式安装typescript包，也不会报错。

`jsx`支持

{
  "devDependencies": {
    "@vitejs/plugin-vue-jsx": "^5.1.2"
  }
}

@vitejs/plugin-vue-jsx: (vite插件)支持在vue文件中可以jsx语法。

代码质量

pnpm add -D oxlint@latest

{
  "scripts": {
    "lint": "oxlint . --fix -D correctness --ignore-path .gitignore"
  },
  "devDependencies": {
    "oxlint": "~1.29.0"
  }
}

oxlint: 替代eslint的代码审查工具，检查代码风格、逻辑错误、团队规范的问题

测试

Vitest

{
  "scripts": {
    "test:unit": "vitest"
  },
  "devDependencies": {
    "vitest": "^4.0.14",
    "@vue/test-utils": "^2.4.6",
    "jsdom": "^27.2.0"
  }
}

jsdom: 在node.js中模拟浏览器环境，也就是node.js中的无头浏览器。vitest的对等依赖包。
@vue/test-utils: 支持vue应用的测试工具。在具体的测试脚本中使用它。
vitest: 单元测试框架，用来运行一些测试，配合@vue/test-utils对vue组件的单元测试和集成测试。创建vitest.config.js，用于执行测试脚本。

Playwright 端到端测试框架

{
  "scripts": {
    "test:e2e": "playwright test"
  },
  "devDependencies": {
    "@playwright/test": "^1.57.0"
  }
}

下载测试浏览器：pnpm execplaywright install

@playwright/test: 端到端测试框架。创建playwright.config.js配置文件，运行命令使用它。