使用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 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.
Test the BSP application and it works as well:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入理解排序算法
- 用nginx缓存静态文件
- 优雅的玩PHP多进程
- 聊一聊mycat数据库集群系列之双主双重实现
- Fast-SCNN的解释以及使用Tensorflow 2.0的实现
- 基于Spring Boot快速实现发送邮件功能
- 史上最全的vim快捷键文档/手册/大全/帮助/指南
- RPC详解
- 轻松学Pytorch – 行人检测Mask-RCNN模型训练与使用
- Linux的文本处理工具浅谈-awk sed grep
- 这样Review代码牛逼啦!
- FinDOM-XSS:一款针对DOM型XSS漏洞的快速扫描工具
- 使用Pycharm和跳板机 连接内网服务器
- CVE-2020-1313漏洞分析与利用PoC
- Linux用户登录日志查询 # 1 utmp、wtmp、btmp文件