npm 上传组件

1. https://www.npmjs.com/settings/grabzjx/packages

   　

   注意 vue2/3引入方式不一样
   组件名字name:"用驼峰"
   env_d 
   declare module "grab-ui-test"
   import { GrabButtonTest } from 'grab-ui-test'
   const app = createApp(App)
   app.component('GrabButtonTest', GrabButtonTest)
   

   　　

2.  

3. 

    

   方法一
   import GrabButtonTest from '../components/grab-button-test.vue'
   const install = (Vue:any) => {
     Vue.component(GrabButtonTest.name, GrabButtonTest)
   }
   export { GrabButtonTest }
   export default install
   
   方法二
   import GrabButton from './index.js'
   const com = [GrabButton]
   const install = function (vue) {
     com.forEach((i) => {
       vue.component(i.name, i)
     })
   }
   
   export default install
   方法三
   import GrabButtonTest from '../components/grab-button-test.vue'
   const install = (Vue:any) => {
     Vue.component(GrabButtonTest.name, GrabButtonTest)
   }
   export default {
     install,
     GrabButtonTest
   }
   

   　　

   　　

   

    

   vue-cli-service build --target lib ./src/package/index.js --name grab-ui --dest grab-ui
   1,npm run package

   　　

   

    

   1,npm config set registry=https://registry.npmjs.org
   2,npm adduser/npm login
   3,npm publish
   https://www.npmjs.com/settings/grabzjx/packages
   

   　　react vite.config 文件配置

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import path, {resolve} from 'path';
   import { readFileSync } from 'fs'
   const packageJson = JSON.parse(
     readFileSync('./package.json', { encoding: 'utf-8' }),
   )
   const globals = {
     ...(packageJson?.dependencies || {}),
   }
   export default defineConfig({
     plugins: [react()],
     base: './',
     build: {
       lib: {
         // Could also be a dictionary or array of multiple entry points
         entry: resolve(__dirname, 'src/components/index.tsx'),
         name: 'grab-table-customs',
         // the proper extensions will be added
         fileName: 'grab-table-customs',
         formats: ['es', 'cjs'],
       },
   
       rollupOptions: {
         //排除不相关的依赖
         external: ['react', 'react-dom', ...Object.keys(globals)],
       },
       outDir: 'distnpm'
     },
     css: {
       preprocessorOptions: {
         less: {
           modifyVars: {
             // 更改主题在这里
             // 'primary-color': '#52c41a',
             // 'link-color': '#1DA57A',
             // 'border-radius-base': '2px'
           },
           javascriptEnabled: true
         }
       }
     },
     resolve: {
       alias: { '@@': __dirname, '@': path.resolve(__dirname, 'src') }
     },
     server: {
       host: '0.0.0.0',
       proxy: {
         '/api': {
           target: 'https://elm.cangdu.org',
           ws: false,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, '')
         }
       }
     }
   });