1. 脚手架是什么

脚手架本质是一个操作系统的客户端，其通过命令行执行。如：

vue create my-vue-app --force

此条命令组成：

主命令：vue；
command ：create；
command的param ：my-vue-app；
option ：--force；

2. 为什么要开发脚手架

脚手架核心价值：

自动化：项目重复代码拷贝/Git操作/发布上线操作；
标准化：项目创建/Git flow/发布流程/回滚流程；
数据化：研发过程系统化、数据化，使得研发过程可量化；

和自动化构建工具区别：

不满足需求：jekins等通常在git hooks中触发，需要在服务端执行，无法覆盖研发人员在本地使用，如：创建项目自动化、本地操作git操作自动化；
定制复杂：jekins等定制过程中需要开发组件，其过程较为复杂，需要用到Java语言，对前端不够友好；

3. 脚手架实现原理

4. 脚手架开发

4.1 开发流程

创建npm项目；
创建脚手架入口文件，最上方添加：
```
#!/usr/bin/env node
```
配置package.json，添加bin属性；
编写脚手架代码；
将脚手架发布到npm；

4.2 安装脚手架

# 安装脚手架
npm i -g my-own-cli
# 使用脚手架
my-own-cli

4.3 脚手架开发难点

脚手架开发：

分包：将复杂的系统拆分为若干模块；
命令注册；
参数解析；
帮助文档；
- global help；
  - Usage；
  - Options；
  - Commands；
- command help：
  - Usage
  - Options
命令行交互；
日志打印；
命令行变色；
网络通信：HTTP、WebSocket等等；
文件操作；

脚手架（一）——脚手架开发入门相关推荐

spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
cesium 页面截图_Cesium开发入门篇 | 02Cesium开发环境搭建及第一个示例
01 开发环境准备利用Cesium API进行二次开发属于Web前端开发范畴,目前比较火的Web三剑客包括React.Vue.AngularJS,每个js库的详细介绍可转至官网查看,在此不做详细介绍 ...
Vue开发入门(二) | 说说Vue全家桶有哪些~
全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的Vue项目前言: *Vue两大核心思想:组件化和数据驱动. 组件化:把整体拆分为各个可以复用的个体数据驱动:通过数据变化直接影响bom展示, ...
Vue项目构建开发入门
Vue项目构建开发入门开篇:Vue CLI 3 项目构建基础大家好,当你点进这个标题,开始阅读本章的时候,说明你对 Vue.js 是充满好奇心和求知欲的.我之前写过一篇文章,这样评价 Vue.js ...
（转载）H5 手机 App 开发入门：技术篇
H5 手机 App 开发入门:技术篇一.手机 APP 的技术栈二.WebView 控件三.原生技术栈 3.1 Xcode 3.3 Android Studio 四.混合技术栈 4.1 框架种类 ...
全栈开发入门实战：后台管理系统
这篇 Chat 将分享个人开发一个后台管理系统的全过程.后台管理系统,其实可以作为全栈开发的入门项目,因为它会涉及到前后台交互的很多知识点,做完一个后台管理系统,然后部署上线,你基本就算是入门全栈开发 ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
什么是前端脚手架？脚手架原理？
一.站在前端研发的视角,分析开发脚手架的必要性研发效能开发脚手架的核心目标是:提升前端的研发效能大厂研发一定需要用到脚手架脚手架核心价值将研发过程: 自动化:项目重复代码拷贝/git 操作/ ...
Vue（八）vue 脚手架、脚手架创建项目示例
目录一.vue 脚手架 1. 脚手架搭建项目的步骤 2. 使用 vscode 打开并运行脚手架项目 3. 脚手架文件夹结构(同SPA 4部分) 4. 避免组件间样式冲突 5. 懒加载二.举例:使用 ...

脚手架（一）——脚手架开发入门

脚手架

1. 脚手架是什么

2. 为什么要开发脚手架

3. 脚手架实现原理

4. 脚手架开发

4.1 开发流程

4.2 安装脚手架

4.3 脚手架开发难点

脚手架（一）——脚手架开发入门相关推荐

最新文章

热门文章