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内容：<script setup name="task">import { ref } from 'vue'const msg = ref('Vite + Vue3')const count = ref(0)</script><template><h1>{{ msg }}</h1></template><style scoped>.read-the-docs {color: #888;}</style>添加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_Storenode_modules/dist# local env files.env.local.env.*.local# Log filesnpm-debug.log*yarn-debug.log*yarn-error.log*# Editor directories and files.idea.vscode*.suo*.ntvs**.njsproj*.sln*.sw*# 以下是新增的# 要忽略目录和指定文件.vscodeexamples/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 -Dmian.js中添加全局引用//main.ts or main.jsimport { 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');组件中使用就是<task />