上班时间如何正确摸鱼?来一起写一个简单的前端脚手架

简介: 上班时间如何正确摸鱼?来一起写一个简单的前端脚手架

image.png


上班无聊时候,如何正确摸鱼还能提升技术呢? 来,我教你一个办法。


随时前端的发展,在大团队下前端的规范性及开发便携性以及如何提升研发效能是前端开发的首要问题。


如何提升研发效能呢? 其实这种说法在大厂中比较常见。 一个部门下有若干个前端团队,如果每一个团队都有不同的项目组件库,项目框架,http请求方法,不同的埋点方法或者工具方法,那在后期如果要联动开发是很难的事情。 这时候就有了一个说法:前端开发脚手架!


它的优点不言而喻:


a **自动化


b **标准化


c **数据化


使用者的角度是如何看待前端脚手架呢?

它本质上是一个操作系统客户端,通过命令行执行。如:


vue createvue-test-app
复制代码

它对于使用者就是一行命令,但是它可以做什么呢?它会帮助我们在本地创建一个vue项目,项目名为vue-test-app。实际上还有比这个场景更加复杂的命令。不过今天只是带大家入门。让大家看看,如果从0开始,在自己本地开发 一个前端脚手架并发布到npm 呢。

1. 首先在本地创建一个npm项目。
2. 在本地新建文件夹。vue-test
3. 创建好文件夹后,使用cmd进入该创建好的文件夹。
4. 使用npm init  全部Y 生成一个默认的package.json模板
  在package.json 中需要增加一个bin配置,声明这个bin的名称以及对应文件地址。

e6f3789dfa7d0d691d404526c1872133.png

5. 在当前文件夹下新建一个文件夹目录bin目录。

af3db8cbc74f9b9677e84562ed332380.png

6. 在新建的这个bin目录下新建一个index.js文件。
7. 编辑这个index.js 文件,在文件中添加 console.log("vue-test")
8. 并且在当前文件的首开始,添加一行      #!/usr/bin/env node

fd3f89b3d122ec0c0ad265cc023e74d6.png


9. 将脚手架发布到npm(此处需要大家先行在npm进行注册。)
   使用npm login 进行npm登陆。
   然后使用 npm publish 发布 (此处报错,建议百度。一般都是名称问题)
10. 推送成功后,在自己电脑本地则可以使用
  npm install vue-test -g 进行安装
11. 安装完成后,则可以使用 vue-test (package.json 中bin配置的那个名称)来进行验证

以上就是一个最基础的前端本地开发脚手架以及发布到npm的一些列流程。 喜欢麻烦点个赞~~~

人多了我就出后续,人不多,那咱们继续摸鱼~哈哈哈哈哈

目录
相关文章
|
6月前
|
Web App开发 JavaScript 前端开发
从脚手架开始学前端 【第3期】Node.js环境搭建(CentOS 7)
从脚手架开始学前端 【第3期】Node.js环境搭建(CentOS 7)
113 0
|
6月前
|
Web App开发 JavaScript 前端开发
从脚手架开始学前端 【第2期】Node.js环境搭建(windows)
从脚手架开始学前端 【第2期】Node.js环境搭建(windows)
90 0
|
JSON 前端开发 JavaScript
从零打造你的前端开发脚手架
从零打造你的前端开发脚手架
212 0
|
1月前
|
资源调度 前端开发 JavaScript
前端研发链路之脚手架
本文首发于微信公众号“前端徐徐”。文章介绍了前端开发中脚手架工具的重要性及其工作原理。脚手架工具能够大幅提升开发效率,确保代码质量和项目一致性。文章详细探讨了脚手架的历史、工作原理、常见工具及其优势与潜在问题,并展望了其未来发展方向,帮助开发者更好地理解和应用脚手架工具。
30 4
前端研发链路之脚手架
|
2月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
3月前
|
JavaScript 前端开发
什么是前端构建工具?vite和vite脚手架的关系!
【8月更文挑战第1天】前端构建工具简析
83 4
|
6月前
|
资源调度 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
|
6月前
|
前端开发 测试技术
前端反卷计划-脚手架-从0实现一个脚手架
前端反卷计划-脚手架-从0实现一个脚手架
|
6月前
|
JavaScript 前端开发 jenkins
前端反卷计划-脚手架-原理介绍
前端反卷计划-脚手架-原理介绍
|
缓存 JavaScript 前端开发