elementui在开发vue项目时很好使,然而公司在开发时,总有一些特殊也常用的需求,比如整数框,elementui的’el-input-number’框限制数值,但是可以输入其他字符,blur时自动清空保留数值,但是公司要求不能输入其他字符,所以就需要根据公司的需求进行二次封装,并发布在npm上以便在项目中使用。
-
选择一个文件夹(组件库项目所在文件夹),在路径中输入
cmd
按下’回车‘打开终端
-
创建vue项目
vue create myEle
-
vue项目创建成功后,目录结构如下:
-
在components下添加若干个vue文件,用于封装组件。组件内容如下,以input_number为例。
<template>
<el-input-number id="InputNumber"
style="width: 100%;"
size="small"
placeholder="请输入整数"
percision="0"
:controls="false"
@keyup.native="valueChange"
@keydown.native="valueChange"
:max="100000000"
v-model="insideValue"
v-bind="$attrs"
v-on="$listeners">
</el-input-number>
</template>
<script>
export default {
name: 'input_number',
// 让父组件 v-model 传参
model: {
prop: 'numberValue',
event: 'change',
},
props: {
numberValue: {
type: [Number, String],
default: undefined,
}
},
data() {
return {
insideValue: undefined
};
},
methods: {
valueChange(e) {
e.target.value = e.target.value.replace(/[^\d]/g, '')
if (e.target.value > 100000000) {
e.target.value = 100000000
}
}
}
};
</script>
<style lang="less" scoped>
#InputNumber /deep/ .el-input__inner {
text-align: left;
}
</style>
- 在components下添加一个index.js文件,用于注册第四步封装的组件并暴露出方法。
import {message} from './message.js';
import InputNumber from './input_number';
import InputUserName from './input_userName';
import InputPassword from './input_password';
import PageLayout from './page_layout'
const MyEle = {
install(Vue) {
// 在此处添加自定义的全局组件
Vue.component('InputNumber', InputNumber);
Vue.component('InputUserName', InputUserName);
Vue.component('InputPassword', InputPassword);
Vue.component('PageLayout', PageLayout);
//在此处添加自定义的全局方法
Vue.prototype.$message = message;
}
};
export default MyEle;
- 在main.js文件中引入组件
- 在views文件夹下面新建一个usageExamples.vue文件,用于测试组件封装。
- 运行项目,npm run serve,测试封装是否成功,若有报错,挨个查询解决即可。
- 第八步没有问题后,说明组件封装成功,接下来将组件包上传到npm。
组件包上传到npm
1.去npm官网注册一个账号,绑定qq邮箱。记住账号密码。
2.修改package.json。
3. 在package.json设置忽略发布文件。我们发布到 npm 中,只有编译后的 lib 目录、package.json、README.md才是需要被发布的设置。
4.登录npm账号。
5.执行npm run lib
进行打包
6.步骤五成功后,目录会多一个lib文件夹,里面存放的是我们打包的文件
7.执行npm publish
发布到npm上。
8.在其他项目安装npm install myEle
9.在其他项目main.js中引入
至此,封装组件,上传到npm,并在其他项目引用就完成了。注意:上传到npm时,每次都需要更改版本号。