vite+js+v3简略搭建（笔记用）

原作者：https://juejin.cn/post/7119827361092108301?searchId=20240724094258A72138D981DC0419C33E

1.npm create vite@latest # 使用npm安装vite脚手架  2.先install项目，然后改造： 	修改：./src -> ./examples 	新增：./packages（该文件夹用于存放开发的组件） 	找到项目根目录下的index.html文件，将里面的script标签的src属性内容由/src/main.js替换为/examples/main.js，即可重新访问本地 	 3.编写组件，这里我啥也不写，就一个页面塞点简单内容，当作一个小组件 	组件位置packages\TaskName\src\task.vue 	内容： 	 	 	 	 	 	添加packages\TaskName\index.js文件用于导出该组件： 	import TaskName from './src/task.vue'; 	 	TaskName.install = (App) => { 		App.component(TaskName.__name, TaskName); 	}; 	 	export default StarrySky; 	添加packages\index.js文件，用于导出所有的组件 	import TaskName from './TaskName';  	//按需引入 	export { TaskName}; 	const components = [TaskName]; 	const install = (App) => { 		components.forEach((item) => { 			App.component(item.__name, item); 		}); 	}; 	export default { 		install, 	}; 	 4.vite.config.js文件修改 	输出内容到lib文件夹，打包入口文件设置为./packages/index.js文件 	import { defineConfig } from 'vite'; 	import vue from '@vitejs/plugin-vue'; 	import { resolve } from 'path'; 	 	export default defineConfig({ 		plugins: [vue()], 		build: { 			outDir: 'lib', 			lib: { 				entry: resolve(__dirname, 'packages/index.js'), //指定组件编译入口文件 				name: 'Vue3ViteDemo', 				fileName: 'vue3-vite-demo', 			},//库编译模式配置 			rollupOptions: { 				// 确保外部化处理那些你不想打包进库的依赖 				external: ['vue'], 				output: { 					// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 					globals: { 						vue: 'Vue', 					}, 				}, 			},// rollup打包配置 		}, 	}); 	 5.执行npm run build ,会生成lib文件夹，里面包含了UMD、ESM规范打包的几个js库文件，还有css样式文件，整个组件库文件最终都会输出在lib文件夹下  6.修改package.json配置 	{ 	  "name": "vue3-vite-demo",//名字 	  "private": false,   //这个要改掉的，设为私有不能上传的 	  "version": "0.0.1", //版本号。每次更新都得修改 	  "type": "module", 	  "keywords": [ 	    "vite-demo" //npm上搜索的关键字 	  ], 	  "scripts": { 	    "dev": "vite", 	    "build": "vite build", 	    "preview": "vite preview" 	  }, 	  "files": [ 	    "lib" 	  ], 	  "main": "lib/vue3-vite-demo.umd.js",//包函数入口文件 	  "module": "lib/vue3-vite-demo.es.js",//ESM标准入口 	  "exports": { 	    "./lib/style.css": "./lib/style.css",//css文件需要暴露否则样式引入会报错 	    ".": { 	      "import": "./lib/vue3-vite-demo.js", 	      "require": "./lib/vue3-vite-demo.umd.js" 	    } 	  }, 	  "dependencies": { 	    "vue": "^3.4.31" 	  }, 	  "devDependencies": { 	    "@vitejs/plugin-vue": "^5.0.5", 	    "vite": "^5.3.4", 	  } 	} 	 7.设置忽略文件 根目录添加 .npmignore文件 	.DS_Store 	node_modules 	/dist 	 	# local env files 	.env.local 	.env.*.local 	 	# Log files 	npm-debug.log* 	yarn-debug.log* 	yarn-error.log* 	 	# Editor directories and files 	.idea 	.vscode 	*.suo 	*.ntvs* 	*.njsproj 	*.sln 	*.sw* 	 	# 以下是新增的 	# 要忽略目录和指定文件 	.vscode 	examples/ 	packages/ 	public/ 	vite.config.js 	*.map 	*.html 8.npm login 登录 登录前需要切一下官方的源 npm config set registry https://registry.npmjs.org  有时候可能要科学上网，不行就只能构建私有库了  9.npm publish 推送  10.使用 	npm install  vue3-vite-demo @latest -D 	mian.js中添加全局引用 	//main.ts or main.js 	import { createApp } from 'vue' 	import Vue3ViteDemo from 'vue3-vite-demo'; 	import 'vue3-vite-demo/lib/style.css'; 	import './style.css' 	import App from './App.vue' 	 	const app = createApp(App); 	 	app.use(Vue3ViteDemo); 	app.mount('#app');   	组件中使用就是