A monorepo for READr UI Vue.js Componets.
- Lerna for managing monorepo workflow.
- vue-sfc-rollup for scaffolds a minimal setup for Vue Single File Component (SFC).
- Storybook with development environment for UI components.
- husky and lint-staged for running linters on git staged files.
- @vue/cli-service as a linter.
- @vue/cli-service-global for rapid prototyping a single Vue.js SFC.
- commitlint and commitizen for conventional commits.
Use yarn
instead of npm
, since we take advantage of Yarn Workspaces to increase the bootstrap performance.
For more information about Lerna + Yarn Workspaces, check this article.
# Install dependencies
yarn install
# Link local packages together and install remaining package dependencies
# https://github.com/lerna/lerna/tree/master/commands/bootstrap#readme
# you can omit npx if you had installed lerna globally.
npx lerna bootstrap
# Scaffolds a minimal setup for Vue Single File Component (SFC)
yarn sfc-init
- Naming
- Package's name is scoped with
@readr-ui
, for example:@readr-ui/new-component
. - Folder's name pattern of packages is:
/packages/readr-ui-*/
. - Entry SFC name pattern is:
readr-ui-*.vue
.
- Package's name is scoped with
- Workflow
- Choose "Single Component mode" after
yarn sfc-init
. - Remember to add
"publishConfig": { "access": "public" }
to scoped package'spackage.json
. - Modify the version in scoped package's
package.json
below to1.0.0
, for better developing experence withlerna publish
, since lerna will always bump the version when publishing.
- Choose "Single Component mode" after
# For rapid prototyping a single Vue.js SFC
yarn serve packages/readr-ui-*/src/readr-ui-*.vue
# Start the storybook at localhost:6006
yarn storybook
# Install package-1 to package-2
npx lerna add package-1 --scope=package-2
- For more information about
lerna add
, check the doc. - You could add local or remote package as dependency to packages in the current Lerna repo.
- Example of add remote package:
lerna add babel --scope=@readr-ui/app-header
. - Example of add local package:
lerna add @readr-ui/logo --scope=@readr-ui/app-header
.
- Example of add remote package:
# Lint all the .js and .vue files in the codebase
yarn lintall
# Fix all the lint errors and warnings
yarn lintfix
# Publish packages in the current project
npx lerna publish
- DO NOT PUSH COMMITS MANUALLY after commit your changes, let
lerna publish
do this job.lerna publish
will callinglerna version
behind the scenes, for more information, check the doc.