Vue.js 中级项目实战：开发一个在线问卷调查平台

Vue.js 是一款流行的 JavaScript 框架，它简化了前端开发过程，使开发人员能够更轻松地构建交互式的用户界面。本文将介绍如何使用 Vue.js 开发一个在线问卷调查平台，帮助你提升 Vue.js 的实战能力。

准备工作

在开始之前，确保你已经安装了 Node.js 和 Vue CLI。如果还没有安装，你可以按照官方文档进行安装。

创建项目

首先，我们需要使用 Vue CLI 创建一个新的 Vue.js 项目。打开终端并运行以下命令：

vue create questionnaire-platform

这将创建一个名为 questionnaire-platform 的新项目，并安装所需的依赖。

设计项目结构

在开始编码之前，我们需要先设计项目的结构。以下是一个简单的项目结构示例：

├── src
│   ├── components
│   │   ├── QuestionnaireList.vue
│   │   ├── QuestionnaireDetail.vue
│   │   └── ...
│   ├── views
│   │   ├── Home.vue
│   │   ├── CreateQuestionnaire.vue
│   │   └── ...
│   ├── router
│   │   └── index.js
│   ├── store
│   │   └── index.js
│   └── App.vue
└── main.js

在 components 文件夹中，我们将存放所有的可复用组件，例如问卷列表组件和问卷详情组件。在 views 文件夹中，我们将存放各个页面的组件，例如首页和创建问卷页面。router 文件夹用于管理路由，store 文件夹用于管理应用的状态。

开发首页

我们从开发首页开始。在 src/views 文件夹中创建一个名为 Home.vue 的文件，并添加以下代码：

<template>
  <div>
    <h1>在线问卷调查平台</h1>
    <QuestionnaireList />
  </div>
</template>

<script>
import QuestionnaireList from '@/components/QuestionnaireList.vue';

export default {
  name: 'Home',
  components: {
    QuestionnaireList,
  },
};
</script>

在上述代码中，我们使用了 QuestionnaireList 组件来展示问卷列表。

开发问卷列表组件

接下来，我们将开发问卷列表组件。在 src/components 文件夹中创建一个名为 QuestionnaireList.vue 的文件，并添加以下代码：

<template>
  <div>
    <h2>问卷列表</h2>
    <ul>
      <li v-for="questionnaire in questionnaires" :key="questionnaire.id">
        {{ questionnaire.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'QuestionnaireList',
  data() {
    return {
      questionnaires: [
        { id: 1, title: '问卷1' },
        { id: 2, title: '问卷2' },
        { id: 3, title: '问卷3' },
      ],
    };
  },
};
</script>

在上述代码中，我们使用了 v-for 指令来遍历问卷列表，并展示每个问卷的标题。

添加路由

为了实现页面之间的导航，我们需要配置路由。打开 src/router/index.js 文件，并添加以下代码：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';
import CreateQuestionnaire from '@/views/CreateQuestionnaire.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/create',
    name: 'CreateQuestionnaire',
    component: CreateQuestionnaire,
  },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

export default router;

在上述代码中，我们定义了两个路由：首页和创建问卷页面。

开发创建问卷页面

最后，我们将开发创建问卷页面。在 src/views 文件夹中创建一个名为 CreateQuestionnaire.vue 的文件，并添加以下代码：

<template>
  <div>
    <h2>创建问卷</h2>
    <form>
      <label for="title">标题：</label>
      <input type="text" id="title" v-model="title" />

      <button type="submit">创建</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'CreateQuestionnaire',
  data() {
    return {
      title: '',
    };
  },
};
</script>

在上述代码中，我们使用了表单来接收用户输入的问卷标题。

运行项目

现在，我们已经完成了项目的开发。在终端中运行以下命令来启动项目：

npm run serve

打开浏览器并访问 http://localhost:8080，你将看到在线问卷调查平台的首页。点击导航栏中的 "创建问卷"，你将跳转到创建问卷页面。

结语

通过这个中级项目实战，我们学习了如何使用 Vue.js 开发一个简单的在线问卷调查平台。希望这篇文章能够帮助你提升 Vue.js 的实战能力，并启发你开发更多有趣的项目！

参考资料

• Vue.js 官方文档：https://vuejs.org/
• Vue CLI 官方文档：https://cli.vuejs.org/