金键盘 - 发达了收购楼下包子铺用金键盘继续编程

菜单

金键盘
发布于 2025-09-20 / 7 阅读
0

Vue 与 Nuxt 入门一周实践路径（含步骤与练习）

Vue(Nuxt.js）比React(Next.js)优势的地方就是干活快，为什么干活快，主要是React很严谨，多了一个组件反复重入的过程，哪些use脑瓜疼。Vue更加接近所想所得，修改数据就直接更新UI了，无需多考虑React重入和重入带来的钩子负担。

Vue 与 Nuxt 入门一周实践路径（含步骤与练习）

下面是一套从 0 到能做业务页面的入门流程，按天/阶段拆分，配好任务与资料链接建议。你可以按自己节奏推进，重点是动手实现每个小练习。

目标概览

  • 第 1-2 天：掌握 Vue 3 基础（SFC、模板、响应式、组件通信）
  • 第 3 天：掌握常用 UI 库（Element Plus 或 Naive UI）
  • 第 4-5 天：上手 Nuxt 3（文件路由、数据获取、SSR/静态化）
  • 第 6 天：做一个中后台小页面（列表 + 筛选 + 分页 + 弹窗表单）
  • 第 7 天：部署上线与性能/SEO 基础

你可以选择一个 UI 库贯穿练习。如果你追求“业务效率”，建议 Element Plus；想要现代 API/主题化，建议 Naive UI。

第 0 天：环境准备

  • 安装 Node.js（推荐 LTS）
  • 创建项目脚手架
    • Vue 基础项目：
      • 使用 Vite: npm create vite@latest my-vue-app -- --template vue-ts
    • Nuxt 项目：
      • npx nuxi init my-nuxt-app && cd my-nuxt-app && pnpm i（或 npm/yarn）
  • 编辑器：VS Code + 插件
    • Volar（Vue TS 支持）、ESLint、Prettier、Icon 插件

第 1 天：Vue 3 核心（SFC/模板/响应式）

  • 学习点
    • 单文件组件 SFC：<template> <script setup> <style>
    • 模板与指令：v-if / v-for / v-model / :class / @click
    • 响应式：ref / reactive / computed / watch
    • 组件通信：props / emits / v-model 组件版
  • 练习任务
    • 做一个“待办清单”：
      • 输入框新增待办（v-model）
      • 列表渲染（v-for）
      • 勾选完成/删除
      • 统计未完成数量（computed）
  • 关键示例
    <template>
  <h1>Todo</h1>
  <input v-model="text" @keyup.enter="add" placeholder="添加待办" />
  <ul>
    <li v-for="item in todos" :key="item.id">
      <label>
        <input type="checkbox" v-model="item.done" />
        <span :class="{ done: item.done }">{{ item.title }}</span>
      </label>
      <button @click="remove(item.id)">删除</button>
    </li>
  </ul>
  <p>未完成：{{ leftCount }}</p>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
type Todo = { id: number; title: string; done: boolean }
const text = ref('')
const todos = ref<Todo[]>([])
const add = () => {
  if (!text.value.trim()) return
  todos.value.push({ id: Date.now(), title: text.value.trim(), done: false })
  text.value = ''
}
const remove = (id: number) => {
  todos.value = todos.value.filter(t => t.id !== id)
}
const leftCount = computed(() => todos.value.filter(t => !t.done).length)
</script>

<style scoped>
.done { text-decoration: line-through; color: #888; }
</style>

第 2 天：组件化与状态管理（Pinia）

  • 学习点
    • 组件拆分与插槽：<slot>/v-slot
    • 组合式 API 复用：提取 useXxx composable
    • 全局状态管理：Pinia（推荐）
  • 练习任务
    • 将“待办清单”拆成：输入组件、列表组件、统计组件
    • 使用 Pinia 存储 todos，并在多个组件共享
  • 关键步骤
    • 安装 Pinia：npm i pinia
    • 创建 store
      // stores/todo.ts
import { defineStore } from 'pinia'
export const useTodoStore = defineStore('todo', {
  state: () => ({ list: [] as { id: number; title: string; done: boolean }[] }),
  getters: {
    leftCount: s => s.list.filter(i => !i.done).length,
  },
  actions: {
    add(title: string) { this.list.push({ id: Date.now(), title, done: false }) },
    remove(id: number) { this.list = this.list.filter(i => i.id !== id) },
  },
})

第 3 天：选择并掌握一个 UI 库

  • 选择其一：
    • Element Plus：npm i element-plus（适合快速业务）
    • Naive UI：npm i naive-ui（现代 API/主题化）
  • 学习点
    • 表单组件、校验（Form + rules）
    • 表格（分页、选择、多选、固定列）
    • Dialog/Drawer、Message/Notification
  • 练习任务
    • 实现“用户管理”UI 草图（假数据）：
      • 搜索区（输入框 + 选择器 + 查询/重置）
      • 表格（姓名/角色/状态/操作列）
      • 分页
      • “新增/编辑”弹窗表单（校验 + 提交）
  • 小提示
    • Element Plus 表单校验基于 async-validator；Naive UI 有更现代的插槽/校验体验。
    • 列表性能：数据量大时，使用虚拟滚动表格或分页获取。

第 4 天：Nuxt 3 入门（文件路由与数据获取）

  • 学习点

    • 文件路由：pages/ 自动生成路由，动态路由 [id].vue
    • 页面布局：layouts/default.vue
    • 数据获取：useFetch（服务端/客户端）、useAsyncData
    • 运行模式：SSR/SSG/CSR 切换理解

  • 练习任务

    • 新建 Nuxt 项目，做一个“文章列表 + 详情”：
      • pages/index.vue：获取文章列表
      • pages/posts/[id].vue：详情页
      • 顶部导航放在 layouts/default.vue

  • 示例

    <!-- pages/index.vue -->
<template>
  <h1>Posts</h1>
  <ul>
    <li v-for="p in posts" :key="p.id">
      <NuxtLink :to="`/posts/${p.id}`">{{ p.title }}</NuxtLink>
    </li>
  </ul>
</template>

<script setup lang="ts">
type Post = { id: number; title: string }
const { data } = await useFetch<Post[]>('https://jsonplaceholder.typicode.com/posts')
const posts = data
</script>

    <!-- pages/posts/[id].vue -->
<template>
  <article v-if="post">
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </article>
</template>

<script setup lang="ts">
const route = useRoute()
const { data: post } = await useFetch(`https://jsonplaceholder.typicode.com/posts/${route.params.id}`)
</script>

第 5 天：Nuxt 进阶（状态、插件、SEO、静态化）

  • 学习点
    • 与 Pinia 集成：defineNuxtPlugin 注入、@pinia/nuxt
    • 插件系统：plugins/xxx.ts，如注册 UI 库、拦截器
    • SEO：useHead / defineOgImage（社区）、app.config.ts
    • 静态站点生成：nuxi generate（ISG/预渲染）
  • 练习任务
    • 将 UI 库接入 Nuxt 项目（在 plugins/ 注册全局组件或按需引入）
    • 为文章列表/详情设置 title/description，并生成静态站点
  • 示例：Pinia 快速接入
    npm i @pinia/nuxt

    // nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

第 6 天：综合小项目（中后台页）

  • 项目要求（建议用 Nuxt + 选定 UI 库）
    • 页面：用户列表页
      • 顶部筛选（关键词、角色、状态）
      • 表格展示（选择、排序）
      • 分页
      • 批量操作（启用/禁用/删除）
      • “新增/编辑”弹窗表单（表单校验）
    • 数据：使用 Mock（如 msw、miragejs、或直接写一个 Node/Express 假接口）
    • 状态：Pinia 管理列表与分页条件
    • 用户体验：loading、错误提示、空状态、操作成功提示
  • 验收标准
    • 代码结构清晰：pages/、components/、composables/、stores/、plugins/
    • 可复用的 useTableFetch composable（处理筛选条件、分页、请求、loading 状态）

第 7 天：部署与优化

  • 部署
    • Nuxt SSR：Vercel/Netlify/Node 服务器（nuxi build && node .output/server/index.mjs）
    • 纯静态：nuxi generate 输出到 dist，可直接上静态托管（Vercel/Cloudflare Pages）
  • 基础优化
    • 开启生产构建：nuxt build/Vite 构建
    • 路由级代码分割（默认有）
    • 图片懒加载、组件懒加载（动态导入）
    • 列表分页/虚拟滚动（大数据时）
  • 质量保障
    • ESLint + Prettier
    • TypeScript 严格模式
    • 简单的单元测试（Vitest）与 E2E（Playwright，可选）

推荐学习资源

你可以立刻动手的“最小入门任务”

  1. 用 Vite 创建 Vue 项目，完成 Todo 练习（第 1 天的示例）。
  2. 用 nuxi 创建 Nuxt 项目，完成“文章列表 + 详情”。
  3. 在 Nuxt 项目中接入一个 UI 库，做出“筛选 + 表格 + 分页 + 弹窗表单”的骨架。

如果你愿意，把你的主题需求（UI 库选择、接口结构）告诉我，我可以给你一个可直接运行的模板仓库结构与示例代码，帮你节省搭建时间。

Nuxt状态管理权威指南-从use...
学校学生亿级净资产成材率

评论