Step by step to run Vue application in BSP
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
Detail steps for hello world tutorial
- css-loader
- vue-template-compiler
- webpack
- vue-loader
- vue-router
<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.
import Vue from 'vue'; import AppJerry from './src/index.vue' new Vue({ el: "#demo", components: { app: AppJerry } });
<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>
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' } ] } }
Step by step to run Vue application in BSP