Vue组件封装

组件封装

一个封装好的组件可以在项目的任意地方使用,甚至我们可以直接从npm仓库下载别人封装好的组件来进行使用,比如iview、element-ui这一类的组件库。但是每个公司的需求是不一样的,我们可以封装自己的组件库并发布到npm上去,这样可以不用碰到相似的项目就复制一大串代码了,简洁明了,要用的时候可以直接从npm安装使用。废话不多说,下面开始介绍步骤。

(1) 新建package文件夹

因为我们可能会封装多个组件,所以在src下面新建一个package文件夹用来存放所有需要上传的组件。

(2)在pwd/index.vue中编写好代码

js 复制代码
<template>
    <div>
        <el-form
          ref="Form"
          :label-width="labelWidth"
          label-position="right"
          :model="form"
          :rules="comValidateFlag ? modifyRules : loginRules"
          :size="comSize"
          :disabled="comPasswordDisabled"
          >
          <el-form-item :label="comLabel" prop="password">
            <el-input
             v-model="form.password"
             :show-password="showPasswordFlag"
             :placeholder="placeholderText"
             maxlength="16"
             autocomplete="new-password"></el-input>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'MyPwd',
    prop: {
        comPasswordDisabled: {
            type: Boolean,
            default: false
        },
        showPasswordFlag: {
            type: Boolean,
            default: false
        },
        placeholderText: {
            type: Boolean,
            default: false
        },
        labelWidth: {
            type: String,
            default: '120px'
        }
    },
    computed: {
        comValidateFlag: {
            get() { }
        }
    },
    data() {
        const validatePwd = (rule, value, callback)=>{

        }
        return {
            password: "",
            newPwd: "",
            cfmPwd: "",
            historyFlag: false,
            modifyRules: {
                password:[{require:true,validator: validatePwd }]
            },
            loginRules: {
                 password: [{ require: true, message:"请输入密码", trigger:"blur" }]
            },
            form: {
                password: ''
            }
        }
        },
    methods: {
        validatePwdFun(newPwd, cfmPwd, historyFlag) {
            if (newPwd) {
                this.newPwd = newPwd
            }
            if (cfmPwd) {
                this.cfmPwd = cfmPwd
            }
            this.historyFlag = historyFlag
            let validFlg = false
            this.$refs['Form'].validate(valid => {
                validFlg = valid
            })
            this.newPwd = ''
            this.cfmPwd = ''
            return validFlg

        }
    }

}
</script>

<style></style>

(3)使用Vue插件模式

在package目录下新建index.js文件,代码如下

js 复制代码
import pwd from './pwd/index.vue'  //引入封装好的组件
const coms=[pwd]//将来如果有其他组件,都可以写到这个数组里去
//批量组件注册
const install =function(Vue){
     coms.forEach((com)=>{
        Vue.component(com.name,com)
     })
}
export default install//这个方法以后再使用的时候可以被use调用

(4) 组件打包

到这里为止,我们的组件封建基本就完成了,当然组件封装成什么样得看自己得业务需求了,接下来我们就需要将组件进行打包了。

修改我们项目得package.json文件,配置打包命令:

json 复制代码
"package": "vue-cli-service build --target lib ./project/index.js --name my-pwd --dest my-pwd"
//其中--target lib只有是需要打包的目前文件,也就是步骤3的index.js文件
//--name是打包好的文件name
//--dest是打包好的文件夹的名字

然后在终端运行:

js 复制代码
npm run package

打包完成后我们项目就会多一个打包好的文件夹

(5)发布到npm(以下方法不合规,仅为在离线环境下的一个解决思路)

(1) 想要导进node_module,我们还得在my-pwd文件夹下初始化一个package.json文件。文件内容如下:

(2)然后将整个my-pwd文件夹复制到node_module文件夹中

在这里插入图片描述

(6)使用

全局注册组件

js 复制代码
import Vue from 'vue'
import App from './App.vue'
import MyPwd from 'my-pwd'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false

//全局注册
Vue.use(MyPwd)

new Vue({
  render: h => h(App),
}).$mount('#app')

使用组件

js 复制代码
<template>
  <div class="hello">
    <my-pwd></my-pwd>
  </div>
</template>

效果如下

相关推荐
耶啵奶膘12 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer084 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript