使用SAP BSP应用运行Vue

As I mentioned in my blog Is jQuery based UI Framework Obsolete, during one of my onsite support to a local Chinese customer, I discuss SAP UX strategy with their IT team. The team architect is a fan of Vue, who prefers to use Vue in their UI custom development instead of Fiori. Then I am curious about the advantage of Vue and plan to learn it in my spare time. As always a Vue Hello World must be finished before advantaged content is touched.

What is Vue

Vue is another UI framework based on MVVM which has more than 48000 stars ( till 2017 March ) in Github and now has 77000 + stars ( 2017 December ).

I will first finish development locally and finally upload the tested application to Netweaver running it as a BSP application. You should have some basic knowledge on nodejs, npm and webpack to follow this blog.

Detail steps for hello world tutorial

(1) create a folder in your laptop, type “npm init” in command line to trigger the generation of dummy package.json. Just directly press enter key to finish the creation wizard, so that all default settings are used for package.json.
Type “npm install –save-dev webpack-dev-server” in command to install a light weight server which could be used for your local testing.

Repeat the command to install other necessary module:

• css-loader
• vue-template-compiler
• webpack
• vue-loader
• vue-router

So far all such installed modules are just required for development. Install runtime dependent modules vue and vuex with command:

npm install –save vue vuex

Once done, your package.json should look like below:

The highlighted script is manually added to ease the local testing, which will be illustrated later.

(2) Create a folder src under the root folder. Create a new file “index.vue” and paste the following source code:

<style>
    h2{
        color: red;
    }
</style>
<template>
    <h2>Jerry: Hello, World!</h2>
</template>
<script>
    module.exports = {
        data: function(){
            return {};
        }
    }
</script>

The HTML source code

Jerry: Hello, World!

under