这篇文章也发在我的博客, 欢迎围观 http://frankzhang.me/archives/185
Translated by FrankZhang.
如有错误, 敬请不吝告知, 谢谢!
关于本文
在这篇文章中, 你将会经历一遍使用 vue 和 Excel JavaScript API 打造一个 Excel 插件的过程.
预备知识
全局安装 Vue CLI https://github.com/vuejs/vue-cli
npm install -g vue-cli
复制代码
全局安装最新版本的 Yeoman https://github.com/yeoman/yo 和 Yeoman generator for Office Add-ins https://github.com/OfficeDev/generator-office .
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, 在标签之前增加下面的
来源: https://juejin.im/post/5b54be315188251af662277d