Creating Office add-in generator using Vue
Since I read the “Build an Excel add-in using Vue” article here, I have been using the steps to create many Office add-ins project using Vue framework. For me, Vue is much simpler compared to React or Angular. May be it is just my personal opinion, but I have been trying so long to understand React and Typescript – whereas for Vue I can quickly adopt the framework for my project. May be because, I usually develop application using C#, JQuery and Handlerbars for templating.
The steps in the article basically provide following instruction:
- Create Vue app webpack project
- Add manifest only Office Add-in
- Modify the App entry point
I always return to the article to start my project, however as developers we love automation, we love templating – hence I decided to create Office add-in generator using Vue.
First step: Understand build and run Office generator locally
I open my github account and start to fork official generator-office here : https://github.com/OfficeDev/generator-office . Since I never create Yeoman generator before, I just want to understand how I can build and create a custom generator.
In my command prompt, I run following:
git clone https://github.com/cakriwut/generator-office.git cd generator-office npm install npm run build npm link
Then, I open another command prompt and test if I can execute the yo generator. I run following command:
mkdir test yo office
Second steps: Understand Office generator project structure
src ├──app | ├──config | ├──helpers | ├──templates | | ├──hosts | | | ├──excel | | | |--onenote | | | └──//..etc | | ├──js | | | ├──angular | | | ├──base | | | └──jquery | | ├──manifest-only | | └──ts
- /app , is the default generator where Yeoman will use as the main entry point.
- /app/templates, is the location where Yeoman will search for the template.
- Create new branch vue-template
- Modify ../config/projectProperties.json. I will add new projectTypes “Office Add-in project using Vue framework” in this file.