关于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 一样援用即可！