引用方式

在html中script标签直接引入或将打包后的文件放入node_modules中（也可以npm i 包名，此方式需要将包npm publish）
```
<script src="https://www.xx.com/umd/index.js"></script>
```

使用：全局挂载，单页面就可以直接使用了

import umdComponent from 'umdComponent';
// 全局组件挂载
Vue.use(umdComponent)

组件包项目

webpack配置文件

 var path = require("path");
 var webpack = require("webpack");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const VueLoaderPlugin = require("vue-loader/lib/plugin");

 module.exports = {
 entry: "./src/main.js",
 output: {
 path: path.resolve(\_\_dirname, "./dist"),
 publicPath: "/",
 filename: "index.js",
 library: "umd",
 libraryTarget: "umd",
 umdNamedDefine: true,
 },
 module: {
 rules: \[
 {
 test: /.scss$/,
         use: ["vue-style-loader", "css-loader", "sass-loader"],
       },
       {
         test: /\.css$/,
 use: \["vue-style-loader", "css-loader"],
 },
 {
 test: /.vue$/,
         loader: "vue-loader",
       },
       {
         test: /\.js$/,
 loader: "babel-loader",
 exclude: /node\_modules/,
 },
 {
 test: /.(png|jpg|gif|svg)$/,
         loader: "file-loader",
         options: {
           name: "[name].[ext]?[hash]",
         },
       },
     ],
   },
   resolve: {
     alias: {
       vue$: "vue/dist/vue.esm.js",
 "@": path.resolve("src"),
 },
 extensions: \["\*", ".js", ".vue", ".json"],
 },
 devServer: {
 historyApiFallback: true,
 noInfo: true,
 overlay: true,
 },
 performance: {
 hints: false,
 },
 };

 if (process.env.NODE\_ENV === "production") {
     module.exports.plugins = (module.exports.plugins || \[]).concat(\[
     new webpack.DefinePlugin({
     "process.env": {
     NODE\_ENV: '"production"',
     },
     }),
     new VueLoaderPlugin(),
     new UglifyJsPlugin({
     uglifyOptions: {
     compress: {
     warnings: false,
     drop_debugger: true,
     drop_console: true,
     },
     },
     sourceMap: true,
     parallel: true,
     }),
     new webpack.LoaderOptionsPlugin({
     minimize: true,
     }),
     ]);
 } else {
     module.exports.devtool = "#source-map";
 }

2.main.js

import Pagination from './components/Pagination'

const umdComponent = {
    install(Vue, options) {
    //分页组件
    Vue.component(Pagination.name, Pagination);
    
    }
}

if (typeof window !== 'undefined' && window.Vue) {
window.umdComponent = umdComponent;
Vue.use(umdComponent)
}

export{
    umdComponent
}

第三方组件包(vue2)

引用方式

组件包项目