Based on element UI, do the secondary encapsulation of components, and publish to NPM

Secondary encapsulation of NPM component based on element UI

1. First, create a new project using Vue cli. I use it herevue uiVisualize the interface, and then search for the element UI plug-in in the plug-in. After the installation, the global reference.

2. Create the packages folder in the SRC directory. Next, create several files. The entire directory is the same as that of element. As follows:

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

3. demo.vue

   <template>
     <div>
       <p>Testing</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. modify package.json , add the following code on the existing basis

   {
     "Name": "Vue element UI dsras", // the name is used for publishing NPM. It can't be repeated with others, otherwise an error will be reported.
     "Version": "0.2.0", // version number
     "Private": false, // private
     "Description": "medical component test", // description
     "main": "lib/vue-element-ui- dsras.common.js "// entry
     "scripts": { 
       "lib": "vue-cli-service build --target lib --dest lib ./src/packages/ index.js "// the command packaged as a library is used before publishing to NPM
     }
   }

7. Publish to NPM

   • register
   • Sign innpm login
   • Switch NPM sourcenpm config set registry https://registry.npmjs.org
   • releasenpm publish
   • Switch back to Taobao source, convenient for other places to use npm config set registry https://registry.npm.taobao.org
8. Complete the release, use the same reference as element!