GH BLOGS

Appearance

组件库编写目录 ​

bash
 |-- components',           
  '    |   |-- index.ts',         
  '    |   |-- package.json',     
  '    |   |-- button',           
  '    |   |   |-- button.ts',    
  '    |   |   |-- button.vue',   
  '    |-- utils',
  '        |-- package.json',
  '        |-- with-install.ts',
 |-- components',           
  '    |   |-- index.ts',         
  '    |   |-- package.json',     
  '    |   |-- button',           
  '    |   |   |-- button.ts',    
  '    |   |   |-- button.vue',   
  '    |-- utils',
  '        |-- package.json',
  '        |-- with-install.ts',

给组件添加install方法(实现项目中全局使用) ​

ts
import type { App } from 'vue';

import { HButton } from './Button';
export { useCountDown } from './CountDown';

// 实现组件库全局注册
const HUI = {
  install: (app: App) => {
    [HButton].forEach((item) => {
      app.component(item.name, item);
    });
  },
};

// 使用组件库时可局部导出
export {
  HButton,
};

export default HUI;
import type { App } from 'vue';

import { HButton } from './Button';
export { useCountDown } from './CountDown';

// 实现组件库全局注册
const HUI = {
  install: (app: App) => {
    [HButton].forEach((item) => {
      app.component(item.name, item);
    });
  },
};

// 使用组件库时可局部导出
export {
  HButton,
};

export default HUI;

vite打包成库 ​

ts
// vite.config.ts
export default defineConfig({
  build: {
    outDir: 'lib',
    emptyOutDir: true,
    lib: {
      // 入口指向组件库入口模块
      entry: resolve(__dirname, 'packages/components/index.ts'),
      name: 'ghui',
      // 构建生成的文件名，与package.json中配置一致
      fileName: 'ghui',
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        globals: {
          // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
          vue: 'Vue',
        },
      },
    },
  },
})
// vite.config.ts
export default defineConfig({
  build: {
    outDir: 'lib',
    emptyOutDir: true,
    lib: {
      // 入口指向组件库入口模块
      entry: resolve(__dirname, 'packages/components/index.ts'),
      name: 'ghui',
      // 构建生成的文件名，与package.json中配置一致
      fileName: 'ghui',
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        globals: {
          // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
          vue: 'Vue',
        },
      },
    },
  },
})

npm发布package配置 ​

json
{
  "name": "vue-ghui",
  "version": "1.0.2",
  "private": false,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest --environment jsdom --root src/",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
  },
  "main": "./lib/ghui.umd.js",
  "module": "./lib/ghui.mjs",
  "exports": {
    ".": {
      "import": "./lib/ghui.mjs",
      "require": "./lib/ghui.umd.js"
    },
    "./lib/style.css": "./lib/style.css"
  },
  "files": [
    "package.json",
    "README.md",
    "LICENSE",
    "lib",
    "packages",
    "index.d.ts"
  ]
}
{
  "name": "vue-ghui",
  "version": "1.0.2",
  "private": false,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest --environment jsdom --root src/",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
  },
  "main": "./lib/ghui.umd.js",
  "module": "./lib/ghui.mjs",
  "exports": {
    ".": {
      "import": "./lib/ghui.mjs",
      "require": "./lib/ghui.umd.js"
    },
    "./lib/style.css": "./lib/style.css"
  },
  "files": [
    "package.json",
    "README.md",
    "LICENSE",
    "lib",
    "packages",
    "index.d.ts"
  ]
}

Copyright © 2023 YGHHJS