Vue 3 完整应用开发与扩展教程

Vue 3 完整应用开发与扩展教程

前言

在前几阶段中，我们学习了 Vue 3 的基础知识，包括组件创建、状态管理和路由使用等。现在我们将进入一个新的阶段，深入探讨如何将这些知识应用于实际项目，以及如何扩展我们的技能。本文将指导你创建一个完整的应用（例如个人博客、Todo List 或电商平台），并涵盖服务端渲染（SSR）、测试、TypeScript、参与社区与开源等内容。

1. 综合项目开发

1.1 选定项目

我们将以 个人博客 为例，创建一个完整的应用。项目需求包括：

• 用户可以查看文章列表和单篇文章
• 用户可以添加、编辑和删除自己的文章
• 用户可以注册和登录
• 文章的评论功能

1.2 项目初始化

使用 Vue CLI 快速创建项目。

vue create my-blog
cd my-blog

选择 Vue 3 并适当配置路由、Vuex（状态管理）和其他需要的插件。

1.3 结构设计

项目结构设计：

src/
├── assets/
├── components/
│   ├── ArticleList.vue
│   ├── ArticleItem.vue
│   └── ArticleEditor.vue
├── pages/
│   ├── Home.vue
│   ├── Login.vue
│   ├── Register.vue
│   ├── Article.vue
│   └── NotFound.vue
├── router/
│   └── index.js
├── store/
│   ├── index.js
│   └── modules/
│       └── articles.js
├── App.vue
└── main.js

1.4 组件开发

1.4.1 ArticleList.vue

展示文章列表的组件。

<template><div><h1>文章列表</h1><ul><ArticleItem v-for="article in articles" :key="article.id" :article="article" /></ul></div>
</template><script>
import ArticleItem from '../components/ArticleItem.vue';
import { mapState } from 'vuex';export default {components: {ArticleItem,},computed: {...mapState('articles', ['articles']),},created() {this.$store.dispatch('articles/fetchArticles');},
};
</script>

1.4.2 ArticleItem.vue

展示单篇文章的组件。

<template><li><router-link :to="{ name: 'article', params: { id: article.id } }">{{ article.title }}</router-link></li>
</template><script>
export default {props: {article: {type: Object,required: true,},},
};
</script>

1.4.3 ArticleEditor.vue

添加和编辑文章的组件。

<template><div><h1>{{ isEditing ? '编辑文章' : '新建文章' }}</h1><form @submit.prevent="submitArticle"><input v-model="article.title" placeholder="标题" /><textarea v-model="article.content" placeholder="内容"></textarea><button type="submit">{{ isEditing ? '保存' : '发布' }}</button></form></div>
</template><script>
import { mapActions } from 'vuex';export default {props: {isEditing: {type: Boolean,default: false,},article: {type: Object,default: () => ({ title: '', content: '' }),},},data() {return {article: { ...this.article },};},methods: {...mapActions('articles', ['createArticle', 'updateArticle']),async submitArticle() {if (this.isEditing) {await this.updateArticle(this.article);} else {await this.createArticle(this.article);}this.$router.push({ name: 'home' });},},
};
</script>

1.5 路由配置

