【金秋打卡】第6天-玩转组件库搭建全流程
2022/11/1 4:25:01
本文主要是介绍【金秋打卡】第6天-玩转组件库搭建全流程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
第一模块
课程名称:玩转组件库搭建全流程
章节名称:
- 5-1 发布到npm
讲师姓名:郭小新
第二模块
课程内容(概述)
npm
是什么?npm
是一个第三方包管理工具,用于管理第三方模块- 介绍发布到npm所需的必要文件package.json、README.md
- 在README.md编写组件使用说明
第三模块
用rollup
打包组件库(四) - 发布组件到npm
基于上一篇文章,这次我们来发布一个Vue组件到npm。
在项目目录下新建lib目录,用于存放编译后的文件
mkdir lib
在packages目录下初始化package.json文件,并新建README.md文件
npm init
执行打包命令
rollup -c ./packages/rollup.config.js
登录npm账号
切换到lib目录,打开命令行窗口,输入
npm login
随后需要依次输入用户名、密码(密码是隐藏的,输完直接回车即可)和邮箱。输入完成,回车即可登录npm账号
发布组件
现在我们可以将组件发布到npm服务器上了。执行命令
npm publish
稍等一会,组件就会被上传到npm服务器上了
问题
执行报错 403 Forbidden - PUT https://registry.npm.taobao.org/
这是因为使用了淘宝的镜像服务器,切换源即可。
# 查看当前镜像源 npm config get registry # 切换镜像源 npm config set registry http://registry.npmjs.org/
项目结构
|-lib // 存放编译后的文件 |-packages |---components // 用于编写存放组件 |-----ext-button |-------index.js |-------main.vue |---common // 存放样式文件 |---package.json |---README.md |---index.js |---rollup.config.js // 打包配置脚本
第四模块
学习截图
这篇关于【金秋打卡】第6天-玩转组件库搭建全流程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行
- 2024-05-08阿里云域名注册流程,分享给第一次购买域名的新手站长!
- 2024-05-082024年,行业变动下的程序员应该首先学习哪种编程语言?