将Vuetify包添加到使用VueJS框架制作的Excel插件中

Question

我尝试使用VueJS添加一个excel加载项（侧面加载），并使用Yeoman office软件包创建了清单文件。我按照指示进行了this tutorial的操作。一切正常，现在我想将Vuetify框架添加到我的外接程序中。

在模板上的main.js文件中，Vue实例使用此代码启动

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

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

}

现在，我尝试通过将以上代码修改为以下内容来添加Vuetify并按照their docs进行npm安装：

  import Vue from 'vue'
  import App from './App'
  import Vuetify from 'vuetify'

    Vue.use(Vuetify)
    Vue.config.productionTip = false


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

当我介绍Vuetify库时，该加载项不起作用。.我不确定如何将Vuetify合并到我的Office加载项中。任何帮助将非常感激。谢谢

Answer 1

最近让Vuetify在Windows的Excel插件中工作。

• 您在Windows框上吗？
• 您可以成功浏览到您的应用程序，即http://localhost:3000吗？
• 您可以在IE11中成功浏览到您的应用程序，即http://localhost:3000吗？
• 您是否在浏览器开发工具控制台中看到任何错误？
• “外接程序无法正常工作”是什么意思，有关该问题的更多详细信息？

我遇到的问题与Vuetify IE11的兼容性有关，特别是...

  

Vuetify利用了ES2015 / 2017的功能，这些功能需要针对Internet Explorer 11使用polyfills

来源：https://vuetifyjs.com/en/getting-started/quick-start#ie11-safari-9-support

据我所知，Excel加载项需要IE11，即Office for Windows在2013年和2016年均使用嵌入式IE11实例托管加载项。

  

Internet Explorer 11或更高版本，必须安装但不必是默认浏览器。为了支持Office加载项，充当主机的Office客户端使用的浏览器组件是Internet Explorer 11或更高版本的一部分。

来源：https://docs.microsoft.com/en-us/office/dev/add-ins/concepts/requirements-for-running-office-add-ins

来源：https://officespdev.uservoice.com/forums/224641-feature-requests-and-feedback/suggestions/31155925-office-add-ins-should-run-in-edge-not-ie11

Answer 2

我已经使用Vuetify上传了一个带有Vue Excel插件的示例存储库：

https://github.com/beauholland/Vue-Excel-Addin

• NPM安装
• NPM开始
• 浏览到http://localhost:3000并确认该Web应用在IE11中运行

如果您有足够的时间在Excel中旁加载该应用程序。

• 设置侧面加载文件夹共享以进行测试，即vue-excel \ Graph API \，并将Excel配置为信任共享文件夹并插入插件https://docs.microsoft.com/en-us/office/dev/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins

注意：我仓库中的示例应用程序称为“图形API”