How to build uniapp component library with vite and vue3?

How to Build a UniApp Component Library with Vite and Vue 3?

1. Environment Setup and Project Initialization

First, confirm that Node.js and npm are installed. Then, initialize a new Vue 3 project using Vite.

bash
npm create vite@latest my-uniapp-library --template vue
cd my-uniapp-library
npm install

2. Installing UniApp-Related Dependencies

UniApp is a framework enabling the development of all frontend applications with Vue.js, supporting multi-platform compatibility through conditional compilation and other methods. To ensure compatibility with UniApp, install the necessary dependencies.

bash
npm install @dcloudio/vue-cli-plugin-uni @dcloudio/uni-mp-vue

3. Configuring Vite

To make Vite compatible with UniApp compilation, configure the required settings in vite.config.js.

javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [vue(), uni()]
})

4. Creating and Managing Components

Create a components directory in the project to store all components. For example, create a button component named MyButton.vue:

vue
<template>
  <button class="my-button">{{ label }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    label: String,
  },
}
</script>

<style scoped>
.my-button {
  padding: 10px;
  border: none;
  background-color: #007BFF;
  color: white;
  border-radius: 5px;
}
</style>

5. Component Export

Export all components uniformly from components/index.js to allow importing them via a single entry point.

javascript
import MyButton from './MyButton.vue';

export { MyButton };

6. Testing and Packaging

To ensure the quality of the component library, implement unit tests using jest and @vue/test-utils.

bash
npm install jest @vue/test-utils vue-jest@next @vue/vue3-jest babel-jest -D

Configure Jest and write tests. After completion, use Vite's build command to package the component library:

bash
npm run build

7. Publishing to NPM

After completing tests and packaging, publish your component library to NPM to enable other developers to utilize your components.

bash
npm login
npm publish

8. Documentation Writing

Finally, create clear documentation to make your component library user-friendly. Use tools like Docz to generate professional documentation.

Conclusion

The steps outlined above provide a foundation for building a UniApp component library with Vite and Vue 3. By following this approach, you can leverage Vite's rapid build capabilities and Vue 3's modern features to create efficient and maintainable component libraries.