The Smart Store app Vue.js is a Vue.js sample application, demonstrating the usage of the UI5 Web Components. You can find a step by step tutorial below on how to build the app by yourself. You don't have to clone the repo, the app will be built from scratch.
Note: no previous experience with UI5 Web Components is required. To take the most of the tutorial, a basic knowledge with Vue.js is desirable.
- Node.js - version 8.10 or later (check the version with
node -v
) - npm - version 6 or later (check the version with
npm -v
) - Vue CLI - 🛠️ Standard Tooling for Vue.js Development
The Smart Store app enables a store manager to control his/her multiple stores. It provides the most important information and status of the stores and urgent tasks that should be addressed by the store manager.
-
Bootstrap the app with Create Vue.js App executing the following commands in your terminal.
vue create smart-store-app cd smart-store-app
-
Install the UI5 Web Components.
npm install @ui5/webcomponents
-
Consume the UI5 Web Components.
All the components can be imported from
"@ui5/webcomponents/dist/<component_name>";
Import one of the available components in thesrc/App.vue
.import "@ui5/webcomponents/dist/Button"; // loads ui5-button
Then, you can add the
ui5-button
insrc/App.vue
and that`s it!export default { name: "app", template: `<ui5-button>Hello world!</ui5-button>`, data: function() {} };
-
Launch the app and you should see the
ui5-button
rendered on the screen.npm run serve
Sources of Smart Store App Vue.js