使用SAP BSP應用執行Vue

注销發表於2020-08-30
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 ).


使用SAP BSP應用執行Vue 使用SAP BSP應用執行Vue


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:


使用SAP BSP應用執行Vue


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:


使用SAP BSP應用執行Vue


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


使用SAP BSP應用執行Vue


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:


使用SAP BSP應用執行Vue


Type npm run dev to launch the webpack server:


使用SAP BSP應用執行Vue


Ensure the application runs well locally:


使用SAP BSP應用執行Vue


(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.


使用SAP BSP應用執行Vue


Test the BSP application and it works as well:


使用SAP BSP應用執行Vue


要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

使用SAP BSP應用執行Vue


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2717099/，如需轉載，請註明出處，否則將追究法律責任。

相關文章