使用SAP BSP应用运行Vue-阿里云开发者社区

开发者社区> 努力滴码农> 正文

使用SAP BSP应用运行Vue

简介: 使用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 ).


image.png



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:


image.png


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:

image.png

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:

image.png

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

image.png

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:

image.png

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:

image.png


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


image.png


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:


image.png


Type npm run dev to launch the webpack server:


image.png


Ensure the application runs well locally:


image.png


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



image.png

Test the BSP application and it works as well:

image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10076 0
如何使用Chrome扩展应用postman发送SAP UI5 batch操作
如何使用Chrome扩展应用postman发送SAP UI5 batch操作
6 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13884 0
2497
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载
《2021云上架构与运维峰会演讲合集》
立即下载