使用SAP BSP应用运行Vue

Jerry Wang

发布于 2020-08-31 10:46:58

4760

发布于 2020-08-31 10:46:58

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 tag represents the view part of this Vue application and will be rendered in the final HTML page. Go back to the root folder, create a new file main.js:

import Vue from 'vue';
import AppJerry from './src/index.vue'

new Vue({
    el: "#demo",
    components: {
        app: AppJerry
    }
});

The constructor of Vue in the source code will simply mount the imported Vue component( implemented in ./src/index.vue) into the given HTML element specified by id=”demo”. So create index.html and declare the div element with id=”demo”.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>
	<div id="demo">
		<app></app>
	</div>
    <script src="dist/build.js"></script>
</body>
</html>

So far the index.vue in folder src could never be directly recognized by browser, so a conversion mechanism from .vue to .js is necessary here. The converted js from index.vue is stored in file dist/build.js. The next step is how to define and trigger such conversion.

(3) Create a file webpack.config.js in root folder:

var path = require('path');
module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' 
        }
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(png|jpg|eot|svg|ttf|woff)/,
                loader: 'url?limit=40000'
            }
        ]
    }
}

This file defines a configuration for webpack: when you type “webpack” in command line, the file “main.js” will be treated as pack input, the index.vue imported in this file will be converted and the corresponding Javascript source code is stored in file “./dist/build.js” as pack output.

So far all development / configuration is done. You should have the following content in your root folder:

(4) type “webpack” in command, and you can observe the build.js is converted successfully.

It has 323KB because the necessary code to run Vue is also combined into this file so my index.html does not need to include Vue.js any more. Search keyword by “Jerry” and you can find the converted source code which is compiled from the template in index.vue:

Type npm run dev to launch the webpack server:

Ensure the application runs well locally:

(5) here now is the last step which is easiest for ABAPers: create a new BSP application in SE80, just import index.html and build.js, all other stuff mentioned before are only required in development time.