组件库私服-共用前端测试工程

1. 创建组件工程（my-vue-component）

如果是 node -v 是 20.10.0版本
npm create vite@8.0.0 my-vue-component -- --template vue --no-install

npm create vite@latest my-vue-component

#注意 
Install with npm and start now?
选择No
→ No 

cd my-vue-component

git init（方便标记改动）

pnpm install 或 npm install

npm run dev

1.1 回到idea编写测试组件

1.1.1 在 src/components 下新建 MyButton.vue

<template>
  <button class="my-btn" @click="handleClick">
    {{ text }}
  </button>
</template>

<script setup>
const props = defineProps({
  text: {
    type: String,
    default: '私有按钮组件'
  }
})

const emit = defineEmits(['click'])
const handleClick = () => emit('click')
</script>

<style scoped>
.my-btn {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

1.1.2 配置打包入口

在项目根目录新建 index.js：

import MyButton from './src/components/MyButton.vue'
// 下面三种方案，都有一样的问题：
//  import MyButton from '@gn-team/my-button' 不能用， import MyButton from '@gn-team/my-button' 可用

//方案1：

// 默认导出组件本身
export default MyButton

// 同时提供 install 方法用于插件注册
MyButton.install = (app) => {
    app.component('MyButton', MyButton)
}

// 也可以额外提供具名导出
export { MyButton }


//方案2：
// 标准写法
// const install = (app) => {
//     app.component(MyButton.name, MyButton)
// }
// // 重点在这里！！！
// export default {
//     install,
//     MyButton
// }
// // 具名导出
// export { MyButton, install }
//
//
// //方案3：
// MyButton.install = (app) => {
//     app.component('MyButton', MyButton)
// }
//
// // 这一句是关键！让 default 导出生效
// module.exports = MyButton
// module.exports.MyButton = MyButton

// 调用方：
// // 方式1：导入组件本身
// import MyButton from '@gn-team/my-button'
//
// // 方式2：导入组件并作为插件使用
// import { MyButton } from '@gn-team/my-button'
// app.use(MyButton)  // 或者 app.component('MyButton', MyButton)

1.1.3 修改 package.json

{
  "name": "@gn-team/my-button",
  "private": false,
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "set:registry": "npm config set registry http://192.168.1.10:8081/repository/npm-group/",
    "preinstall": "npm run set:registry"
  },
  "dependencies": {
    "vue": "^3.5.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "vite": "^7.1.7"
  }
}

注意：
"name": "@gn-team/my-button",@gn-team 是你的团队前缀，可自定义。这里要有@，或者不要/
"private": false, 这里不能是true
"version": "1.0.0",
"main": "index.js", 这是入口
"preinstall" 只在执行npm install 时触发，执行npm install xxx或者 npm run dev 都不会触发。这个触发后会设置set:registry。
    手动执行set也行：
    npm run set:registry
    npm config get registry

2. 创建测试导入组件工程（test-project）

如果是 node -v 是 20.10.0版本
npm create vite@8.0.0 test-project -- --template vue --no-install

npm create vite@latest test-project

#注意 
Install with npm and start now?
选择No
→ No 

cd test-project

git init（方便标记改动）

2.1 回到idea编写测试组件

2.1.1 编辑src/App.vue

<script setup>

// 这个会导入默认的install:f对象，不可用
// import MyButton from '@gn-team/my-button'
// 改为具名导入，而不是默认导入
import { MyButton } from '@gn-team/my-button'

const handleClick = () => {
  alert('成功啦！')
}
</script>

<template>
  <div>
    <MyButton text="我是私服按钮" @click="handleClick" />
  </div>

</template>

<style scoped>

</style>

2.1.2 编辑src/main.js(可选)

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// import MyButton from '@gn-team/my-button' // 导入插件

const app = createApp(App)
// app.use(MyButton) // 全局注册
app.mount('#app')

2.1.3 编辑package.json

{
  "name": "test-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --force",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@gn-team/my-button": "^1.0.0",
    "axios": "^1.16.1",
    "element-plus": "^2.14.0",
    "vue": "^3.5.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.6.2",
    "vite": "^5.4.10"
  }
}

说明：

vite 后增加 --force，可以强制刷新vite缓存

Vite 是什么？
Vite = 前端新一代开发工具（打包 + 热更新 + 预构建依赖）

前端构建工具对比（含缓存 / 预构建特性）