从0到1，发布组件到npm

目标：

从0到1，将自己的组件发布到npm库，

工程下载链接​​​​​​​

工程搭建：

创建vue工程，距离命令如下

1. vue create first-package
2. 
3. 选择默认Default，然后回撤键等待工程初始化完成。
4. 

---

npm账号申请：

账号申请步骤如下：

• 账号申请
• 
• 申请成功进行登录，邮箱一个登录码，填写，然后登录即可。
• 
• 查看npm库指向  命令为： npm config list 
• 
• 如果库指向不对，请进行修改 命令为：npm config set registry https://registry.npmjs.org/
• 进行npm账号登录，填写用户名，密码，邮箱，邮箱接收的登陆校验码，登录成功会有如下提示
• 

创建组件：

创建需要上传npm的组件：

• 这里创建两个组件为 XplusConfig.vue和 XplusEdtor.vue
• 
• XplusConfig.vue代码片段

• <template>
    <div>
      <div>我是从npm库下载的插件，当前导入组件为：XplusConfig</div>
      <div v-for="(item,index) in dataConfig" :key="`Xplus-edtor${index}`">
        <div>名字：{{item.name}}</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "XplusConfig",
    props:{
      dataConfig:{
        type:Array,
        default:()=>{
          return []
        }
      }
    },
    data() {
      return {};
    },
  };
  </script>
  
  <style scoped>
  </style>

• XplusEdtor.vue代码片段

• <template>
    <div>
      <div>我是从npm库下载的插件，当前导入组件为：XplusEdtor</div>
      <div class="iconfont icon-wj-sps"></div>
      <div class="iconfont icon-wj-djjl"></div>
      <div class="iconfont icon-wj-chwj"></div>
      <div v-for="(item,index) in dataConfig" :key="`Xplus-edtor${index}`">
        <img alt="Vue logo" src="../assets/logo.png">
        <div>名字：{{item.name}}</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "XplusEdtor",
    props:{
      dataConfig:{
        type:Array,
        default:()=>{
          return []
        }
      }
    },
    data() {
      return {};
    },
  };
  </script>
  
  <style scoped>
  </style>

• vue.config.js打包设置：

• "use strict";
  module.exports = {
      //build输出文件名称
      outputDir: 'lib',
      //生产部输出不map文件
      productionSourceMap: false,
      //url-loader默认esMudule会开启，造成img图像src变成“[object Module]“无法正确加载的问题。需设置为【esModule:false】
      //1024*1000 小于1000KB即1M图片文件文件会输出为base64。
      chainWebpack: config => {
          config.module
              .rule('images')
              .use('url-loader')
              .loader('url-loader')
              .tap(options => Object.assign(options, { limit: 1024*1000 ,esModule:false}))
      }
  
  };
  

• 创建.npmignore文件，用来处理打包上传忽略文件

• 创建组件导出文件index.js

• 

   

  // eslint-disable-next-line no-unused-vars
  import Vue from 'vue'
  //字体库
  import '@/assets/iconfont/iconfont.css'
  
  //导出组件
  import XplusEdtor from './components/XplusEdtor.vue'
  import XplusConfig from './components/XplusConfig.vue'
  
  //当前输出版本号
  let version = require("../package.json").version
  
  //组件
  const components = [
    XplusEdtor,
    XplusConfig
  ]
  
  // eslint-disable-next-line no-unused-vars
  const install = function (Vue, opts = {}) {
    //判断组件是否被安装
    if(install.installed) return;
    //组件全局注册
    components.forEach(component => {
      Vue.component(component.name, component)
    })
  }
  
  /* 支持使用标签的方式引入 */
  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
  }
  
  //导出的对象必须具备install,才能被Vue.use() 方法进行组件安装。
  //version版本号，可忽略。
  export default {
    version,
    install,
  
    XplusEdtor,
    XplusConfig
  }
  

 进行组件的打包：

  组件打包准备：

•  组件加载指向，组件打包入口。

• 

  "build-bundle": "vue-cli-service build --target lib --name XPlusEditor ./src/index.js"

• 执行打包命令 npm run build-bundle

• 

• 组件npm发布 npm publish

• 

• npm查看发布的组件

  npm下载发布的组件

   下载已发布的组件查看是否正常：

•  下载插件并进行注册。

• 

• 组件使用

• 

• 效果预览

• 

• 到此我们的组件发布到npm已完成。