vue-excel-addin

摘要：地址项目需求有空就尝试使用去构建一个微软太坑爹了只给了的教程文档会尝试中英文双语的使用来构建一个在这篇文章，你可以看到是如何使用和的来构建一个的需要安装全局安装最新版本的和。

项目需求 有空就尝试使用vue去构建一个excel addin  
微软太坑爹了,只给了ng react jquery的教程  
文档会尝试中英文双语的

在这篇文章，你可以看到是如何使用Vue和Excel的JavaScript API来构建一个Excel add-in的

安装Vue-cli

npm install --global vue-cli

全局安装最新版本的Yeoman和Yeoman generator for Office Add-ins。

npm install -g yo generator-office

使用vue-cli来搭建脚手架,在命令行输入如下命令:
vue init webpack vue-excel-addin

每个add-in都需要一个manifest文件来配置和定义它的功能

进入app文件

cd vue-excel-addin

使用Yeoman来生成你的add-in的manifest文件, 运行如下命令

yo office

Would you like to create a new subfolder for your project?: No

What do you want to name your add-in?: My Office Add-in

Which Office client application would you like to support?: Excel

Would you like to create a new add-in?: No

生成工具会问你是否需要打开 resource.html.这篇文档无需打开, 当然如果你好奇的话,打开也没关系! 选择 yes 或者 no 让生成工具完成它的工作把！

跟着以下的教程来运行你的excel add-in吧

注意,请把manifest的相关端口修改为dev默认的8080以及将根目录的assets移入static并修改相关配置

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

编辑package.json 给dev脚本添加--https参数

打开index.html, 把以下的

打开src/main.js 将`new Vue({
el: "#app",
components: {App},
template: ""
})`替换成以下

Office.initialize = () => {
  new Vue({
    el: "#app",
    components: {App},
    template: ""
  })
}