Fiori-like Prototype ( Vite feat UI5 Web Components 2022 )

Vite - Home

Vite

UI5 Web Compoenents - Home

UI5 Web Compoenents

Creating a Vite Porject

Creating a Vite Porject

Installation Script

Installation Script

Project folder

Project folder

npm install & npm ls vite

npm install & npm ls vite

npm run dev

npm run dev

Vite project folder

Vite project folder

Install @ui5/webcomponents

Install @ui5/webcomponents

npm install @ui5/webcomponents & npm ls @ui5/webcomponents

npm install @ui5/webcomponents & npm ls @ui5/webcomponents

package.json

package.json

main.js

main.js

main.js with UI5 Web Components

main.js with UI5 Web Components

npm run dev

npm run dev

HTML5 Web page with UI5 Web Components

HTML5 page with UI5 Web Components

Project folder before 'npm run build'

Project folder before 'npm run build'

npm run build

npm run build

Project folder after 'npm run build'

Project folder after 'npm run build'

With more UI5 Web Components ( Date Picker )

Date Picker

package.json with more UI5 Web Components ( Date Picker )

package.json with more UI5 Web Components ( Date Picker )

HTML5 Web page with more UI5 Web Components ( Date Picker )

HTML5 page with more UI5 Web Components ( Date Picker )

Environment Version

Environment Version

ZFiori Studio Playground - Sample Review

ZFiori Sample Review

Reference

SAP Community Blogs

SAP UI5 Web Components 2022

Vite Home

ZFiori Studio ( Bilibili 2022 )

Node.js Home