首页 前端知识 如何写一个vue组件发布到npm,包教包会,保姆级教学

如何写一个vue组件发布到npm,包教包会,保姆级教学

2024-08-04 22:08:18 前端知识 前端哥 142 585 我要收藏

{{text}}

(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 https://registry.npmjs.org/

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

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

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

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

框架相关

原生JS虽能实现绝大部分功能,但要么就是过于繁琐,要么就是存在缺陷,故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架,两者工作原理上存在共通点,也存在一些不同点,对于校招来说,不需要两个框架都学得特别熟,一般面试官会针对你简历中写的框架进行提问。

在框架方面,生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的,在学习的过程可以结合框架的官方文档

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点:
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点:
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

**

8. MVVM设计模式

[外链图片转存中…(img-3PztiLLc-1714646987811)]

React框架

知识要点:
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-GErZ7zef-1714646987812)]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14789.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!