1、使用 vue init 初始化項目

我用的是webpack-simple模板，目的是為了縮小包體。

vue init webpack-simple my-first-vue-npm

如果沒有全局安裝@vue/cli-init，還需要先安裝@vue/cli-init

npm install -g @vue/cli-init
// or
yarn global add @vue/cli-init

安裝完@vue/cli-init之后后，重新執行vue init，填寫項目信息。因為我用習慣less，這里就不安裝sass。

image.png

“無腦三連”啟動項目，項目初始化完成。

cd my-first-vue-npm
npm install
npm run dev

2、創建 vue 組件

新建/src/component/index.vue跟/src/index.js兩個文件

image.png

/src/component/index.vue：按普通 vue 組件編寫即可

<template>
  <div>
    my-first-vue-npm
  </div>
</template>

<script>
  export default {};
</script>

/src/index.js：將編寫 vue 的 vue 組件導出

import MyFirstVueNpm from "./component";

export default MyFirstVueNpm;

修改app.vue，主要是用于dev環境調試，當然不改也是可以的。

<template>
  <div id="app">
    <MyFirstVueNpm />
  </div>
</template>

<script>
  import MyFirstVueNpm from "./component";

  export default {
    name: "app",

    components: {
      MyFirstVueNpm
    }
  };
</script>

3、修改 webpack.config.js

需要做三件事情：

1. 根據環境選擇不同的入口文件以及設置輸出文件名；
2. 設置打包格式為UMD，UMD模式是一種兼容模式，可同時以 AMD、CommonJS和globals形式輸出，這里可以回顧一下UMD的模塊定義：

(function(root, factory) {
  if (typeof define === "function" && define.amd) {
    // AMD. Register as an anonymous module.
    define(["b"], factory);
  } else if (typeof module === "object" && module.exports) {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory(require("b"));
  } else {
    // Browser globals (root is window)
    root.returnExports = factory(root.b);
  }
})(this, function(b) {
  //use b in some fashion.

  // Just return a value to define the module export.
  // This example returns an object, but the module
  // can return a function as the exported value.
  return {};
});

3. 剔除通用包，比如我寫的是vue 組件，那么引用之前就必須引入vue.js，所以我們可以在externals屬性里面剔除vue。

var entry = "./src/main.js";
var filename = "build.js";

if (process.env.NODE_ENV !== "development") {
  entry = "./src/index.js";
  filename = "my-first-vue-npm.min.js";
}

module.exports = {
  entry,
    output: {
        path: path.resolve(__dirname, "./dist"),
        publicPath: "/dist/",
        filename,
        libraryTarget: "umd",
        umdNamedDefine: true // 給 AMD 模塊命名，否則匿名
    },
    externals: {
        vue: "vue"
    },
    ...
}

4、修改 package.json

1. 為package.json添加屬性main，main屬性指定了程序的主入口文件，可以引用的時候簡化，例如原本需要require("my-first-vue-npm/dist/my-first-vue-npm.min.js")，現在只需要寫成require("my-first-vue-npm")；
2. 將private設置為 false，否則發布npm會失敗。

"main": "dist/my-first-vue-npm.min.js",
"private": false,

5、發布到 npm

1. 先打包npm run build一下；
2. 創建/.npmignore文件，忽略源文件以及配置文件等：

.*
/node_modules
/src
package-lock.json
webpack.config.js
index.html

3. 到npm創建一個賬號；
4. 需要查詢包名是否已存在，發布到npm：

// 如果之前設置過淘寶鏡像，則需要設置回來
npm config set registry https://registry.npmjs.org/
// 登錄npm，然后輸入賬號密碼
npm login    
// 發布包，每次發布都需要更改package.json里的version     
npm publish         
// 刪除包
npm unpublish       

至此將vue組件發布到npm就完成了，下面是如何調用，當然只是列舉了其中一種。

6、調用

<template>
    <div id="app">
        <MyFirstVueNpm />
    </div>
</template>

<script>
import MyFirstVueNpm from "my-first-vue-npm";

export default {
    name: "App",

    components: {
        MyFirstVueNpm
    }
};
</script>

7、示例

最后提一下我最近發的npm包，這是一個基于Vue.js設置移動端h5顯示方向（橫屏或者豎屏）的vue組件，有興趣可以了解下https://www.npmjs.com/package/vue-orient。

參考文章

https://www.cnblogs.com/tzyy/p/5193811.html
https://www.cnblogs.com/heyushuo/p/10177795.html
https://www.cnblogs.com/suoni/p/11717922.html