1. 在你的本地新建一個(gè)目錄

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

• 這會(huì)生成一個(gè)基本的package.json

2.安裝開發(fā)依賴

• 拿 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.創(chuàng)建目錄結(jié)構(gòu)

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 }

• 如果有多個(gè)組件，可按需導(dǎo)出

// 導(dǎo)入所有組件
import CommonMenu from './src/components/CommonMenu.vue'
import MallButton from './src/components/MallButton.vue'
import MallCard from './src/components/MallCard.vue'

// 放到數(shù)組里方便批量注冊(cè)
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
}

// 默認(rèn)導(dǎo)出，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. 打包 & 發(fā)布

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

# 發(fā)布到 npm
npm login
npm publish --access public

9. 項(xiàng)目中使用

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')

• 頁(yè)面里就可以直接使用

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

注意

1. 假設(shè)你在 mall-common-ui 里安裝了 element-ui 或 vue，如果你在 package.json 里把它放在 dependencies 或 devDependencies：

• devDependencies：只用于組件庫(kù)開發(fā)和編譯，本身不會(huì)被使用項(xiàng)目安裝到 node_modules。
• dependencies：會(huì)被打包到你的 npm 包里，但如果你直接發(fā)布源碼（.vue 文件），使用項(xiàng)目還是需要自己的 vue 和 element-ui，否則會(huì)報(bào)錯(cuò)或重復(fù)依賴。
• 簡(jiǎn)單說(shuō)，使用者項(xiàng)目必須自己安裝 peerDependencies 中的依賴。

情況                 安裝作用              使用項(xiàng)目是否需要安裝？
devDependencies     組件庫(kù)開發(fā)編譯          ? 使用項(xiàng)目不需要安裝
dependencies        會(huì)隨 npm 包一起安裝     ?? 如果是源碼包，仍需項(xiàng)目自己安裝 vue / element-ui
peerDependencies    告訴使用者必須安裝       ? 必須安裝，否則組件無(wú)法工作