Vue-general-components is a quick development tool for VUE components based on VUe2, vuepress, rollup

Project background

In daily development, we often write a lot of components in a project, some are generic, some are very business, and some good components are sealed as the project closes; It will not say refined into the corresponding NPM repository; There are a lot of great UI libraries out there, like Element-UI, ant-design-Vue, etc., but you can’t add your own components to them, and you can’t change their components. So vuE-General-Components, a simple and quick project to develop VUE components, was born;

It is a one-click component project scaffolding, from build to publish to the NPM repository in 1 minute, don’t hurry to try!!

Project installation

Erection by scaffolding

yarn create vgc <project-name># NPX create-vgc 
      

yarn install # or NPM install

yarn dev
Copy the code

VGC namely vue – general – components

Or simply fork the VGC project

The build contains the following capabilities

  • Hello – world components
  • Component API documentation system
  • Component test cases
  • Component packaging
  • Component Version log

Component development

The new component

The Hello-World component comes with the demo, and the code includes simple multilingual (you can do without multilingual altogether), basic VUE instances, and SCSS styles

Multilingual components also need to be added to the Lang language package

<template> <div> <p class="demo-box"> This is VGC {{ t("hgc.helloworld.hello") }} {{ message }} demo </p> </div> </template> <script> import Locale from ".. /.. /.. /src/utils/mixins/locale.js"; export default { name: "HelloWorld", mixins: [Locale], data() { return { message: "world", }; }}; </script> <style lang="scss" scoped> .demo-box { font-size: 24px; font-weight: bold; } </style>Copy the code

If the project is not generated by the YARN Create VGC command, it is important to change the name in the corresponding package.json, as this is the name that is ultimately published to NPM

Component test cases

I introduced Jest, along with vue-test-utils, and added a simple HelloWorld test to the demo for reference;

A good software, test is essential

Package. The json configuration

"jest": {
  "moduleFileExtensions": [
    "js",
    "vue"
  ],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
  },
  "snapshotSerializers": [
    "<rootDir>/node_modules/jest-serializer-vue"
  ]
}
Copy the code

Component document

Vue official Vuepress is introduced into the document system, which is also the most convenient to use, mainly because Vuepress supports MD and some built-in peripherals, such as code display and emoji, which are not introduced separately, but directly built-in.

I added a plug-in of my own, vuepress-plugin-code-box, which supports code hiding to make the presentation diversified. Antd and Elementui are similar.

The default vuepress dev and build features are also supported, and you can view the Vuepress deployment documentation if you want to publish to Pages

Demo Instance Address

Component packaging

Rollup has been introduced for component packaging, and webpack is available for those who prefer it

  • ‘rollup-plugin-node-resolve’ // tells rollup how to find external modules
  • ‘rollup-plugin-commonjs’ // Convert commonJS modules to ES2015 for rollup processing
  • ‘rollup-plugin-vue’ // Handles vue files
  • ‘rollup-plugin-babel’ // Rollup Babel plugin, ES6 to ES5
  • ‘rollup-plugin-css-only’ // Extract CSS, no compression capability

Esm, MIN, UMD JS files and a CSS file are packaged

Component code submission specifications

The project contains husky hooks that automatically verify the commit code. Use the following commit specification.

Submit code

# or NPX git - cz
yarn cz:commit
Copy the code

Default options:

  • Feat: New function
  • Fix: fix the bug
  • Docs: Just changes to the document
  • Style: Changes that do not affect the meaning of the code (such as whitespace, formatting, missing semicolons)
  • Refactor: Code changes that are neither bug fixes nor new features
  • Perf: Code changes that improve performance
  • Test: Adds or modifies a test
  • Chore: Changes to build or helper tools, such as generating documents

You can modify the commit template, but only if you have a Git commit

Changelog generation

If your code is submitted through the above command, the Changelog production is a command line affair;

# npm run release
yarn release
Copy the code

It changes your version number and the corresponding Changelog document based on the commit record, making your component library commit very simple.

See the Git Commit specification Reference for more information

release

Finally, you just need to push it to the NPM repository

npm publish
Copy the code

You can develop locally using NPM Link soft links