正文
关于本文
在这篇文章中，你将会经历一遍使用Vue和Excel JavaScript API 打造一个Excel插件的过程。
预备知识
创建一个新的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文件以及资源文件就已经可供使用了，可以用于创建你的项目。
> [!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中加载和运行你的插件。
-
在Excel中，选择
Home
选项，然后选择
Show Taskpane
按钮打开插件任务窗格。
