@unyu/ant-form v1.6.1

Vue Component Library Starter

Create your own Vue 3 component library with TypeScript, Vite and VitePress.

Sooner or later, you will find that creating a component library is much better than having all components inside your app project. A component library force to you remove app specific logic from your components, making it easier to test and reuse them in other apps.

Once the components are in a library, documentation becomes critical. This starter project includes a documentation app powered by VitePress. It not only documents the usage of the component, but also provides a testing bed during the development of components. See the generated documentation app here.

Setup

When running docs:dev for the first time, you may encounter error like vitepress data not properly injected in app in your browser. Restart the server and reload the browser. Please refer to issue #30 for more details.

# install dependencies
npm install

# start the doc app with hot reload, great for testing components
npm run docs:dev

# build the library, available under dist
npm run build

# build the doc app, available under docs/.vitepress/dist
npm run docs:build

# preview the doc app locally from docs/.vitepress/dist
npm run docs:serve

You may use Netlify to auto build and deloy the doc app like this project does.

Develop and test locally

The best way to develop and test your component is by creating demos in docs/components/demo folder, as shown by the example components.

If you want to test the library in your Vue3 app locally:

• In the root folder of this library, run npm link. This will create a symbolic link to the library.
• In the root folder of your client app, run npm link my-lib. This will add the symbolic link to the node_modules folder in your client app.
• You can now import my-lib in your client app.

There is no need to add my-lib to your client app's dependency in this case.

If you made changes to the library, you will need to rebuild the library. Your Vue3 app shall hot reload when the building of library is completed.