在 src/router/index.js 中配置路由。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';
import Login from '../pages/Login.vue';
import Register from '../pages/Register.vue';
import Article from '../pages/Article.vue';
import NotFound from '../pages/NotFound.vue';const routes = [{ path: '/', name: 'home', component: Home },{ path: '/login', name: 'login', component: Login },{ path: '/register', name: 'register', component: Register },{ path: '/article/:id', name: 'article', component: Article },{ path: '/:catchAll(.*)', name: 'not-found', component: NotFound },
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

1.6 状态管理

在 src/store/modules/articles.js 中管理文章数据。

import axios from 'axios';const state = {articles: [],
};const mutations = {setArticles(state, articles) {state.articles = articles;},
};const actions = {async fetchArticles({ commit }) {const response = await axios.get('/api/articles');commit('setArticles', response.data);},async createArticle({ dispatch }, article) {await axios.post('/api/articles', article);dispatch('fetchArticles');},async updateArticle({ dispatch }, article) {await axios.put(`/api/articles/${article.id}`, article);dispatch('fetchArticles');},
};const getters = {articles: (state) => state.articles,
};export default {namespaced: true,state,mutations,actions,getters,
};

1.7 表单处理

在表单中处理用户输入和验证。

• 使用 v-model 进行数据绑定。
• 实现基本的输入验证和提示。

2. 服务端渲染（SSR）与 Nuxt.js

2.1 Nuxt.js 介绍

Nuxt.js 是一个基于 Vue.js 的框架，用于构建服务端渲染 (SSR) 应用程序。它可以帮助你轻松地实现路由、状态管理和服务端请求等功能。

2.2 创建 Nuxt 应用

使用以下命令创建一个新的 Nuxt 应用：

npx create-nuxt-app my-nuxt-blog

在初始化的时候选择适合自己需求的模块，例如 axios、vuex 等。

2.3 目录结构

Nuxt.js 的项目结构如下：

my-nuxt-blog/
├── assets/
├── components/
├── layouts/
├── pages/
├── plugins/
├── store/
├── nuxt.config.js
└── package.json

2.4 页面创建与数据获取

在 pages/index.vue 中创建主页，并获取文章数据。

<template><div><h1>文章列表</h1><ul><li v-for="article in articles" :key="article.id"><nuxt-link :to="'/article/' + article.id">{{ article.title }}</nuxt-link></li></ul></div>
</template><script>
export default {async asyncData({ $axios }) {const { data } = await $axios.get('/api/articles');return { articles: data };},
};
</script>

2.5 路由定义

Nuxt.js 会自动通过 pages 目录生成路由，确保文件名符合路由规则。

2.6 SSR 优势

SSR 有助于提高搜索引擎优化（SEO）和首屏加载速度，使内容在服务端预渲染，客户浏览器得到完整的 HTML 页面。

3. 测试

3.1 单元测试

使用 Vue Test Utils 和 Jest 为 Vue 组件编写单元测试。

3.1.1 安装依赖

npm install --save-dev @vue/test-utils jest

3.1.2 编写测试

在 tests/unit 目录下创建测试文件，并编写测试用例。

import { mount } from '@vue/test-utils';
import ArticleItem from '@/components/ArticleItem.vue';describe('ArticleItem.vue', () => {it('renders article title', () => {const article = { id: 1, title: 'Test Article' };const wrapper = mount(ArticleItem, {props: { article },});expect(wrapper.text()).toContain('Test Article');});
});

3.2 端到端测试

使用 Cypress 实现端到端测试。

3.2.1 安装 Cypress

npm install --save-dev cypress

3.2.2 编写测试

在 cypress/integration 目录下创建测试文件。

describe('My Blog', () => {it('loads the home page', () => {cy.visit('/');cy.contains('文章列表');});
});

4. TypeScript 与 Vue

4.1 在 Vue 中使用 TypeScript

如果你想要在 Vue 3 中使用 TypeScript，可以在初始化项目时选择 TypeScript 选项。之后，可以在组件中添加类型注解。

<script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({props: {msg: {type: String,required: true,},},
});
</script>

4.2 类型系统与组件结合

使用 TypeScript 可以提供更好的类型安全和代码提示。你可以为状态、属性和事件定义类型，确保在开发阶段能及时发现潜在错误。

5. 参与社区与开源

5.1 加入 Vue.js 社区

参与 Vue 的相关论坛和社交媒体，如 Vue 论坛、Stack Overflow、Twitter 和 Discord，向他人学习并发布你的项目。

5.2 开源贡献

寻找 Vue.js 相关的开源项目，先从文档改进、Bug 修复开始，逐步深入 code review 和 feature 贡献。

5.3 学习资源

• Vue.js 官方文档：提供详尽的使用和开发教程。
• Nuxt.js 文档：深入了解 Nuxt.js 的使用方式和高级功能。
• 社区博客和视频：跟踪最新的开发动态。

结论

通过本文，我们创建了一个完整的 Vue 3 应用，实现了服务端渲染、测试与 TypeScript 的基本使用。同时，我们也了解到参与社区和开源的重要性。希望你能将这些知识运用到自己的项目中，不断提升自己的技能！