Tip: also consult the guidelines for the naming of things and coding standards.
- Install the
vf-component-generator
packageyarn add @visual-framework/vf-component-generator --dev
- Install Yeoman
- If you've come this far and you don't have
yo
, you should be able to install it withyarn global add yo@latest
- If you get stuck, see the official install guide
- If you've come this far and you don't have
- Create a new component
- Run
vf-component-generator
and answer the questions when prompted.- Type of component: See component guidance
- Name of component: See component naming guidance
- npm package: If you're making something interesting (probably not an 'element'), then saying 'yes' will allow the component to be shared as an optional part of the framework on npm.
- Your customised template component will:
- be in the
/components
directory. - contain a number of pre-generated files.
- be in the
- Run
- Maintain a
CHANGELOG.md
- Add a line of what is new in your component.
- Use sentence styling.
- Keep your notes, short and punchy.
- End your sentences with periods.
- https://github.com/visual-framework/vf-core/issues/1286
- Link to any related issues or discussions, such as the above.
- Add the
@import 'vf-your-component.scss';
to/assets/scss/styles.scss
. - Developing your component
- Edit your template files in the
/components/your-component-name
folder- For further guidance on component configuration, consult the comments in the component template files.
- Run
gulp vf-dev
to compile and preview the component
- Edit your template files in the
- Sharing you component back
- Publish it to npm; and/or
- If you think your component is useful to the global
vf-core
community, make a Pull Request or open an issue to discuss.