上传自己的依赖包学习记录

最新推荐文章于 2024-03-27 16:53:46 发布

uidshen

最新推荐文章于 2024-03-27 16:53:46 发布

阅读量1.1k

点赞数

分类专栏： npm 文章标签： vue npm 前端

本文链接：https://blog.csdn.net/uidshen/article/details/124368626

版权

npm 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录学习如何发布自己的npm依赖包

开发组件

创建项目并在项目根目录下创建要存放组建的文件夹（如：packages）
在packages文件夹中新建组件文件夹（如：button文件夹，button文件夹下应该包括.js和.vue文件）
在packages文件夹中新建index.js作为组件入口并全部导出

开发一个button组件

// packages/button/index.vue
<template>
  <div :class="tClass">
    <button><slot></slot></button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  type: {
    type: String,
    default: 'default'
  }
})
const tClass = computed(() => {
  return ['s-button', `s-button-${props.type}`]
})
console.log(props.type)
</script>

<script>
export default {
  name: 'sButton'
}
</script>

<style lang="scss" scoped>
button {
  outline: none;
  border: 0;
  background: none;
  cursor: pointer;
}
.s-button {
  button {
    padding: 12px 24px;
    border-radius: 4px;
    border: 1px solid #f60;
    &:hover,&:focus {
      opacity: 0.8;
    }
  }
  &.s-button-default {
    button {
      background: #f60;
    }
  }
  &.s-button-success {
    button {
      background: green;
    }
  }
  &.s-button-warning {
    button {
      background: orange;
    }
  }
}
</style>

// packages/button/index.js
import sButton from './index.vue'

sButton.install = app => {
  app.component(sButton.name, sButton)
}

export default sButton

// packages/index.js
import sButton from "./button/index"

const install = app => {
  app.use(sButton)
}

const SUI = {
  install
}

export { sButton }
export default SUI

修改配置

// package.json
{
  "private": false,
  "version": "0.0.1",
  "main": "./dist/sxzui.umd.js",
  "module": "./dist/sxzui.es.js",
  "exports": {
    ".": {
      "import": "./dist/sxzui.es.js",
      "require": "./dist/sxzui.umd.js"
    }
  },
  "files": [
    "dist/*"
  ]
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    },
    lib: {
      entry: './packages/index.js',
      name: 'sxzui'
    }
  }
})