@intellias/menu v1.1.51
intems-menu
Project setup
npm install
Compiles and minifies for production
npm run dev
Lints and fixes files
npm run lint
NPM publish guideline:
- Login to NPM
If you aren't already logged in, you should use corporate npm account(intems) to get access to this package, as it's private on npm. Use user that's added as a collaborator to organization, or organization account.
npm login
- Build
npm run dev
- Publish
npm publish
Introduction
Entry point of the project is "wrapper.ts" file. Here our component is registered, all data transfered to it from options parameter. MenuOptions interface is declaring, which options can be passed when importing module. If there's a demand to add anything new, you can extend this interface and add necessary data. It's automatically parsed and sent as props to "./Menu.vue" component.
Using the Package
Since now have our package published, Let's take a look at how we can use this package in other repositories
To Install
npm install --save @intellias/menu
Once you have installed the package, in your entry file of the repository (wrapper.ts) if you are using it in a Vue CLI project. Write the import command
import MainMenu, { MenuOptions, MenuLayout } from '@intellias/menu';
// Importing necessary chunks for dynamic modules from menu( will be fixed if moving to webpack ^5.0.0)
import '@intellias/menu/dist/js/kudosForm.js';
import '@intellias/menu/dist/js/vendors~kudosForm.js';
import '@intellias/menu/dist/js/rejectComponent.js';
import '@intellias/menu/dist/js/vendors~kudosForm~rejectComponent.js';
import '@intellias/menu/dist/js/vue.js';
To install it globally.
const menuOptions: MenuOptions = {
// Pass your options here
};
Vue.use(MainMenu, menuOptions);
It's also necessary to install styles(You can import them to App.vue or main.scss file) as follows:
import '@intellias/menu/dist/css/main.css' // Menu css import must be here for correct adding to the DOM
MenuOptions explained
export interface MenuOptions {
layout: MenuLayout;
storeAdapter: keyable;
subMenus?: Submenus;
helperFunctions: Helpers;
// add more options here if needed
}
- layout -> provide specific value from MenuLayout enum (Lite/Portals)
- storeAdapter -> provide necessary Vuex store adapters( StoreAdapter)
- subMenus -> provide subMenuList object, optional. DEMANDED ONLY WHEN IMPORTING TO LITE PROJECT (@app/core/helpers/sub-menu/SubMenuList)
- helperFunctions -> provide necessary helpers functions (add getUrlPathByName from @/bootstrap/vue-router)
Updating the package and versioning
So you have the package published on NPM and now you need to change certain things on the package and re-publish it with new changes. This process involves a list of steps which I am listing down below.
Make changes to the codebase Before we can publish the changes we need to make sure the working directory is clean
git add -A
git commit -m "Fix bug in the package"
Increment the version number in NPM NPM follows the semantic version (semver) versions, in which each number denotes if it's a major release, minor change, or a patch fix. (Read details about semver here )
In this case, let's just bump the patch version by 1
npm version patch -m "Minor changes to the Hello World Text"
This will update the version number in your package.json file.
And since we have the GitHub repository linked to the npm. It will also create a tag for the bumped up version number.
Run the following command to check the latest tag
git tag
Next up, push the latest changes to git along with the new tag.
git push --follow-tags
Now you can go ahead and publish the new changes on npm
npm publish
Additional information
9 days ago
9 days ago
14 days ago
18 days ago
18 days ago
21 days ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago