vue-excel-addin git地点

项目需求 有空就尝试运用vue去构建一个excel addin

微软太坑爹了,只给了ng react jquery的教程

文档会尝试中英文双语的

运用Vue来构建一个Excel add-in

在这篇文章，你能够看到是怎样运用Vue和Excel的JavaScript API来构建一个Excel add-in的

须要

• 装置Vue-cli

npm install --global vue-cli

• 全局装置最新版本的Yeoman和Yeoman generator for Office Add-ins。

npm install -g yo generator-office

天生新的Vue项目

运用vue-cli来搭建脚手架,在敕令行输入以下敕令:
vue init webpack vue-excel-addin

天生manifest文件和到场add-in设置

每一个add-in都须要一个manifest文件来设置和定义它的功用

1. 进入app文件

cd vue-excel-addin

1. 运用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.这篇文档无需翻开, 固然假如你猎奇的话,翻开也没紧要! 挑选 yes 或许 no 让天生东西完成它的事情把！

假如你被提醒要掩盖 package.json, 挑选 No (do not overwrite).

1. 随着以下的教程来运转你的excel add-in吧

注重,请把manifest的相干端口修正成dev默许的8080以及将根目录的assets移入static并修正相干设置

• 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

1. 编辑package.json 给dev剧本增加–https参数

更新app

1. 翻开index.html, 把以下的<script>标签增加到</head>之前

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

1. 翻开src/main.js 将`new Vue({
   el: ‘#app’,
   components: {App},
   template: ‘<App/>’
   })`替换成以下

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

1. 翻开 src/App.vue, 修正成以下

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

试一下吧

1. 在敕令行输入以下敕令

Windows:

npm start

macOs:

npm start

1. 在Excel中的最先tab, 挑选Show Taskpane按钮来翻开add-in的task pane

1. 挑选恣意一个地区的单元格
2. 在task pane内, 点击 Set color按钮来将选中地区的色彩转为绿色