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

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

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的一些列流程。 喜欢麻烦点个赞~~~

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

目录
相关文章
|
3天前
|
Web App开发 JavaScript 前端开发
从脚手架开始学前端 【第3期】Node.js环境搭建(CentOS 7)
从脚手架开始学前端 【第3期】Node.js环境搭建(CentOS 7)
49 0
|
9月前
|
JSON 前端开发 JavaScript
从零打造你的前端开发脚手架
从零打造你的前端开发脚手架
133 0
|
3天前
|
前端开发 测试技术
前端反卷计划-脚手架-从0实现一个脚手架
前端反卷计划-脚手架-从0实现一个脚手架
|
3天前
|
JavaScript 前端开发 jenkins
前端反卷计划-脚手架-原理介绍
前端反卷计划-脚手架-原理介绍
|
9月前
|
前端开发
前端学习笔记202304学习笔记第九天-lerna脚手架初始化2
前端学习笔记202304学习笔记第九天-lerna脚手架初始化2
37 0
|
11月前
|
资源调度 前端开发 搜索推荐
从0搭建vue3组件库: 如何完整搭建一个前端脚手架?
从0搭建vue3组件库: 如何完整搭建一个前端脚手架?
225 0
|
11月前
|
缓存 JavaScript 前端开发
|
11月前
|
存储 资源调度 JavaScript
基于 Yeoman 脚手架技术构建前端项目的实践
基于 Yeoman 脚手架技术构建前端项目的实践
140 0
|
11月前
|
前端开发 JavaScript 网络安全
如何开发一个极简的前端脚手架
如何开发一个极简的前端脚手架
160 0
|
11月前
|
前端开发 开发工具 git
前端脚手架的搭建
前端脚手架的搭建
138 0