从0到1实现一个ui组件库

0.搭建vue

pnpm create vue

1.下载依赖

TypeScript 复制代码
{
  "name": "你的ui名",
  "version": "1.0.6",
  "type": "module",
  "license": "MIT",
  "keywords": [
    "vue3",
    "components",
    "library"
  ],
  "files": [
    "dist"
  ],
  "module": "dist/es/你的ui名.js",
  "main": "dist/umd/你的ui名.umd.cjs",
  "exports": {
    ".": {
      "import": "./dist/es/你的ui名.js",
      "require": "./dist/umd/你的ui名.umd.cjs"
    },
    "./style.css": {
      "import": "./dist/style.css",
      "require": "./dist/umd/style.css"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "pnpm build-es && pnpm build-umd && pnpm move-style",
    "build-es": "vite build --config vite.es.config.ts",
    "build-umd": "vite build --config vite.umd.config.ts",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "move-style": "move-file dist/es/style.css dist/style.css",
    "release": "release-it"
  },
  "peerDependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "sass": "^1.76.0",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0",
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.12.5",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "npm-run-all2": "^6.1.2",
    "prettier": "^3.2.5",
    "typescript": "~5.4.0",
    "vite": "^5.2.8",
    "vue-tsc": "^2.0.11",
    "move-file-cli": "^3.0.0",
    "release-it": "^17.2.1"
  },
  "release-it": {}
}

2.具体的项目结构可以通过下载我的npm包拿到

bash 复制代码
pnpm create cocovite

然后选uivite就行

3.实现

在components里新增组件后挂载到main和bundle.ts就行

然后输入pnpm run dev npm run release 实现一键部署到npm上

相关推荐
gnip3 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫4 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel5 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼5 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手9 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法9 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku9 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode9 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu9 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu9 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript