认识vue-cli脚手架
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脚手架的更多相关文章
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- vue.cli脚手架初次使用图文教程
vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...
- vue cli脚手架使用
1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...
- node.js和vue cli脚手架下载安装配置方法
一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...
- vue cli 脚手架上多页面开发 支持webpack2.x
A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改. 项目地址: ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑
1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...
- vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
- 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...
随机推荐
- cmodel模拟器开发
cmodel模拟器开发 对于一个公司来说,产品的设计周期就是生命线,一般来说都会在设计功能级仿真的c-model后直接转向RTL设计. 在目前的技术下,做cycle-by-cycle的设计和直接RTL ...
- X-Deep Learning功能模块
X-Deep Learning功能模块 特征体系 样本 特征 网络 数据准备 样本格式 使用DataReader读取数据 自定义python reader 定义模型 稀疏部分 稠密部分 优化器 训练模 ...
- 关于switch语句的使用方法---正在苦学java代码的新手之菜鸟日记
输入月份与年份,判断所输入的月份有多少天. switch支持和不支持的类型 支持的类型 int 类型 short 类型 byte 类型 char 类型 enum (枚举)类型 (java5.0 之后支 ...
- java后端知识点梳理——JVM
可以先看看我的深入理解java虚拟机笔记 深入理解java虚拟机笔记Chapter2 深入理解java虚拟机笔记Chapter3-垃圾收集器 深入理解java虚拟机笔记Chapter3-内存分配策略 ...
- 【NX二次开发】通过两点创建单位向量
源码1: //生成从起点到终点的单位向量 double douPoint_Start[3] = { 10,10,10 }; double douPoint_End[3] = { 15,16,13 }; ...
- Redis五种基础与三种高级数据结构解析
记得点赞+关注呦. 前言 在 Redis 最重要最基础就属 它丰富的数据结构了,Redis 之所以能脱颖而出很大原因是他数据结构丰富,可以支持多种场景.并且 Redis 的数据结构实现以及应用场景在面 ...
- Java设计模式(5:设计模式的分类及工厂模式详解)
一.设计模式的分类 总的来说,设计模式可以分为三大类:创建型模式.结构型模式.行为型模式,具体如下图: 二.工厂模式 工厂模式分为简单工厂模式.工厂方法模式和抽象工厂模式.其中简单工厂模式并不属于23 ...
- Redis压测
测试命令 这条命令redis自带 redis-benchmark [option] [option value] redis 性能测试工具可选参数如下所示: 序号 选项 描述 默认值 1 -h 指 ...
- Java源码分析:Guava之不可变集合ImmutableMap的源码分析
一.案例场景 遇到过这样的场景,在定义一个static修饰的Map时,使用了大量的put()方法赋值,就类似这样-- public static final Map<String,String& ...
- Qt实现基于多线程的文件传输(服务端,客户端)
1. 效果 先看看效果图 这是传输文件完成的界面 客户端 服务端 2. 知识准备 其实文件传输和聊天室十分相似,只不过一个传输的是文字,一个传输的是文件,而这方面的知识,我已经在前面的博客写过了,不了 ...