乐趣区

关于javascript:基于elementui做组件的二次封装并发布到npm

基于 element-ui 做 npm 组件的二次封装

  1. 首先应用应用 vue-cli 创立新我的项目。我在这里应用 vue ui 可视化界面,而后在插件中搜寻 element-ui 插件。装置好后,全局援用。
  2. 在 src 目录下创立 packages 文件夹,上面在创立几个文件,整个目录和 element 的一样。如下:

    -src
        -packages
            -demo
                -src
                    demo.vue
                index.js
            index.js
  3. demo.vue

    <template>
      <div>
        <p> 测试 </p>
        <el-button>el-button</el-button>
      </div>
    </template>
    <script>
    export default {name: 'DsrasTest'}
    </script>
  4. -demo/index.js

    import DsrasTest from './src/dsras-test'
    
    DsrasTest.install = function(Vue) {Vue.component(DsrasTest.name, DsrasTest)
    }
    
    export default DsrasTest
  5. -packages/index.js

    import DsrasTest from './dsras-test'
    const components = [DsrasTest]
    
    const install = function(Vue) {
      components.forEach(component => {Vue.component(component.name, component);
      });
    }
    
    if (typeof window !== 'undefined' && window.Vue) {install(window.Vue);
    }
    
    export default {
      install,
      DsrasTest
    }
  6. 批改 package.json,在已有的根底上增加如下代码

    {
      "name": "vue-element-ui-dsras",  // 名称 公布 npm 应用,不能和他人的反复,不然会报错。"version": "0.2.0", // 版本号
      "private": false, // 是否公有
      "description": "医疗组件测试", // 形容
      "main": "lib/vue-element-ui-dsras.common.js", // 入口
      "scripts": {"lib": "vue-cli-service build --target lib --dest lib ./src/packages/index.js" // 打包成库的命令,公布到 npm 前应用}
    }
  7. 公布到 npm

    • 注册
    • 登录 npm login
    • 切换 npm 源 npm config set registry https://registry.npmjs.org
    • 公布 npm publish
    • 切换回淘宝源,不便其余中央应用 npm config set registry https://registry.npm.taobao.org
  8. 实现公布,应用的时候和 element 一样援用即可!
退出移动版