vue office add-in (外接程序)开发

• Node.js

• 全局安装 Vue CLI。

  npm install -g vue-cli
  

• 全局安装最新版 Yeoman 和适用于 Office 加载项的 Yeoman 生成器。

  npm install -g yo generator-office

生成新 Vue 应用程序

使用 Vue CLI 生成新 Vue 应用程序。 通过终端运行以下命令，再回答如下所示的提示问题。

bash复制

vue init webpack my-add-in

回答上一个命令生成的提示问题时，请覆盖以下 3 个提示问题的默认回答。 可以接受其他所有提示问题的默认回答。

• 是否安装 vue-router? No  （）
• 设置单元测试：No
• 是否设置包含 Nightwatch 的 e2e 测试? No

 

更新应用程序

1. 在代码编辑器中，打开 Yo Office 在 Vue 项目根创建的文件夹 My Office Add-in。 在该文件夹中，您将看到定义加载项的设置的清单文件：manifest.xml。

2. 

3. 打开清单文件，将所有 https://localhost:3000 都替换为 https://localhost:8080，然后保存文件。

4. 打开文件 index.html（位于 Vue 项目的根），紧靠 </head> 标记前面添加以下 <script> 标记，然后保存文件。

   HTML复制

   <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
   

5. 打开 src/main.js，并删除下面的代码块：

   JavaScript复制

   new Vue({
       el: '#app',
       components: {App},
       template: '<App/>'
   })
   

   然后，在相同的位置上添加以下代码，并保存文件。

   JavaScript复制

   const Office = window.Office
   Office.initialize = () => {
     new Vue({
       el: '#app',
       components: {App},
       template: '<App/>'
     })
   }
   

6. 打开 src/App.vue，将文件内容替换为下列代码，在文件末尾（即 </style> 标记后）添加换行符，再保存此文件。

   HTML复制

   <template>
   <div id="app">
       <div id="content">
       <div id="content-header">
           <div class="padding">
           <h1>Welcome</h1>
           </div>
       </div>
       <div id="content-main">
           <div class="padding">
           <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>