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

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

在這篇文章，你可以看到是如何使用Vue和Excel的JavaScript API來(lái)構(gòu)建一個(gè)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來(lái)搭建腳手架,在命令行輸入如下命令:
vue init webpack vue-excel-addin

每個(gè)add-in都需要一個(gè)manifest文件來(lái)配置和定義它的功能

進(jìn)入app文件

cd vue-excel-addin

使用Yeoman來(lái)生成你的add-in的manifest文件, 運(yùn)行如下命令

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

生成工具會(huì)問(wèn)你是否需要打開(kāi) resource.html.這篇文檔無(wú)需打開(kāi), 當(dāng)然如果你好奇的話,打開(kāi)也沒(méi)關(guān)系! 選擇 yes 或者 no 讓生成工具完成它的工作把！

跟著以下的教程來(lái)運(yùn)行你的excel add-in吧

注意,請(qǐng)把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ù)

打開(kāi)index.html, 把以下的

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

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