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.
• Workflow
  • Choose "Single Component mode" after yarn sfc-init.
  • Remember to add "publishConfig": { "access": "public" } to scoped package's package.json.
  • Modify the version in scoped package's package.json below to 1.0.0, for better developing experence with lerna publish, since lerna will always bump the version when publishing.

# 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.

# 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 calling lerna version behind the scenes, for more information, check the doc.