***公司vue项目基于element-ui实现，很多地方都回多次用到表格、表单、弹窗等组件，于是就基于element-ui的这几个组件进行二次封装发布到npm上，保证任何基于element-ui的vue项目都可以使用这套插件。***
> 下面是vue2.X的项目，vue3对应的element-plus不是很稳定，就没用。 # 一、准备 #### 1. 创建一个vue2的工程项目目录结构 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/152e2a5394824fd899a5e2fe38a6bfd3~tplv-k3u1fbpfcp-watermark.image?) #### 2. 安装element-ui并引入 > npm i element-ui -S #### 3. 新建文件 `src`文件下自定义`elementPlugin`文件夹，用于封装用。
`elementPlugin`文件夹下自定义添加`index.js`文件（总的入口文件）和`Cz-Table`文件夹。
`Cz-Table`文件夹下定义一个`index.vue`文件。
如图： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6739f211d7a4aaba711e0d19e696249~tplv-k3u1fbpfcp-watermark.image?) # 二、开发 #### 1. 写要封装的组件 `index.vue`文件中封装element-ui的Table组件，这里就不封装了，测试用，直接用放入官网组件案例。 ```index.vue ``` > ps： vue文件中必须要写name，下面组件引入注册会用到 #### 2.入口文件index.js 在入口文件中引入书写好的`index.vue`文件，然后进行注册两种方法：
1、使用`import`导入操作 ```index.js import CzTable from './Cz-Table/index.vue'; ... ... import xxx from './xxx/xxx.vue'; const components = [ CzTable, ..., xxx ] /* * install的固定写法 */ const install = (Vue) => { if (install.installed) return // 判断是否安装注册过 components.forEach(component => Vue.component(component.name, component)) // 遍历并注册组件 } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) // window中有Vue时去install() } export default { install } ``` 2、使用脚手架中的`require.context()`获取vue文件 ```index.js const requireComponents = require.context('./', true, /\.vue$/) // 代替import进行动态引入，webpack中方法 const install = (Vue) => { if (install.installed) return // 遍历引入组件 requireComponents.keys().forEach(fileName => { const config = requireComponents(fileName) // 当前组件 const componentName = config.default.name // 获取组件名，即vue文件中的name Vue.component(componentName, config.default) // 注册组件 }) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export default { install } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/606f40d9a5b74ec9a97ff9807b7b577a~tplv-k3u1fbpfcp-watermark.image?) # 三、发布 #### 1.准备工作首先要有一个npm的账号，没有就先[注册](https://www.npmjs.com/signup?__cf_chl_captcha_tk__=pmd_BDPpePosp0ebyvM76.YaVGtnKzeebMsFJaeZpjnuPPo-1631845669-0-gqNtZGzNAuWjcnBszQkR) 然后在`package.json`文件中修改信息 ```package.json { "name": "cz-element", // 包名 "version": "0.0.8", // 版本号 "private": false, // 是否私有 "main": "src/elementPlugin/index.js", // 入口文件 "author": "村长", // 作者 "description": "基于element-ui实现的二次封装", // 简介 "license": "MIT", // 协议 "keywords": [ // 关键字 "vue2", "element-ui" ], "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "lib": "vue-cli-service build --target lib --name cz-element --dest lib src/elementPlugin/index.js" // 组件打包命令 }, ... ... } ``` 其中必填的有：
`name`：要发布的包名，方便npm上搜索，名字不能是npm上已经存在的。
`version`：版本号，每次发布到npm前要修改版本号。
`private`：改为false或删掉private，如果是true会发布失败的。
`main`：入口文件地址，可以是src/elementPlugin/index.js文件，也可以是打包后的js文件。
`scripts下自定义的打包命令`：打包后发布上去才能正常使用（我是这样的）。
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95c62218b3d049d18b5eb70bb4508eda~tplv-k3u1fbpfcp-watermark.image?) 接下来可以对`README.md`进行编写 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c00df5598924d05b636144f3b53d312~tplv-k3u1fbpfcp-watermark.image?) 最后打包 > npm run lib 打包完成后会有如下图的一个包 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4e3698ca8c44d74a5b389dee9533458~tplv-k3u1fbpfcp-watermark.image?) #### 2.使用命令发布 > npm login 先进行登录，依次输入npm的账号、密码、邮箱 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eeb3f84a18694e83b130c1c7cf835e57~tplv-k3u1fbpfcp-watermark.image?) > npm publish 然后发布，成功后结尾会有`包名`+`@`+`版本号` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6056567a88db46d792520672e531fc09~tplv-k3u1fbpfcp-watermark.image?) 发布成功就能在npm官网检索到了 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b08b169f5f6b4201b32e4b23ce142e13~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4eee463b1cf247dbb2dc3e53e60b2c8f~tplv-k3u1fbpfcp-watermark.image?) > ps：***如果首次发布时报错可能有以下原因：*** 1、注册npm的邮箱没有验证；
2、`package.json`中的文件名是npm上已存在的，可以打包发布前去官网搜索验证；
3、没有进行`npm login`登录；
4、网络问题。 > 发布流程：修改版本号——> 打包——> npm login——> npm publish 项目没关闭npm login登录一次就可以 # 四、使用找个element-ui的项目，安装发布的插件 > npm i cz-element 就可以在`node_modules`中看到了安装的插件了 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/465a31ff8a6f4f848428099147f2f6cb~tplv-k3u1fbpfcp-watermark.image?) 然后在`main.js`中导入 ```main.js import CZ from 'cz-element' import 'cz-element/lib/cz-element.css' Vue.use(CZ) ``` `vue`文件中使用 ```vue // 标签名和上面index.vue中的name保持一致 ``` 效果图 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fccdb6d64a440b6ba6a955afa20a4ec~tplv-k3u1fbpfcp-watermark.image?)

end...