如何从Vue.js组件创建npm包并进行本地测试？

我刚完成了一套本地Vue组件打包并在测试项目中调试的流程，给大家分享下具体步骤：

• 第一步：搭建测试容器项目
  先用vue-cli快速搭建了一个Vue.js项目，用来作为测试打包后组件的运行容器，这样能直接验证组件的实际表现。

• 第二步：打包本地Vue组件为npm包
  我把一个基础的Vue组件打包成了名为vue-npm-example的npm包，这个组件的代码如下：

  <template>
    <div id="vue-npm-example">
      <h1>{{ msg }}</h1>
    </div>
  </template>
  <script>
  export default {
    name: 'vue-npm-example',
    data() {
      return {
        msg: "Welcom..."
      }
    }
  }
  </script>
  

• 第三步：用npm link实现本地联调
  为了不用发布到npm仓库就能在测试项目里使用这个组件，我用了npm link命令：

  1. 先在组件包的根目录执行：

     npm link
     

  2. 再切换到测试项目的根目录，执行：

     npm link vue-npm-example
     

  这样测试项目就能直接导入并使用这个本地的组件包了，调试起来非常方便。

内容的提问来源于stack exchange，提问作者Kyle