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

news/2024/9/24 4:38:15/

0.搭建vue

        pnpm create vue

1.下载依赖

{"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包拿到

pnpm create cocovite

        然后选uivite就行

3.实现

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

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


http://www.ppmy.cn/news/1456374.html

相关文章

Qt QThreadPool线程池

1.简介 QThreadPool类管理一个QThread集合。 QThreadPool管理和重新设计单个QThread对象,以帮助降低使用线程的程序中的线程创建成本。每个Qt应用程序都有一个全局QThreadPool对象,可以通过调用globalInstance来访问该对象。 要使用其中一个QThreadPool…

KAN:Kolmogorov–Arnold Networks

KAN: Kolmogorov–Arnold Networks 论文链接:https://arxiv.org/abs/2404.19756 代码链接:https://github.com/KindXiaoming/pykan 项目链接:https://kindxiaoming.github.io/pykan/intro.html Abstract 受Kolmogorov-Arnold表示定理的启…

C++基础——深拷贝和浅拷贝

C中类的拷贝有两种:深拷贝,浅拷贝:当出现类的等号赋值时,即会调用拷贝函数 一、概念 浅拷贝:同一类型的对象之间可以赋值,使得两个对象的成员变量的值相同,两个对象仍然是独立的两个对象&#…

JWK和JWT 学习

JWK和JWT 介绍 JWK (JSON Web Key) 和 JWT (JSON Web Token) 是现代Web应用程序中用于安全通信的两个重要概念。它们都是基于JSON的,并且是OAuth 2.0和OpenID Connect等协议的核心组成部分。 官方文档 JWT官方网站 JWK和JWK Set的RFC文档 JWT的RFC文档 JWK (JS…

Docker基本操作 挂载数据卷

在创建一个容器的时候让容器挂载到一个数据卷: 命令:docker run --name mn -p 80:80 -v html:/usr/share/nginx/html -d nginx 这里的数据卷如果没有提前创好会自动创建 下边是命令解析 将容器挂载到一个数据卷之后 可以在查看数据卷的目录 在数据卷的目录可以找到容器的内容…

赋能企业数字化转型 - 易点易动固定资产系统与飞书实现协同管理

在当前瞬息万变的商业环境下,企业如何借助信息化手段提升管理效率,已经成为摆在各行各业面前的紧迫课题。作为企业数字化转型的重要一环,固定资产管理的信息化建设更是不容忽视。 易点易动作为国内领先的企业资产管理服务商,凭借其全方位的固定资产管理解决方案,助力众多企业实…

java对象和json对象互转

在网上找了一大堆 没找到合适的 import com.fasterxml.jackson.databind.DeserializationFeature; import com.fasterxml.jackson.databind.JavaType; import com.fasterxml.jackson.databind.ObjectMapper; import lombok.extern.slf4j.Slf4j;import java.io.IOException; im…

避雷!5.3分,新增1区被标记On Hold,共12本SCI/SSCI慎投!

本周投稿推荐 SSCI • 2/4区经管类,2.5-3.0(录用率99%) SCIE(CCF推荐) • 计算机类,2.0-3.0(最快18天录用) SCIE(CCF-C类) • IEEE旗下,1/2…