-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix step-by-step installation document for UI5 and Vue (SAP#2676)
- Loading branch information
1 parent
16ba645
commit c3c89c3
Showing
1 changed file
with
48 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -146,7 +146,6 @@ or execute these commands manually to get the same result: | |
| ### Click to expand | ||
| ```bash | ||
| mkdir my-ui5-app && cd my-ui5-app | ||
| npm init -y | ||
| echo "Creating folders and downloading example assets" | ||
| mkdir -p ./webapp/home ./webapp/libs ./webapp/sample1 ./webapp/sample2 ./webapp/i18n | ||
|
|
||
|
|
@@ -207,42 +206,27 @@ or execute these commands manually to get the same result: | |
| <!-- accordion:start --> | ||
| ### Click to expand | ||
| ```bash | ||
| # create sample vue app | ||
| vue create -d my-vue-app && cd my-vue-app | ||
| npm i vue-router vuex @luigi-project/core @luigi-project/client fundamental-styles @sap-theming/theming-base-content | ||
| npm i -D sass-loader node-sass [email protected] [email protected] @babel/core @babel/preset-env babel-loader | ||
|
|
||
| # install dependencies | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/package.json > package.json | ||
| npm i | ||
| # as soon as new package.json under vue example released this line can be removed | ||
| npm i [email protected] [email protected] | ||
|
|
||
| mkdir -p src/luigi-config src/assets/scss src/views public/assets | ||
|
|
||
| # cleanup default installation | ||
| rm public/index.html src/app.vue # remove default index, will be replaced with example assets | ||
| # remove default index, will be replaced with example assets | ||
| rm public/index.html src/app.vue | ||
| rm -rf src/components | ||
|
|
||
| echo "@import '~fundamental-styles/dist/fundamental-styles.css'; | ||
| " > src/assets/scss/style.scss | ||
|
|
||
| # fetch assets from vue example | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/public/sampleapp.html > public/sampleapp.html | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/app.vue > src/app.vue | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/main.js > src/main.js | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/router.js > src/router.js | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/store.js > src/store.js | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/views/home.vue > src/views/home.vue | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/views/sample1.vue > src/views/sample1.vue | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/views/sample2.vue > src/views/sample2.vue | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/public/luigi-config.js > src/luigi-config/luigi-config.es6.js | ||
|
|
||
| # generic assets | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/scripts/setup/assets/index.html > public/index.html | ||
|
|
||
| echo "@import '~fundamental-styles/dist/fundamental-styles.css';" > src/assets/scss/style.scss | ||
|
|
||
| # set scripts | ||
| sed 's/"scripts": {/"scripts": {\ | ||
| \ "buildConfig":"webpack --entry .\/src\/luigi-config\/luigi-config.es6.js --output-path .\/public\/assets --output-filename luigi-config.js --mode production",/1' package.json > p.tmp.json && mv p.tmp.json package.json | ||
|
|
||
|
|
||
| echo "const webpack = require('webpack'); | ||
| const CopyWebpackPlugin = require('copy-webpack-plugin'); | ||
| module.exports = { | ||
| pages: { | ||
| sampleapp: { | ||
|
|
@@ -285,10 +269,45 @@ module.exports = { | |
| {ignore:['.gitkeep','**/.DS_Store','**/Thumbs.db'],debug:'warning'} | ||
| )] | ||
| } | ||
| };" > vue.config.js | ||
| };" > vue.config.js | ||
|
|
||
| npm run buildConfig | ||
| echo "const path = require('path'); | ||
| module.exports = { | ||
| entry: './src/luigi-config/luigi-config.es6.js', | ||
| output: { | ||
| filename: 'luigi-config.js', | ||
| path: path.resolve(__dirname, 'public'), | ||
| }, | ||
| };" > webpack.config.js | ||
|
|
||
| sed 's/"scripts": {/"scripts": {\ | ||
| \ "buildConfig":"webpack --config webpack.config.js",/1' package.json > p.tmp.json && mv p.tmp.json package.json | ||
|
|
||
| echo '{ | ||
| "globals": { | ||
| "Luigi": "readonly" | ||
| } | ||
| }' > .eslintrc.json | ||
|
|
||
| mkdir -p src/luigi-config | ||
|
|
||
| # fetch assets from vue example | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/public/index.html > public/index.html | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/public/sampleapp.html > public/sampleapp.html | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/app.vue > src/app.vue | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/main.js > src/main.js | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/public/luigi-config.js > src/luigi-config/luigi-config.es6.js | ||
|
|
||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/router.js > src/router.js | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/store.js > src/store.js | ||
|
|
||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/views/home.vue > src/views/home.vue | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/views/sample1.vue > src/views/sample1.vue | ||
| curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-vue/src/views/sample2.vue > src/views/sample2.vue | ||
|
|
||
| # generic assets | ||
|
|
||
| npm run buildConfig | ||
| npm run serve | ||
| ``` | ||
| <!-- accordion:end --> | ||
|
|
@@ -373,4 +392,4 @@ npm start | |
| ``` | ||
| <!-- accordion:end --> | ||
|
|
||
| 2. Open the directory where Luigi is installed. Search for the `luigi-config.js` file which you can use to configure Luigi [navigation](navigation-configuration.md), [authorization](authorization-configuration.md), [general settings](general-settings.md) and more. | ||
| 2. Open the directory where Luigi is installed. Search for the `luigi-config.js` file which you can use to configure Luigi [navigation](navigation-configuration.md), [authorization](authorization-configuration.md), [general settings](general-settings.md) and more. | ||