web-vue

web-vue

用途

此技能提供一系列工具，用于使用 Composition API 编写响应式逻辑、使用 Pinia 管理状态、使用 Vue Router 4 处理导航、使用单文件组件（SFC）进行模块化开发、使用 Vite 快速打包，以及使用 Nuxt 3 实现服务端渲染和 SEO 优化，从而构建现代 Vue 3 应用。

适用场景

创建带有响应式 UI 的交互式 Web 应用时，请使用此技能，例如仪表板、电商网站或单页应用（SPA）。当你需要高效管理状态、处理路由或使用 SSR 时，尤其是在需要通过 Vite 快速迭代的项目中，请使用此技能。

主要功能

• Composition API：在 SFC 中使用 setup() 创建响应式变量，例如使用 const count = ref(0); 创建响应式数字。
• Pinia：使用 defineStore('main', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } }) 定义全局状态存储。
• Vue Router 4：通过 createRouter({ history: createWebHistory(), routes: [{ path: '/', component: Home }] }) 设置路由。
• SFC：在 .vue 文件中使用 <script setup>、<template> 和 <style> 部分组织组件。
• Vite：使用 vite build --mode production 构建项目，生成经过优化的产物。
• Nuxt 3：使用 nuxi generate 为 Vue 应用启用 SSR 并生成静态站点。

使用模式

要创建响应式计数器组件，请从 Vue 导入 ref，并在 <script setup> 中使用：

<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template><button @click="increment">{{ count }}</button></template>

要配置路由，请创建路由实例并将其挂载：

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({ history: createWebHistory(), routes: [] });
app.use(router);

在 main.js 中设置 Pinia：app.use(createPinia());，并在组件中通过 useStore() 访问存储。

常用命令/API

• Vite CLI：运行 vite 启动开发服务，运行 vite build --base /app/ 指定基础路径，或运行 vite preview 进行本地测试。
• Nuxt 3 CLI：使用 nuxi dev 进行开发，使用 nuxi build 构建生产版本，或使用 nuxi generate 导出静态站点。
• Vue API：调用 ref(value) 创建响应式引用，调用 reactive(object) 创建代理对象，或调用 computed(() => expression) 创建派生状态。
• Pinia API：使用 defineStore('id', { state, getters, actions }) 定义存储，并通过 const store = useStore('id') 访问。
• Vue Router API：使用 router.push('/path') 进行导航，或使用 beforeEach((to, from, next) => { next(); }) 配置导航守卫。 如果需要 API 密钥（例如用于 Nuxt 中的外部服务），请在 .env 文件中通过 $NUXT_PUBLIC_API_KEY 之类的环境变量进行设置。

集成说明

在 Vue 应用中导入并使用 Pinia，即可将其集成到应用中：import { createPinia } from 'pinia'; app.use(createPinia());。对于 Vue Router，请在 Pinia 之后添加：import { createRouter } from 'vue-router'; app.use(router);。使用 Vite 时，请在 vite.config.js 中配置相关模块：

import { defineConfig } from 'vite';
export default defineConfig({
  plugins: [vue()],
  resolve: { alias: { '@': '/src' } },
});

对于 Nuxt 3，请在 nuxt.config.ts 中扩展 Nuxt 配置：

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
  router: { options: {} },
});

请通过 npm install vue@3 pinia vue-router@4 vite nuxt@3 安装依赖。

错误处理

通过检查 npm 日志并运行 npm install，处理依赖缺失等常见错误。对于 Composition API 中的响应式问题，请对 ref 使用 .value；例如，如果 count 未定义，请确保已在 setup 中定义。Vue Router 错误（例如路由重复）会显示在控制台中；请检查并修正路由数组。对于 Vite，如果构建因 "Module not found" 失败，请检查导入路径，或运行 vite build --debug 查看详情。对于 Nuxt，请在 serverMiddleware 中捕获 SSR 错误，或在 asyncData 中使用 try-catch：

async asyncData() {
  try { const data = await fetchData(); return { data }; }
  catch (error) { console.error(error); return { error: 'Fetch failed' }; }
}

具体使用示例

1. 构建包含计数器和路由的简单 Vue 3 应用：使用 npm create vite@latest my-app -- --template vue 创建新的 Vite 项目，通过 npm install pinia 添加 Pinia，设置一个 store，并在 router/index.js 中定义路由。然后，在 App.vue 中使用 store 和路由链接。
2. 开发支持 SSR 的 Nuxt 3 应用：从 npx nuxi init my-nuxt-app 开始，安装 npm install @pinia/nuxt 等依赖，在 stores/ 中创建 Pinia store，并在 pages/index.vue 中使用它。使用 nuxi build 构建生产版本，然后部署。

图谱关系

• 相关集群：web-dev
• 共享标签：vue、components、web
• 关联技能：其他 web-dev 技能，例如 React 相关技能或通用 Web 框架相关技能。