摘要：地址項目需求有空就嘗試使用去構(gòu)建一個微軟太坑爹了只給了的教程文檔會嘗試中英文雙語的使用來構(gòu)建一個在這篇文章，你可以看到是如何使用和的來構(gòu)建一個的需要安裝全局安裝最新版本的和。

項目需求 有空就嘗試使用vue去構(gòu)建一個excel addin  
微軟太坑爹了,只給了ng react jquery的教程  
文檔會嘗試中英文雙語的

在這篇文章，你可以看到是如何使用Vue和Excel的JavaScript API來構(gòu)建一個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.這篇文檔無需打開, 當(dāng)然如果你好奇的話,打開也沒關(guān)系! 選擇 yes 或者 no 讓生成工具完成它的工作把！

跟著以下的教程來運行你的excel add-in吧

注意,請把manifest的相關(guān)端口修改為dev默認(rèn)的8080以及將根目錄的assets移入static并修改相關(guān)配置

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參數(shù)

打開index.html, 把以下的

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

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