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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

  • 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。

  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>

以上是 vue office add-in (外接程序)开发 的全部内容， 来源链接： utcz.com/z/375134.html

回到顶部