【UI库封装系列一】基于vue3封装自己的ui组件库流程

1.项目结构

2.vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Markdown from 'vite-plugin-vue-markdown'
import { prismjsPlugin } from 'vite-plugin-prismjs'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    //插件处理 支持vue和md 文件
    vue({ include: [/\.vue$/, /\.md$/]
  }),Markdown(),
  prismjsPlugin({
    languages: 'all', // 语言
    plugins: ['line-numbers','show-language','copy-to-clipboard','inline-color'],
    theme: 'tomorrow',// 主题
    css: true,
})
    ],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  build:{
    //设置打包配置
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        },
        format: 'esm',
      },
    },
    lib: {
      //设置打包入库
      entry: './packages/index.js',
      name: 'tzui'
    },
  }
})

3.packages/index.js

import zButton from "./button/index.js";
import zInput from "./input/index.js";
const components = [zButton,zInput]
const install =app=>{
components.forEach(component=> app.use(component))
}
const TZUI= {
    install,
}
// 按需导入
export {
    zButton,zInput
}
// 目的使得能够全局引入组件
export default TZUI;

5.packages/button组件结构

6.button/index.js 导出button组件

import zButton from './index.vue'
//注册
zButton.install = app=>{
    app.component(zButton.name, zButton)
}
export default zButton;

7.添加markdown-使用vue组件展示代码【需要vue-md的插件支持】

## 设置button
<script setup >
import preview from "@/components/preview.vue";
import demo1 from './demo1.vue'
import demo2 from './demo2.vue'
</script>
### 基础用法
<demo1/>
<preview cmpName='button'  demoName="demo1"></preview>
### 按钮类型
<demo2/>
<preview cmpName='button'  demoName="demo2"></preview>

8.发布到自己的私服

   npm publish http://localhost:8089

9.在其他项目使用该组件

  //切换私服安装
  npm install tzui
  app.use(tzui)