zoukankan      html  css  js  c++  java
  • 使用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
  • 相关阅读:
    iOS7,iOS8和iOS9的区别
    NSUrl
    什么是 MIME TYPE?
    TCP协议与UDP协议的区别
    KVC、KVO、NSNotification、delegate 总结及区别
    cocoapods 安装过程及常见问题
    素材丶资料
    方法 笔记(二)
    UIWebView UITextView
    在oj中Python的循环输入问题解决
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/13586193.html
Copyright © 2011-2022 走看看