創(chuàng)建項(xiàng)目

推薦使用 vue init webpack-simple project-name

webpack配置

var path = require("path");
var webpack = require("webpack");
const NODE_ENV = process.env.NODE_ENV;
const VueLoaderPlugn = require("vue-loader/lib/plugin");

module.exports = {
  entry: NODE_ENV == "development" ? "./src/main.js" : "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/", 
    filename: "v-drawer.js", // npm run build生成的文件名
    library: "v-drawer", // 指定的就是你使用require時(shí)的模塊名
    libraryTarget: "umd", // 指定輸出格式
    umdNamedDefine: true // 會(huì)對(duì) UMD 的構(gòu)建過(guò)程中的 AMD 模塊進(jìn)行命名。否則就使用匿名的 define
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"]
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {
            less: ["vue-style-loader", "css-loader", "less-loader"]
          }
        }
      },
      {
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", "less-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"
    },
    extensions: ["*", ".js", ".vue", ".json"]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  plugins: [new VueLoaderPlugn()]
};

if (process.env.NODE_ENV === "production") {
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]);
}

配置index.js

// 組件
import Drawer from "./components/Drawer";
import DrawerItem from "./components/Drawer-item";
// vuex的store文件
import drawerStore from "./store/drawer";

const components = [Drawer, DrawerItem];

// 這一步判斷window.Vue是否存在，因?yàn)橹苯右胿ue.min.js， 它會(huì)把Vue綁到Window上，我們直接引用打包好的js才能正常跑起來(lái)。
if (typeof window !== "undefined" && window.Vue) {
  window.Vue.component("v-drawer", components);
}

// opts是用戶傳入的store
const install = function(Vue, opts = {}) {
  if (!opts.store) {
    console.log("Please provide a store!");
  }
  // 動(dòng)態(tài)注冊(cè)store
  opts.store.registerModule("drawer", drawerStore);

  components.map(component => {
    Vue.component(component.name, component);
  });
};

if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  Drawer,
  DrawerItem
};

PS：注意在發(fā)布的時(shí)候，readme文件要提醒用戶注入vuex和store，例如：

// main.js
import txDrawer from "tx-drawer";
// 你項(xiàng)目的store
import store from "./store";
/*
 txDrawer內(nèi)部的store會(huì)注冊(cè)到你的項(xiàng)目的store;
 txDrawer的store名為drawer,使用了命名空間
*/
Vue.use(txDrawer, { store });

這樣我們組件內(nèi)部的store才能正常使用。

打包發(fā)布

1、 npm run build
2、npm pack會(huì)生成.tgz包，npm install xxx.tgz即可安裝到其他項(xiàng)目進(jìn)行調(diào)試。
3、到npm官網(wǎng)注冊(cè)賬號(hào)： https://www.npmjs.com/
4、npm login登錄個(gè)人賬號(hào)
5、npm publish發(fā)布。記得把.tgz包刪除，不然會(huì)連同tgz包一起發(fā)布。每次發(fā)布都要修改版本號(hào)，即package.json文件的"version": "0.0.1",

參考

demo：npm install tx-drawer
gitee：https://gitee.com/shiquan1442/tx-drawer/tree/master

從零開始開發(fā)一個(gè)vue組件打包并發(fā)布到npm (把vue組件打包成一個(gè)可以直接引用的js文件) - 進(jìn)軍的蝸牛 - 博客園 (cnblogs.com)