For Vue 2
This project skeleton was created as a starter with creating their own Vue component library using:
- Vue (v2)
- Rollup
- TypeScript
Package linking is a two-step process:
- Create a global symlink for a dependency with npm link. A symlink, short for symbolic link, is a shortcut that points to another directory or file on your system.
- Tell the application to use the global symlink with npm link some-dep.
cd ~/projects/component-library-dir
npm link # Step 1
cd ~/projects/main-app-dir
npm link fw-users # Step 2 fw-users is our package name
cd ~/projects/component-library-dir
npm run build
When we don’t want to use the local version anymore, delete the symlink. But careful, npm unlink is an alias for npm uninstall, it does not mirror the behavior of npm link.
cd ~/projects/main-app-dir
npm uninstall --no-save fw-users -f && npm install -f
Clean up the global link, though its presence won’t interfere with our main application.
cd ~/projects/component-library-dir
npm uninstall fw-users # Delete global symlink
First, make sure you have an NPM account and are logged into NPM using the npm login
command.
Then update the name
field in package.json
to reflect your NPM package name in your private or public NPM registry. Then run:
npm publish
The "prepublishOnly": "npm run build"
script in package.json
will execute before publish occurs, ensuring the build/
directory and the compiled component library exist.
Usage of the component will be:
<template>
<div>
<FwUserList></FwUserList>
</div>
</template>
<script>
import { FwUserList } from 'fw-users'
export default {
name: 'App',
components: {
FwUserList: FwUserList
}
}
</script>