生成 Excel 任务窗格加载项Build an Excel task pane add-in using Vue

本文将逐步介绍如何生成 Excel 任务窗格加载项。In this article, you'll walk through the process of building an Outlook task pane add-in.

创建加载项Create the add-in

可以使用 Office 加载项的 Yeoman 生成器或 Visual Studio 创建 Office 加载项。You can create an Office Add-in by using the Yeoman generator for Office Add-ins or Visual Studio. Yeoman 生成器将创建一个可通过 Visual Studio 代码或任何其他编辑器管理的 Node.js 项目,而 Visual Studio 将创建一个 Visual Studio 解决方案。The Yeoman generator creates a Node.js project that can be managed with Visual Studio Code or any other editor, whereas Visual Studio creates a Visual Studio solution. 选择适合于想要使用的方法的选项卡,然后按照说明创建加载项并在本地测试。Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally.

先决条件Prerequisites

  • Node.js(版本 8.0.0 或更高版本)Node.js (version 8.0.0 or later)

  • GitGit

  • 最新版本的 Yeoman适用于 Office 外接程序的 Yeoman 生成器。若要全局安装这些工具,请从命令提示符处运行以下命令:The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt:

    npm install -g yo generator-office
    

    备注

    即使以前安装了 Yeoman 生成器, 我们也建议您将程序包从 npm 更新到最新版本。Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

创建加载项项目Create the add-in project

使用 Yeoman 生成器创建 Excel 加载项项目。Use the Yeoman generator to create an Excel add-in project. 运行下面的命令,再回答如下所示的提示问题:Run the following command and then answer the prompts as follows:

yo office
  • 选择项目类型: Office Add-in Task Pane projectChoose a project type: Office Add-in Task Pane project
  • 选择脚本类型: JavascriptChoose a script type: Javascript
  • 要如何命名加载项?What do you want to name your add-in? My Office Add-in
  • 要支持哪一个 Office 客户端应用程序?Which Office client application would you like to support? Excel

Yeoman 生成器

完成此向导后,生成器会创建项目,并安装支持的 Node 组件。After you complete the wizard, the generator will create the project and install supporting Node components.

浏览项目Explore the project

使用 Yeoman 生成器创建的加载项项目包含适合于基础任务窗格加载项的示例代码。The add-in project that you've created with the Yeoman generator contains sample code for a very basic task pane add-in. 如果想要浏览加载项项目的组件,请在代码编辑器中打开项目并检查下面列出的文件。If you'd like to explore the components of your add-in project, open the project in your code editor and review the files listed below. 准备好试用加载项时,请转至下一部分。When you're ready to try out your add-in, proceed to the next section.

  • 项目根目录中的 ./manifest.xml 文件定义加载项的设置和功能。The ./manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in.
  • ./src/taskpane/taskpane.html 文件包含组成任务窗格的 HTML。The ./src/taskpane/taskpane.html file contains the HTML markup for the task pane.
  • ./src/taskpane/taskpane.css 文件包含应用于任务窗格中的内容的 CSS。The ./src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
  • ./src/taskpane/taskpane.js 文件包含用于加快任务窗格与 Office 托管应用程序之间的交互的 Office JavaScript API 代码。The ./src/taskpane/taskpane.js file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office host application.

试用Try it out

  1. 导航到项目的根文件夹。Navigate to the root folder of the project.

    cd "My Office Add-in"
    
  2. 完成以下步骤,以启动本地 Web 服务器并旁加载你的加载项。Complete the following steps to start the local web server and sideload your add-in.

    备注

    Office 加载项应使用 HTTPS,而不是 HTTP(即便是在开发时也是如此)。Office Add-ins should use HTTPS, not HTTP, even when you are developing. 如果系统在运行以下命令之一后提示你安装证书,请接受提示以安装 Yeoman 生成器提供的证书。If you are prompted to install a certificate after you run one of the following commands, accept the prompt to install the certificate that the Yeoman generator provides.

    提示

    如果在 Mac 上测试加载项,请先运行以下命令,然后再继续。If you're testing your add-in on Mac, run the following command before proceeding. 运行此命令时,本地 Web 服务器将启动。When you run this command, the local web server will start.

    npm run dev-server
    
    • 若要在 Excel 中测试加载项,请在项目的根目录中运行以下命令。To test your add-in in Excel, run the following command in the root directory of your project. 这将启动本地的 Web 服务器 (如果尚未运行的话), 并使用加载的加载项打开 Excel。This starts the local web server (if it's not already running) and opens Excel with your add-in loaded.

      npm start
      
    • 若要在浏览器版 Excel 中测试加载项,请在项目的根目录中运行以下命令。To test your add-in in Excel on a browser, run the following command in the root directory of your project. 如果你运行此命令,本地 Web 服务器将启动(如果尚未运行的话)。When you run this command, the local web server will start.

      npm run start:web
      

      若要使用加载项,请在 Excel 网页版中打开新的工作簿,并按照在 Office 网页版中旁加载 Office 加载项中的说明操作,以旁加载你的加载项。To use your add-in, open a new document in Word Online and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office Online.

  3. 在 Excel 中,依次选择的“开始”选项卡和功能区中的“显示任务窗格”按钮,以打开加载项任务窗格。In Excel, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.

    Excel 加载项按钮

  4. 选择工作表中的任何一系列单元格。Select any range of cells in the worksheet.

  5. 在任务窗格的底部,选择“运行”链接,价格选定范围的颜色设为黄色。At the bottom of the task pane, choose the Run link to set the color of the selected range to yellow.

    Excel 加载项

后续步骤Next steps

恭喜,你已成功创建 Excel 任务窗格加载项!Congratulations, you've successfully created an Excel task pane add-in using Vue! 接下来,请详细了解 Excel 加载项功能,并跟着 Excel 加载项教程一起操作,生成更复杂的加载项。Next, learn more about the capabilities of an Excel add-in and build a more complex add-in by following along with the Excel add-in tutorial.

另请参阅See also