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

61次阅读

共计 1220 个字符，预计需要花费 4 分钟才能阅读完成。

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

demo.vue

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

-demo/index.js

import DsrasTest from './src/dsras-test'

DsrasTest.install = function(Vue) {Vue.component(DsrasTest.name, DsrasTest)
}

export default DsrasTest

-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
}

批改 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 前应用}
}

公布到 npm
- 注册
- 登录 npm login
- 切换 npm 源 npm config set registry https://registry.npmjs.org
- 公布 npm publish
- 切换回淘宝源，不便其余中央应用 npm config set registry https://registry.npm.taobao.org
实现公布，应用的时候和 element 一样援用即可！