1.编写程序，实现如下功能： 1)使用单文件组件定义一个投票选项 2)每个选项上有人物，名称和票数。 3)点击按钮时票数加1，且下方显示投票实时纪录，效果如下图。 提示：选项定义为一个组件

要编写这样一个程序，可以采用前端技术如HTML、CSS和JavaScript，结合React或者Vue这样的JavaScript库来创建单文件组件（Single File Component, SFC）。这里我们用React为例来说明：

首先，创建一个名为`VoteOption.js`的React组件文件：

// VoteOption.js
import React, { useState } from 'react';

const VoteOption = ({ name, defaultVotes }) => {
  const [votes, setVotes] = useState(defaultVotes);

  const handleClick = () => {
    setVotes(votes + 1);
  };

  return (
    <div className="vote-option">
      <h3>{name}</h3>
      <p>票数: {votes}</p>
      <button onClick={handleClick}>投一票</button>
      <hr />
      <div className="record">投票实时记录: {votes}票</div>
    </div>
  );
};

export default VoteOption;

在这个组件里，我们定义了一个`VoteOption`，它接受两个属性：`name`代表人物名称，`defaultVotes`表示初始票数。内部通过`useState`钩子管理票数状态，并设置一个点击事件处理器，每次点击按钮时更新票数。

然后，在主应用文件如`App.js`中，你可以像这样使用这个组件：

// App.js
import React from 'react';
import VoteOption from './VoteOption';

function App() {
  const options = [
    { name: '选项A', defaultVotes: 0 },
    { name: '选项B', defaultVotes: 0 },
    // 添加更多选项...
  ];

  return (
    <div className="app-container">
      {options.map((option, index) => (
        <VoteOption key={index} name={option.name} defaultVotes={option.defaultVotes} />
      ))}
    </div>
  );
}

export default App;

这会渲染出一系列的投票选项，每次点击都会动态增加票数并在下方显示当前的票数。如果你需要更复杂的效果，比如样式调整或者更丰富的交互，可以在CSS文件中添加样式，并可能需要结合其他的库，如Redux或Context API来管理全局状态。