vue项目封装组件_前端组件封装

vue项目封装组件_前端组件封装前言在使用vue进行日常开发的时候,组件的封装是一个很常规的操作,也可以从npm仓库下载别人封装好的组件来使用,比如iview,elementui等…但每个项目的应用场景不同,所以我们有时也需要自己封装组件。而如果在开发中换了项目,那么就只能复制代码过去,略显麻烦,这个时候呢,可以将封装好的组件上传到npm仓库,需要使用时就可以直接通过npm指令下载,非常方便。1.环境准备因为我们封装的是Vue组件,所以直接在脚手架中封装即可。//创建项目因为我们只需封装组件所以RouterSt

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

前言

在使用vue进行日常开发的时候,组件的封装是一个很常规的操作,也可以从npm仓库下载别人封装好的组件来使用,比如iview,element ui等…但每个项目的应用场景不同,所以我们有时也需要自己封装组件。而如果在开发中换了项目,那么就只能复制代码过去,略显麻烦,这个时候呢,可以将封装好的组件上传到npm仓库,需要使用时就可以直接通过npm指令下载,非常方便。

1.环境准备

因为我们封装的是Vue组件,所以直接在脚手架中封装即可。

//创建项目 因为我们只需封装组件 所以 Router Store之类的都不需要捆绑下载
vue create test
//运行项目
npm run serve || yarn serve

这个时候呢,Vue项目就搭建好了
在这里插入图片描述

2.组件封装

2.1新建package文件

因为我们可能需要封装多个组件,所以这里创建个package文件夹用于存放组件
在这里插入图片描述
然后引入已经封装好的组件测试一下,这里引入的是分页组件,注意封装好的组件一定要有name且没有重复。

<template>
  <div id="app">
    <fish-page></fish-page>
  </div>
</template>
<script>
import fishPage from '@/package/fishPage/fishPage.vue'
export default { 
   
  components:{ 
   
    fishPage
  }
}
</script>

展示结果如下
在这里插入图片描述

2.3使用Vue插件模式

这一步呢,是封装的重点,使用到了Vue的一个公开方法:install,这个方法会在使用Vue.use()的时候被调用,这样就可以将组件注册到全局。
在package文件内新建index.js,代码如下。

// 引入分页组件文件
import fishPage from "./fishPage/fishPage.vue"; 
const coms = [
    fishPage
]; // 将来如果有其它组件,都可以写到这个数组里
// 批量组件注册
const install = function (Vue) { 
   
    coms.forEach((com) => { 
   
        Vue.component(com.name, com);
    });
};
export default install; // 这个方法以后再使用的时候可以被use调用

这里使用了Vue.component()将我们封装的组件注册为全局组件。

3.组件打包

在上边的步骤中我们已经封装好了组件,接下来就需要将封装完成的组件进行打包,在项目的package.json文件中新增一行命令

“package”: “vue-cli-service build –target lib ./src/package/index.js –name fish-ui –dest fish-ui”

在这里插入图片描述

命令解释:

  • – – target lib 指定打包的目录
  • – – name 打包后的文件名字
  • – – dest 打包后的文件夹的名称

然后执行打包命令

npm run package

打包结束后会生成一个以– – dest命名的打包文件
在这里插入图片描述

4.发布到npm

4.1初始化package.json

想要发布到npm仓库,我们还得在pig-ui文件夹下初始化一个package.json文件。进入pig-ui目录,执行命令:

 npm init -y

这个命令结束后,打包文件中会生成一个package.json文件
在这里插入图片描述

4.2发布到npm仓库

4.2.1 第一步需要到npm官网注册账号 用户名 密码 邮箱 发布时会用到

4.2.2第二步需要将npm源切换为官网源,不可以使用淘宝镜像源,命令如下:

 npm config set registry=https://registry.npmjs.org

4.2.3添加npm用户
首先进入打包好的文件目录 执行以下命令 并输入用户名 密码 邮箱 这里要注意的是 输入密码时会发现键入不了密码,光标也不会闪动,这是隐藏密码的方式,实际上输入的密码已经键入了,但并没有显示 ,输入完成回车就好了,还有输入邮箱之后,会发送到邮箱一个验证码,输入即可。

npm adduser

4.4.4发布npm
进入打包好的文件内执行命令

npm publish

如果上传失败可能时因为上传名称与npm仓库已有的包名字冲突 改个名字就好了,上传成功后邮箱会收到提示,此时在npm官网就可以看到我们上传的包
在这里插入图片描述

5.从npm安装使用

这个时候点开我们刚刚上传的包,就可以看到下载此包的命令,点击就可以复制
在这里插入图片描述
下载完成后就可以在main.js文件中看到
在这里插入图片描述
这个时候只要像element ui 那样引入就可以全局使用了 需要单独引入样式文件在这里插入图片描述
最后通过Vue.use()使用插件就可以直接在组件中使用封装的标签。

<template>
  <div id="app">
    <fish-page></fish-page>
  </div>
</template>

在这里插入图片描述
到这里我们的组件就封装并上传好了,可以随时通过npm下载并使用。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/190307.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Object数组转String数组

    Object数组转String数组1、System.arraycopy把一个数组中某一段字节数据放到另一个数组中//src:源数组;srcPos:源数组要复制的起始位置;dest:目的数组;destPos:目的数组放置的起始位置;length:复制的长度.publicstaticvoidarraycopy(Objectsrc,intsrcPos,Objectdest,intdestPos,intlength)Object[]src={“A”,”B”,”C”};String[]dest=

  • atitit.html5 vs 原生 app的区别与选择

    atitit.html5 vs 原生 app的区别与选择

  • Java练习—-》求字符串中的最长回文子串

    Java练习—-》求字符串中的最长回文子串手贱,做了一道对于我来说挺难的题目嘿嘿!挺有意思的,分享一下文章目录前言一,题目二,思路图形解析代码前言第一次把自己的解题思维写出来,可能写的不太好,请给位原谅,哈哈哈哈额,如果有错的,请各位大佬帮我指出来哈,谢谢!!(^U^)ノ~YO一,题目求一串字符串的最长回文子串,这里以cabacabae为例二,思路图形解析第一步:观察这串字符串—》第二步:找出最长回文子串,并设数—》说明:在这里,假设知道最长回文子串,那这里的resCenter和maxRigth,reslengthgs

    2022年10月16日
  • maven打包时打包指定的lib文件夹

    maven打包时打包指定的lib文件夹今天在打包自己的springboot项目时遇到了问题,报找不到类和符号。因为我有些依赖是放在项目lib文件夹中,那么打包的时候要连把它一起打包。修改pom.xml,添加一下内容:<build><plugins><plugin><groupId>or…

  • linux rootfs_linux常用文件系统类型

    linux rootfs_linux常用文件系统类型linux中有一个让很多初学者都不是特别清楚的概念,叫做“根文件系统”。我接触linux前前后后也好几年了,但是对这个问题,至今也不是特别的清楚,至少没法向其他初学者们给出一个很全面很到位的解释。于是,今天我们就来理一理这个话题。

  • js数组删除指定元素splice_js找出数组中最大的数

    js数组删除指定元素splice_js找出数组中最大的数js自带删除元素方法有:1.splice方法//获取元素在数组的下标Array.prototype.indexOf=function(val){ for(vari=0;i<this.length;i++){ if(this[i]==val) { returni; }; } return-1;};//根据数组的下标,删除该下…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号