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上