【译】使用Vue创建一个Excel插件-CSDN博客

这篇文章也发在我的博客，欢迎围观?

Translated by FrankZhang.

如有错误，敬请不吝告知，谢谢!

关于本文

在这篇文章中，你将会经历一遍使用Vue和Excel JavaScript API 打造一个Excel插件的过程。

预备知识

全局安装Vue CLI
```
npm install -g vue-cli

复制代码
```
全局安装最新版本的Yeoman和Yeoman generator for Office Add-ins 。
```
npm install -g yo generator-office

复制代码
```

创建一个新的Vue app

使用Vue CLI生成一个新的Vue app。通过命令行，执行下面的命令，并且如下所述对提示的配置进行设置即可。

vue init webpack my-add-in

复制代码

当对弹出的提示进行设置的时候，记得为下面三个设置非默认的配置。其他的你可以全部选择使用默认的配置。

Install vue-router? No
Set up unit tests: No
Setup e2e tests with Nightwatch? No

生成 manifest 文件

每个插件都需要一个manifest文件去定义其设置和能力。

进入你的应用的文件夹。
```
cd my-add-in

复制代码
```
使用Yeoman生成器为你的插件生成manifest文件。执行下面的命令并且如下设置弹出的提示即可。
```
yo office 

复制代码
```
- Choose a project type: Manifest
- What do you want to name your add-in?: My Office Add-in
- Which Office client application would you like to support?: Excel

当你完成了上述引导程序，一个manifest文件以及资源文件就已经可供使用了，可以用于创建你的项目。

![Yeoman generator](../images/yo-office.png)

> [!NOTE]
> If you're prompted to overwrite **package.json**, answer **No** (do not overwrite).

复制代码

保障你应用的安全性

虽然使用HTTPS在插件开发中并不是强制要求的，但还是强烈建议为你的插件使用HTTPS。不是SSL-secured（HTTPS）的插件在使用过程中会出现内容不安全的警告和错误提示。如果你计划在Office Online上使用你的插件或者将你的插件发布在AppSource上，那它必须是SSL-secured。如果你的插件可以获取外部数据和服务，它也必须是SSL-secured，以保障传输过程中的数据安全。自签名证书可以在开发和测试环境使用，只要该证书在本地机器上是被信任的即可。

为你的应用开启HTTPS，仅需要打开项目根目录下的package.json，修改dev脚本，增加--https标识，保存文件即可。

"dev": "webpack-dev-server --https --inline --progress --config build/webpack.dev.conf.js"

复制代码

更新应用

在你的编辑器中，打开manifest文件（就是项目根目录下以"manifest.xml"结尾的文件）。替换所有出现的 https://localhost:3000 为 https://localhost:8080 并保存文件。

打开 index.html，在</head>标签之前增加下面的<script>标签。

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

复制代码

打开src/main.js，_移除_下面的代码：

new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
})

复制代码

然后在相同位置增加下面的代码。

const Office = window.Office
Office.initialize = () => {
  new Vue({
    el: '#app',
    components: {App},
    template: '<App/>'
  })
}

复制代码

打开src/App.vue，用下面的代码替换该文件的全部内容，并且在文件的最后添加一个换行（例如在</style>标签之后添加换行）并且保存文件。

<template>
<div>
    <div>
    <div>
        <div>
        <h1>Welcome</h1>
        </div>
    </div>
    <div>
        <div>
        <p>Choose the button below to set the color of the selected range to green.</p>
        <br />
        <h3>Try it out</h3>
        <button @click="onSetColor">Set color</button>
        </div>
    </div>
    </div>
</div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    onSetColor () {
      window.Excel.run(async (context) => {
        const range = context.workbook.getSelectedRange()
        range.format.fill.color = 'green'
        await context.sync()
      })
    }
  }
}
</script>

<style>
#content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
}

#content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

.padding {
    padding: 15px;
}
</style>

复制代码

启动开发服务器

通过命令行，执行以下命令启动开发服务器。
```
npm start

复制代码
```
在浏览器中打开 https://localhost:8080 。如果你的浏览器指出该页面的证书是不被信任的，你需要设置你的电脑信任该证书。
在你的浏览器在没有任何证书错误的情况下加载完成这个插件页面，你可以准备测试你的插件了。

尝试一下

按照各个平台的用法说明，你将在Excel中加载和运行你的插件。
- Windows: Sideload Office Add-ins on Windows
- Excel Online: Sideload Office Add-ins in Office Online
- iPad and Mac: Sideload Office Add-ins on iPad and Mac
在Excel中，选择 Home 选项，然后选择 Show Taskpane 按钮打开插件任务窗格。
在工作表中选择任意范围的单元格。
在任务窗格，选择 Set color 按钮设置选中区域的颜色为绿色。