去找资源https://download.csdn.net/download/hashiqimiya/92753755https://download.csdn.net/download/hashiqimiya/92753755配置好资源。操作mkfile src/views/Home.vuetemplate div header nav router-link to/ classlogoVue博客/router-link ul classnav-links lirouter-link to/首页/router-link/li lirouter-link to/questions问题/router-link/li lia href#关于/a/li /ul /nav /header /div /template style scoped /stylemkfile src/views/Questions.vuetemplate div header nav router-link to/ classlogoVue博客/router-link ul classnav-links lirouter-link to/首页/router-link/li lirouter-link to/questions问题/router-link/li lia href#关于/a/li /ul /nav /header main div classquestions-container div classquestions-header h1问题列表/h1 button classadd-question-btn clickshowAddForm !showAddForm {{ showAddForm ? 取消 : 新增问题 }} /button /div !-- 新增问题表单 -- div v-ifshowAddForm classadd-question-form input typetext v-modelnewQuestion.title placeholder问题标题 classquestion-input textarea v-modelnewQuestion.content placeholder问题内容 classquestion-textarea /textarea button clickaddQuestion classsubmit-btn提交问题/button /div !-- 问题列表 -- div classquestions-list div v-forquestion in questions :keyquestion.id classquestion-card h3{{ question.title }}/h3 p{{ question.content }}/p div classquestion-meta span{{ question.date }}/span /div /div div v-ifquestions.length 0 classempty-state p暂无问题点击新增问题添加/p /div /div /div /main footer div classfooter-content pcopy; 2026 Vue博客. 保留所有权利./p /div /footer /div /template script export default { name: Questions, data() { return { showAddForm: false, newQuestion: { title: , content: }, questions: [ { id: 1, title: 如何使用Vue 3的Composition API?, content: 我想了解Vue 3的Composition API的基本使用方法特别是如何组织代码结构。, date: 2026-03-22 }, { id: 2, title: TypeScript和Vue 3的结合使用, content: 在Vue 3项目中如何更好地使用TypeScript有什么最佳实践吗, date: 2026-03-21 } ] } }, methods: { addQuestion() { if (this.newQuestion.title this.newQuestion.content) { const newId this.questions.length 0 ? Math.max(...this.questions.map(q q.id)) 1 : 1 this.questions.unshift({ id: newId, title: this.newQuestion.title, content: this.newQuestion.content, date: new Date().toISOString().split(T)[0] }) // 重置表单 this.newQuestion.title this.newQuestion.content this.showAddForm false } } } } /scriptmkfile src/router/index.jsimport { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue import Questions from ../views/Questions.vue const routes [ { path: /, name: Home, component: Home }, { path: /questions, name: Questions, component: Questions } ] const router createRouter({ history: createWebHistory(), routes }) export default routerApp.vuetemplate div router-view/router-view /div /templatemain.js增加import router from ./router.use(router)修改成import { createApp } from vue import ./style.css import App from ./App.vue import router from ./router createApp(App).use(router).mount(#app)操作首页点击问题即可跳转。