ps:脚手架系列主要记录我自己(一名前端小白)对脚手架学习的一个过程,如有不对请帮忙指点一二! [抱拳]  

  作为一名前端开发工程师,平时开发项目大多都离不开一个重要的工具,那就是脚手架。下面让我们来了解一下什么是脚手架,以及它给工作带来的一些帮助。

                                                        

  

  通过上图,我们可以看出,如果一家公司的开发团队具有一定规模,那么自研一款脚手架就非常有实用价值,拥有一个优秀的脚手架工具也会带来诸多便捷。主要包括以下三点:

  1.自动化:项目中可复用代码的拷贝、git代码库管理、项目的打包上线

  2.标准化:创建项目、git flow 、发布、回滚

  3.数据化:研发过程系统化、数据化、研发流程可量化

  那么,你可能会发出疑问:现有的自动化构建工具(jenkins、travis...)已经很成熟了,为什么还需要自研脚手架?

  1.不满足需求:jenkins、travis通常在git hooks中触发,需要在服务端执行,无法覆盖研发人员本地功能,如:创建项目自动化、本地git操作自动化等

  2.定制复杂:jenkins、travis定制过程需要开发插件,其过程较为复杂,需要用到java语言,对前端开发并不友好

  其实脚手架的本质是一个操作系统客户端,通过输入指令来完成某些操作。拿vue-cli为例:

   1 vue create vue-test

  该命令由3部分构成:

  1.主命令:vue

  2.command:create

  3.command的params:vue-test

  解释:创建一个vue项目,项目名称是vue-test。

  其中的执行原理:

  1.在终端输入:vue create vue-test

  2.终端解析出vue命令

  3.终端在环境变量中找到vue命令

  4.终端根据vue命令链接到实际文件vue

  5.终端利用node执行vue文件

  6.vue解析command/options

  7.vue执行command

  8.执行完毕,退出

  好了,脚手架的认识就到这里,后续会继续深入学习脚手架及其执行原理。

认识vue-cli脚手架的更多相关文章

  1. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  2. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  3. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  4. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  5. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  6. vue cli 脚手架上多页面开发 支持webpack2.x

    A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改.  项目地址:  ...

  7. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  8. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  9. vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

    废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...

  10. 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

    Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...

随机推荐

  1. GitHub上开源的YOLOv5

    GitHub上开源的YOLOv5 代码地址:https://github.com/ultralytics/YOLOv5 该存储库代表Ultralytics对未来的对象检测方法的开源研究,并结合了我们在 ...

  2. Django(53)二次封装Response

    前言 有时候我们使用drf的Response,会发现默认返回的格式不太友好,每次我们都需要写入以下的格式 return Response({ "status": 0, " ...

  3. eclipse 新建项目不可选择Java Project 解决方法

    解决方法一: 鼠标点击file-new-other,弹出选项框,选中java project,点击next,接下来就是正常创建java protect的流程了,这个虽然也可以解决,但每次新建java项 ...

  4. python_request 接口测试线性框架,模块化思想,增加日志打印

    一.大框架 如下为一个简单的线性框架,同时编写common_api 模块,把一个个接口进行封装,案例编写时候只需要直接调用输入参数即可. 二. test_cases 模块具体写法 2.1  commo ...

  5. Java 到底是值传递还是引用传递?

    关于这个问题,引发过很多广泛的讨论,看来很多程序员对于这个问题的理解都不尽相同,甚至很多人理解的是错误的.还有的人可能知道Java中的参数传递是值传递,但是说不出来为什么. 在开始深入讲解之前,有必要 ...

  6. 好用的Java工具类库,GitHub星标10k+你在用吗?

    简介 Hutool是Hu + tool的自造词,前者致敬我的"前任公司",后者为工具之意,谐音"糊涂",寓意追求"万事都作糊涂观,无所谓失,无所谓得& ...

  7. 备份schema并排除大表到ASM磁盘上

    1.查出占用空间比较大的表 select owner,segment_name,segment_type,bytes/1024/1024 mb from dab_segment where owner ...

  8. npm i安装命令中的-g -D -S的区别

    -g为全局安装 -D 对模块进行局部安装,模块写入到 devDependencies 对象 用于开发阶段,开发时用到的工具等 -S 局部安装,不同的是模块写入到 dependencies对象 用于生产 ...

  9. django 导出excel react下载 --- 导出并下载

    Dajngo查询数据,查询出来之后生成Excel保存本地 class ExportExcel(APIView): def post(self, request, *args, **kwargs): e ...

  10. react 工程目录简介

    创建一个 todolist 项目,下图是其工程目录. node_modules文件夹 里面存放的是我们所建项目放所依赖的第三方的包 public文件夹 favicon.ico 图标文件,网页标题左上角 ...