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>

效果如下

相关推荐
baiduopenmap3 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish10 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull14 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i23 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_25 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun31 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜35 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html