創(chuàng)建項目

pnpm create vite

image.png

模版在這里選擇的是 vue vue-ts

增加sass支持

為了編寫樣式方便需要增加一下對 sass 的支持

cd test
pnpm install
pnpm add sass -D

創(chuàng)建組件

在 src/components 下面新建一個 Button 目錄
在新建的Button目錄創(chuàng)建 一個 index.ts 和 index.vue

其中 index.vue 編寫最簡單的組件代碼

<template>
  <button class="button"><slot /></button>
</template>

<style lang="scss">
.button {
  display: block;
  height: 32px;
  line-height: 32px;
  border: 0;
  border-radius: 2px;
  text-align: center;
  min-width: 100px;
  font-size: 14px;
  color: #fff;
  background: #0ABCAA;
}
</style>

index.ts 代碼如下

import { App } from 'vue'
import Button from './index.vue'

Button.name = 'e-button'

Button.install = (app: App) => {
  app.component(Button.name, Button)
}

export default Button

在 src/components 目錄創(chuàng)建 index.ts 導出多個組件 代碼如下

import { App } from 'vue'
import Button from './Button'


const components = [Button]

const install = (app: App) => {
  components.map(item => {
    app.component(item.name, item)
  })
}

export default {
  install,
  ... components
}

此時 e-button 組件代碼全部開發(fā)完成。
可以在 mian.ts 里面全局引入進行測試

import { createApp } from 'vue'
import App from './App.vue'
import Ezos from './components'

const app = createApp(App)
app.use(Ezos)
app.mount('#app')

之后就可以在頁面上使用 e-button 組件 測試組件沒有問題后可以進行編譯并發(fā)布

修改配置文件 vite.config.ts

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/components/index.ts'),
      name: 'Ezos',
      fileName: (format) => `ezos.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

執(zhí)行打包操作

pnpm run build

查看 dist 目錄會生成三個文件

ls -al
-rw-r--r--  1 macos  staff  1557  4  6 20:29 ezos.es.js
-rw-r--r--  1 macos  staff   982  4  6 20:29 ezos.umd.js
-rw-r--r--  1 macos  staff   158  4  6 20:29 style.css

修改 package.json

{
  "name": "@ezos/button",
  "private": false,
  "version": "0.0.1",
  "main": "./dist/ezos.umd.js",
  "module": "./dist/ezos.es.js",
  "exports": {
    ".": {
      "import": "./dist/ezos.es.js",
      "require": "./dist/ezos.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.31"
  },
  "devDependencies": {
    "@types/node": "^17.0.23",
    "@vitejs/plugin-vue": "^2.3.1",
    "sass": "^1.49.11",
    "typescript": "^4.6.3",
    "vite": "^2.9.1",
    "vue-tsc": "^0.33.9"
  },
  "files": [
    "package.json",
    "dist"
  ]
}

執(zhí)行發(fā)布操作

npm login
npm publish --access public

組件發(fā)布完成
The end ..................................................