/ Miscellaneous

Vue project template for authoring component and their use case

Vue project template for authoring component and their use case

vue-authoring-template

This template is to help authoring Vue component with it's use case in story-scenario (storybook) format.

vue init DrSensor/vue-authoring-template

In case you need to convince your Lead Dev to give you permission open-sourcing your work :

"Authoring component and publish it to npm for later use can help reduce complexity by delegating the work of finding bug and adding feature of big/long-running project to the community"

Motivation

  1. There is a time when developer involved in a project then build component to solve specific problem 😎
  2. One day this developer happen to do the same thing again in different project with slight alteration 😏
  3. Then doing it again, and again, and again 😫
  4. Now this developer have build many component with the same topic 😂
  5. So, why not publish it as a single component with that one topic in mind to npm? 😲
  6. However, the component must be showcased in mvce style to make it easy to understand and maintainable 😖
  7. As the time passed, he/she is to lazy to do that because no template/config/cli/whatever for authoring the component in that way :poop:

Features

  • Write your storybook story-scenario (a.k.a use case) in .vue single-file-component format, not .js or .jsx
  • Option to generate circleci config to:
    • publish vue component to npm and unpkg (need to git push --tags)
    • deploy storybook page to surge.sh
    • evaluate pull-requests and temporarily deploy storybook page to <name><#PR_number>.surge.sh (auto teardown when PR is merged)
  • Choose pre-installed and configured storybook addon:
  • Order the story and scenario alphabetically or manually re-order using Array|Object in src/stories/config.js
  • Auto generate README.md

Usage

vue init DrSensor/vue-authoring-template

After that, you can:

  • start in development mode
npm run dev # or
yarn dev
npm run deploy # or
yarn deploy
# see https://docs.npmjs.com/getting-started/semantic-versioning#semver-for-publishers
npm version [patch|minor|major]
npm publish
  • build vue component
# the output will be in dist/
npm run build:component # or
yarn build:component
  • build the storybook page
# the output will be in .storybook/dist/
npm run build:storybook # or
yarn build:storybook

Project Structure

.
├── package.json
├── .bilirc                 // choose and configure the component you want to package in here
├── .editorconfig
├── .gitignore
│
├── .circleci
│   └── config.yml
│
├── .storybook              // storybook related config
│   ├── addons.js
│   ├── config.js
│   └── webpack.config.js
│
└── src
    ├── components              // place 1 or more components to author here
    │   └── HelloWorld.vue
    │
    ├── mixins                  // if needed, reduce complexity by separating any long code as mixins
    │   ├── mix1.js
    │   └── mix2.js
    │
    └── stories                 // use-case/usage of the component written in story-scenario analogy
        ├── Story1
        │   └── Scenario1.vue
        ├── Story2
        ├── Story3
        ├── config.js           // config to re-order the story and the scenario
        └── index.js            // chain and add the addon here

Looking for suggestion!

  • How to customize style of the storybook
  • Authoring Vuex module? Is it necessary?
  • any others?

GitHub