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上