封装公共组件，发布npm

1. 在你的本地新建一个目录

mkdir mall-common-ui
cd mall-common-ui
npm init -y

• 这会生成一个基本的package.json

2.安装开发依赖

• 拿 vue2 element-ui举例

# Vue2 和模板编译器
npm install vue@2 vue-template-compiler@2 --save-dev

# Webpack & loader，用于打包
npm install webpack webpack-cli vue-loader vue-style-loader css-loader babel-loader @babel/core @babel/preset-env --save-dev

# Optional：Element-UI 作为 peerDependencies
npm install element-ui --save-peer

3.创建目录结构

mall-common-ui/
├─ package.json
├─ webpack.config.js
├─ index.js          # 入口文件
└─ src/
   ├─ components/
   │   └─ CommonMenu.vue
   └─ styles/
       └─ index.scss

4.编写组件

• src/components/CommonMenu.vue 示例：

<template>
  <div class="showBox">
    <div class="oneClassify" v-for="(item,index) in menuList" :key="index" @click="$emit('select-category', item, index)">
      <img :src="item.category_image" alt="" class="newces" />
      <div class="text">{{ item.category_name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonMenu",
  props: {
    menuList: { type: Array, required: true }
  }
}
</script>

5.写入口文件

• index.js

import CommonMenu from './src/components/CommonMenu.vue'

CommonMenu.install = function(Vue) {
  Vue.component(CommonMenu.name || 'CommonMenu', CommonMenu)
}

export default CommonMenu

export { CommonMenu }

• 如果有多个组件，可按需导出

// 导入所有组件
import CommonMenu from './src/components/CommonMenu.vue'
import MallButton from './src/components/MallButton.vue'
import MallCard from './src/components/MallCard.vue'

// 放到数组里方便批量注册
const components = [
  CommonMenu,
  MallButton,
  MallCard
]

// 定义 install 方法，支持 Vue.use()
const install = function(Vue) {
  components.forEach(component => {
    Vue.component(component.name || component.__file.split('/').pop().replace('.vue', ''), component)
  })
}

// 支持按需引入
export {
  CommonMenu,
  MallButton,
  MallCard
}

// 默认导出，Vue.use() 全局安装
export default {
  install
}

6.配置 Webpack 打包

• webpack.config.js 示例（UMD 打包）：

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'mall-common-ui.js',
    library: 'mallCommonUI',
    libraryTarget: 'umd',
    globalObject: 'this'
  },
  externals: {
    vue: 'Vue',
    'element-ui': 'ELEMENT'
  },
  module: {
    rules: [
      { test: /\.vue$/, loader: 'vue-loader' },
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: ['vue-style-loader','css-loader'] }
    ]
  },
  plugins: [new VueLoaderPlugin()]
}

7.配置 package.json

{
  "name": "mall-common-ui",
  "version": "1.0.0",
  "main": "dist/mall-common-ui.js",
  "peerDependencies": {
    "vue": "^2.6.0",
    "element-ui": "^2.15.0"
  },
  "devDependencies": {
    "vue": "^2.6.0",
    "vue-template-compiler": "^2.6.0",
    "webpack": "^4.46.0",
    "vue-loader": "^15.9.8",
    "babel-loader": "^8.0.0"
  }
}

8. 打包 & 发布

# 打包
npx webpack --config webpack.config.js

# 发布到 npm
npm login
npm publish --access public

9. 项目中使用

npm install mall-common-ui

• main.js

import Vue from 'vue'
import App from './App.vue'
import mallCommonUI from 'mall-common-ui'

Vue.use(mallCommonUI)

new Vue({
  render: h => h(App)
}).$mount('#app')

• 页面里就可以直接使用

<CommonMenu :menuList="menuList" @select-category="handleCategory"/>

注意

1. 假设你在 mall-common-ui 里安装了 element-ui 或 vue，如果你在 package.json 里把它放在 dependencies 或 devDependencies：

• devDependencies：只用于组件库开发和编译，本身不会被使用项目安装到 node_modules。
• dependencies：会被打包到你的 npm 包里，但如果你直接发布源码（.vue 文件），使用项目还是需要自己的 vue 和 element-ui，否则会报错或重复依赖。
• 简单说，使用者项目必须自己安装 peerDependencies 中的依赖。

情况                 安装作用              使用项目是否需要安装？
devDependencies     组件库开发编译          ❌ 使用项目不需要安装
dependencies        会随 npm 包一起安装     ⚠️ 如果是源码包，仍需项目自己安装 vue / element-ui
peerDependencies    告诉使用者必须安装       ✅ 必须安装，否则组件无法工作