如何写一个vue组件发布到npm,包教包会,保姆级教学,前端开发面试2024

33 阅读6分钟

type:String,

default:''

},

text:{

type:String,

default:''

}

}

}

(2)在App.vue中引入使用。

在这里插入图片描述

(3)尝试效果,点击跳转到了link所指向的网址。

在这里插入图片描述

3. 正式开始——安装vue-sfc-rollup

=========================================================================================

在github上搜索vue-sfc-rollup,可以看到它的说明和使用方式。这是目前创建npm上可用的vue组件最快的方式,使用该工具生成组件项目后,最快时改动一个组件文件,进行打包后即可上传到npm上。

(1)全局安装

npm install -g vue-sfc-rollup

必须全局安装,局部安装试过了,会报错。

(2)使用sfc初始化之后要上传的组件项目

sfc-init

在这里插入图片描述

(2)运行项目

打开使用sfc-init命令创建的组件项目,npm i下载node_modules,npm run serve运行

在这里插入图片描述

(3)读懂sfc-init的项目

可以看到serve命令执行的是dev/serve.js文件,但是包的入口文件dist/vue-link.ssr.js文件,不难看出这是最后要进行打包之后上传的文件。这个暂且不提,让我们把注意力放到serve.js文件上,发现这是一个小型的vue项目,并且只用到vue-link.vue一个模板组件,这就是我们需要修改替换的组件文件。

在这里插入图片描述

在这里插入图片描述

4. 修改项目并完成组件的npm发布

==================================================================================

(1)替换组件

将之前本地尝试创建的组件代码直接替换到当前sfc-init创建的项目中,看下效果。

在这里插入图片描述

在这里插入图片描述

到这一步,我们的组件就完成了。

(2)打包组件项目

打包之前,建议将将要发布的版本修改为最小,并且将name中加上你独有的标志,比如我在后面加上的-sheldon,防止和npm上已经有的包重名,否则有可能因为重名而上传失败。

在这里插入图片描述

然后,执行npm run build,生成之前提到过的打包后的入口文件。

在这里插入图片描述

(3)发布组件到npm

需要注意的是,之前我们把项目的npm地址换成了淘宝镜像,现在发布自己的组件需要切换到官网,注意,现在地址需要使用https,否则会报错。

npm config set registry registry.npmjs.org/

在这里插入图片描述

最后使用npm publish命令,即可成功上传组件。

在这里插入图片描述

在这里插入图片描述

5. 验证——下载组件并使用

==============================================================================

(1)重新打开之前的link-demo项目或者自己新建一个vue项目,把npm地址重新切回到淘宝镜像(淘宝镜像10分钟更新一次,有时候还没更新,等等就行),避免不必要的报错

npm config set registry registry.npm.taobao.org/

(2)下载组件npm i vue-link-sheldon

(3)使用组件

在这里插入图片描述

在这里插入图片描述

6. 拓展——如何写一个基于element-ui的组件

===========================================================================================

本来想把这个单独写成一篇文章进行发布的,但是发现根本没有任何技术难度,只需要看懂package.json,并将UI组件按需引入即可。

(1)读懂package.json

在这里插入图片描述

关注点放到项目的依赖项上,给大家简单介绍下dependencies、devDependencies和peerDependencies。前两个大家都基本了解,dependencies——运行依赖,比如axios,无论开发时,还是运行时都需要;devDependencies——开发依赖,比如less和sass,只是对css进行语法分析,在项目进行线上部署的时候并不会存在,只有在开发时出于方便用得到;而peerDependencies——对等依赖,这个是只有作为npm包作者时才会了解到的。

我们在进行npm包创建和发布的时候,难免会引用到其他已经发布的npm包。按照我们最开始的认知,如果一个项目引用包,就需要使用npm i 包名命令将包放进该项目的node_modules文件夹下。但是,这样问题就来了,假设你是Element-UI或者其他任何包的作者,你在进行创作开发时,希望在当前的node_modules文件夹下引用到Vue(因为基于Vue),但是在我们进行发布的时候,又不希望依赖中有Vue了,因为别人在下载我Element-UI的时候,肯定已经下载了Vue了,如果在Element-UI中又有Vue,不是一堆冗余文件了吗?所以,我能不能当Element-UI作为包下载的时候,能够直接引用外部同级的node_modules下的Vue包呢?当然可以,peerDependencies就是这样的作用。

在这里插入图片描述

总结一下,dependencies是开发时在,运行时也在的依赖;devDependencies开发时在,运行时就扔掉的依赖;peerDependencies是开发时在,运行时就去找同级的依赖。

最后

面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。

大厂面试题

面试题目录

开源分享:docs.qq.com/doc/DSmRnRG…