从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上

相关推荐
时光追逐者10 分钟前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
无奈何杨12 分钟前
扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎
前端
ElasticPDF-新国产PDF编辑器22 分钟前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
hz.ts25 分钟前
Angular 国际化
javascript·ecmascript·angular.js
6武726 分钟前
Vue 数据传递流程图指南
前端·javascript·vue.js
goto_w30 分钟前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
夏天想37 分钟前
vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js
开发语言·javascript·pdf·vant
....49242 分钟前
antvX6节点全选后鼠标通过拖拉调整视图的展示位置
javascript·计算机外设·数据中台·antvx6
jakeswang1 小时前
查询条件与查询数据的ajax拼装
前端·ajax