基于 element-ui 做 npm 组件的二次封装
- 首先应用应用 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 一样援用即可!