diff options
author | Patrick Williams <patrick@stwcx.xyz> | 2022-12-08 15:13:13 +0300 |
---|---|---|
committer | Patrick Williams <patrick@stwcx.xyz> | 2022-12-08 15:13:13 +0300 |
commit | 7385e139b0c9efca7430458cee982e63e282f4ae (patch) | |
tree | 1bbdb0164e556b76eec72cb558c66974c8f95dd8 /docs/customization/build.md | |
parent | b24a483eda5ca0b0ecdb4f0c61b90d76d0d8e1e0 (diff) | |
download | webui-vue-7385e139b0c9efca7430458cee982e63e282f4ae.tar.xz |
prettier: re-format
Prettier is enabled in openbmc-build-scripts on Markdown, JSON, and YAML
files to have consistent formatting for these file types. Re-run the
formatter on the whole repository.
Change-Id: I2804ee3ab5ff6bcbf986b028db2fafec8e616779
Signed-off-by: Patrick Williams <patrick@stwcx.xyz>
Diffstat (limited to 'docs/customization/build.md')
-rw-r--r-- | docs/customization/build.md | 76 |
1 files changed, 30 insertions, 46 deletions
diff --git a/docs/customization/build.md b/docs/customization/build.md index b10fd9db..4bdbd50a 100644 --- a/docs/customization/build.md +++ b/docs/customization/build.md @@ -26,19 +26,14 @@ VUE_APP_ENV_NAME=ibm ## Store -:::tip -[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the -application's API calls. -::: +:::tip [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain +the application's API calls. ::: 1. If making customizations to the default store, add `CUSTOM_STORE=true` key value pair to the new .env file. -2. Create a `<ENV_NAME>.js` file in `src/env/store` - :::danger - The filename needs to match the `VUE_APP_ENV_NAME` value defined in the - .env file. The store import in `src/main.js` will resolve to this new - file. - ::: +2. Create a `<ENV_NAME>.js` file in `src/env/store` :::danger The filename needs + to match the `VUE_APP_ENV_NAME` value defined in the .env file. The store + import in `src/main.js` will resolve to this new file. ::: 3. Import the base store 4. Import environment specific store modules 5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule` @@ -58,24 +53,17 @@ export default store; ## Router -:::tip -[Vue Router](https://router.vuejs.org/guide/) determines which pages are -accessible in the UI. -::: +:::tip [Vue Router](https://router.vuejs.org/guide/) determines which pages are +accessible in the UI. ::: 1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key value pair to the new .env file. -2. Create a `<ENV_NAME>.js` file in `src/env/router` - :::danger - The filename needs to match the `VUE_APP_ENV_NAME` value defined in the - .env file. The routes import in `src/router/index.js` will resolve to this - new file. - ::: -3. Define new [routes](https://router.vuejs.org/api/#routes). - :::tip - Use static imports (over lazy-loading routes) to avoid creating separate - JS chunks. Static imports also helps to keep the total build size down. - ::: +2. Create a `<ENV_NAME>.js` file in `src/env/router` :::danger The filename + needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The + routes import in `src/router/index.js` will resolve to this new file. ::: +3. Define new [routes](https://router.vuejs.org/api/#routes). :::tip Use static + imports (over lazy-loading routes) to avoid creating separate JS chunks. + Static imports also helps to keep the total build size down. ::: 4. Add default export ## App navigation @@ -88,13 +76,11 @@ in src/components/AppNavigation/AppNavigation.vue. 1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key value pair to the new .env file. -2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation` - :::danger - The filename needs to match the `VUE_APP_ENV_NAME` value defined in the - .env file. The AppNavigationMixin import in +2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation` :::danger + The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env + file. The AppNavigationMixin import in `src/components/AppNavigation/AppNavigation.vue` will resolve to this new - file. - ::: + file. ::: 3. Your custom mixin should follow a very similar structure to the default AppNavigationMixin.js file. It should include a data property named `navigationItems` that should be an array of of navigation objects. Each @@ -106,22 +92,20 @@ in src/components/AppNavigation/AppNavigation.vue. :::tip [Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/) -allows for easy visual customizations. -::: +allows for easy visual customizations. ::: 1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key value pair to the new .env file. -2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles` - :::danger - The filename needs to match the `VUE_APP_ENV_NAME` value defined in the - .env file. The webpack sass loader will attempt to import a file with this - name. +2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles` :::danger The + filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env + file. The webpack sass loader will attempt to import a file with this name. ::: -3. Add style customizations. Refer to [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/) - for details about [color - overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults) - and [other customizable - options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options). +3. Add style customizations. Refer to + [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/) + for details about + [color overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults) + and + [other customizable options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options). Example for adding custom colors @@ -145,9 +129,9 @@ $success: lime; ## Production build -Run npm build script with vue-cli `--mode` [option -flag](https://cli.vuejs.org/guide/mode-and-env.html#modes). This requires -[corresponding .env file to exist](#setup). +Run npm build script with vue-cli `--mode` +[option flag](https://cli.vuejs.org/guide/mode-and-env.html#modes). This +requires [corresponding .env file to exist](#setup). ``` npm run build -- --mode ibm |