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