使用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:
要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2717099/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- SAP BSP應用有狀態和無狀態行為差異比較
- 使用 SAP Business Application Studio 開發 Vue 應用APPVue
- 使用 SAP UI5 CLI 命令列工具構建和執行 SAP UI5 應用UI命令列
- 使用 mock 資料在本地執行 SAP Fiori Elements 應用的工作原理Mock
- 在Kubernetes上執行SAP UI5應用(上)UI
- 使用工具分析 SAP UI5 應用前端執行的效能問題UI前端
- 如何在阿里雲上執行SAP UI5應用阿里UI
- 在 SAP 雲平臺上部署和執行 Docker 應用Docker
- SAP Hybris Commerce的JSP tag和SAP BSP tag的比較JS
- HarmonyOS:使用本地真機執行應用/服務
- 使用jconsole監測SAP commerce執行時
- 多執行緒應用執行緒
- 如何將 SAP UI5 應用託管到 Github 網站上並執行UIGithub網站
- 【譯】Vue 的小奇技(第二篇):衡量 Vue 應用的執行時效能Vue
- PyQt應用程式中的多執行緒:使用Qt還是Python執行緒?QT執行緒Python
- 如何在瀏覽器裡開發並執行 SAP UI5 應用瀏覽器UI
- 如何使用SAP事務碼SAT進行UI應用的效能分析UI
- 使用 Prometheus 監控 SAP ABAP 應用程式Prometheus
- 使用 SAP Fiori Tools 自帶的代理伺服器解決本地執行的 SAP UI5 應用遇到的跨域問題伺服器UI跨域
- 使用SAP WebIDE給SAP UI5應用新增data sourceWebIDEUI
- SAP Fiori Elements 應用的 manifest.json 檔案執行時如何被解析的JSON
- 一步步把 SAP UI5 應用部署到 SAP BTP Kyma 執行環境中去UI
- kubernetes執行應用1之Deployment
- HttpRuntime應用程式的執行時HTTP
- 在 OpenFunction 中執行 Serverless 應用FunctionServer
- 使用 Vue + Flask 搭建單頁應用VueFlask
- 如何在 SAP BTP Java 應用裡使用 SAP HANA 資料庫Java資料庫
- 如何在SAP Fiori應用裡使用React componentReact
- 關於 SAP Fiori 應用的離線使用
- 使用 Chrome 開發者工具分析 SAP UI5 應用的 JavaScript 程式碼執行效能瓶頸試讀版ChromeUIJavaScript
- 如何使用 mock 資料在本地執行 SAP Fiori ElementsMock
- SAP UI5 標準應用的多語言支援 - SAP UI5 執行時語言判定機制UI
- SAP UI5 應用中的 sap.ui.require 使用場景UI
- SAP Fiori應用索引大全工具和 SAP Fiori Tools 的使用介紹索引
- 高射炮打蚊子,殺雞用絕世好劍:在SAP Kyma上執行UI5應用UI
- Hummingbird: 在Web上執行Flutter應用WebFlutter
- Runtime-iOS執行時應用篇iOS
- 可本地執行大模型的應用大模型