Vue-cli脚手架在做些什么(源码角度分析)

news/2024/4/16 13:51:33/文章来源:https://blog.csdn.net/weixin_46872121/article/details/129195974

什么是Vue脚手架?

在学习初期,我们的项目往往需要借助webpack、vite等打包工具配置Vue的开发环境,但是在真实开发中我们不可能每个项目从头来完成所有的webpack配置,这样显得开发的效率会大大的降低;

所有的真实开发中,我们通常会使用脚手架来创建一个项目,Vue项目我们使用的是Vue脚手架

Vue cli已经内置了webpack相关的配置,我们不需要从零来配置

Vue-cli的安装和使用

  • 安装Vue Cli (全局安装),在任意地方都可以通过vue命令来创建项目

npm install @vue/cli -g

  • 升级Vue Cli(如果是比较旧的版本,可以通过下面的命令来升级

npm update @vue/cli -g

  • 通过Vue的命令创建项目

vue create 项目名称

vue create项目的过程

执行npm run serve发生了哪些事?

我们知道,在没有使用vue-cli,而只是用webpack进行项目的配置的时候,我们执行启动项目的命令例如npm run serve,则进入的是webpack的配置文件中,如webpack.config.js。而使用vue-cli脚手架命令执行相应的是vue-cli-service serve,那么,这里具体发生了什么事呢?我们接着往下看

我们了解到,在webpack中,当我们执行npm run serve命令的时候,其相应执行的文件在node_modules文件下的.bin文件中

而在vue-cli中,也实在.bin文件下找到vue-cli-serve命令,但是这个文件其实只是一个软连接,不是真正执行代码的地方,vue-cli通过这个软连接去找到真实的代码

而执行vue-cli-serve真实代码是在node_modules/@vue/cli-service/bin/vue-cli-service.js

在这个文件中,主要是拿到Service这个类,然后执行run方法,然后接下来主要是看,../bin/Service文件下这个类是怎么定义的(这里打错了,应该是../lib/Service)

最后附上vue-cli的运行原型图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_73738.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实现基于国密SM3的密钥派生(KDF)功能

实现基于国密SM3的密钥派生(KDF)前言KDF 标准基于SM3的kdf实现前言 密钥派生函数(KDF):密钥派生函数是指从一个共享的秘密比特串中派生密钥数据,在密钥协商过程中,密钥派生函数作用在密钥交换所…

【一看就会】实现仿京东移动端页面滚动条布局

简单粗暴直接上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"> <meta name"viewport" content&q…

中移链结合CA证书实现节点准入控制

01背景介绍BSN开放联盟链&#xff08;BSN Open Permissioned Blockchain&#xff0c; 简称OPB&#xff09;包括多条基于公有链框架和联盟链框架搭建的公用链&#xff0c;开发者可以选择适合应用业务需求的开放联盟链部署和运行智能合约和分布式应用&#xff0c;每条开放联盟链各…

码匠 × OpenAI :快速生成 SQL 语句,提升开发效率!

目录 使用 OpenAI 生成 SQL 码匠连接与集成 OpenAI 总结 关于码匠 在码匠中&#xff0c;编写 SQL 语句&#xff0c;并结合码匠一系列开箱即用的组件实现复杂的业务逻辑&#xff0c;是很常见的应用开发场景。然而&#xff0c;不同的数据库在 SQL 增删改查操作语法、类型字段和…

Java知识复习(二)Java集合

1、List、Set和Map的区别 List&#xff1a;存储的顺序是有序的、可重复的Set&#xff1a;存储的顺序是无序的、不可重复的Map&#xff1a;使用键值对存储&#xff0c;Key和Value都是无序的&#xff0c;其中Key不可重复&#xff0c;而Value可重复 2、ArrayList和LinkedList的区…

JavaEE简单实例——MyBatis的一对一映射的嵌套查询的简单介绍和基础配置

简单介绍&#xff1a; 在前一章我们介绍了关于MyBatis的多表查询的时候的对应关系&#xff0c;其中有三种对应关系&#xff0c;分别是一对一&#xff0c;一对多&#xff0c;多对多的关系。如果忘记了这三种方式的对应形式可以去前面看看&#xff0c;一定要记住这三种映射关系的…

项目重构,从零开始搭建一套新的后台管理系统

背景 应公司发展需求&#xff0c;我决定重构公司的后台管理系统&#xff0c;从提出需求建议到现在的实施&#xff0c;期间花了将近半个月的时间&#xff0c;决定把这些都记录下来。 之前的后台管理系统实在是为了实现功能而实现的&#xff0c;没有考虑到后期的扩展性&#xf…

逆风翻盘拿下感知实习offer,机会总是留给有准备的人

个人背景211本&#xff0c;985硕&#xff0c;本科是计算机科学与技术专业&#xff0c;研究生是自学计算机视觉方向&#xff0c;本科主要做C和python程序设计开发&#xff0c;java安卓开发&#xff0c;研究生主要做目标检测&#xff0c;现在在入门目标跟踪和3d目标检测。无论文&…

并发编程学习篇从0-1合集

一、synchronized 一、原子性、有序性、可见性 1.1 原子性 数据库的事务&#xff1a;ACID A&#xff1a;原子性-事务是一个最小的执行的单位&#xff0c;一次事务的多次操作要么都成功&#xff0c;要么都失败。 并发编程的原子性&#xff1a;一个或多个指令在CPU执行过程中…

用Python获取弹幕的两种方式(一种简单但量少,另一量大管饱)

前言 弹幕可以给观众一种“实时互动”的错觉&#xff0c;虽然不同弹幕的发送时间有所区别&#xff0c;但是其只会在视频中特定的一个时间点出现&#xff0c;因此在相同时刻发送的弹幕基本上也具有相同的主题&#xff0c;在参与评论时就会有与其他观众同时评论的错觉。 在国内…

怎么从零开始学黑客,黑客零基础怎么自学

很多朋友对成为黑客很感兴趣&#xff0c;很大原因是因为看到电影中黑客的情节觉的特别的酷&#xff0c;看到他们动动手指就能进入任何系统&#xff0c;还有很多走上黑客之路的朋友仅仅是因为自己的qq被盗了&#xff0c;或者游戏里的装备被别人偷了&#xff0c;想要自己盗回来&a…

听车企做开发朋友说,面试Framework 必问~

近期听在车企工作的朋友说&#xff0c;今年去他们公司面试的人比往年增长了30%左右&#xff0c;但实际面试达到标准的人屈指可数&#xff0c;大多都是从 Android 开发方向转过来的。 车企招聘要求有哪些&#xff1f; 每个车企因为业务部门的不同&#xff0c;他们的要求也会有…

Linux操作系统基础知识命令参数详解

Linux操作系统 RAID分组 RAID JBOD RAID JBOD的意思是Just a Bunch Of Disks&#xff0c;是将多块硬盘串联起来组成一个大的存储设备&#xff0c;从某种意义上说这种类型不被算作RAID&#xff0c;在维基百科里JBOD同时也被归入非RAID架构。RAID JBOD将所有的磁盘串联成一个单…

保持超低温环境新方法:功耗降至十分之一!

&#xff08;图片来源&#xff1a;网络&#xff09;量子比特是量子计算机的主要构建部分&#xff0c;然而热量会导致量子比特容易出错&#xff0c;因此量子系统通常保存在超低温稀释制冷机内&#xff0c;可以将温度保持在绝对零度&#xff08;−273.15℃&#xff09;以上。但是…

如何使评论具有可操作性?取悦客户的指南

永远不要低估承认的力量。 当品牌与客户互动时&#xff0c;认可会带来更好的关系和更好的沟通。与买家和客户建立更多的个人联系意味着品牌需要证明他们支持他们的产品和客户。评论是利用客户分享他们的故事的那些时刻的绝佳机会。 为什么评论在 SaaS 中至关重要 在 B2B 软件的…

【python学习笔记】:如何去除字符串中空格

在输入数据时&#xff0c;很有可能会无意中输入多余的空格&#xff0c;或者在一些场景中&#xff0c;字符串前后不允许出现空格和特殊字符&#xff0c;此时就需要去除字符串中的空格和特殊字符。 【注意&#xff1a;这里的特殊字符&#xff0c;指的是制表符&#xff08;\t&…

ASEMI高压MOS管ASE65R330参数,ASE65R330图片

编辑-Z ASEMI高压MOS管ASE65R330参数&#xff1a; 型号&#xff1a;ASE65R330 漏极-源极电压&#xff08;VDS&#xff09;&#xff1a;650V 栅源电压&#xff08;VGS&#xff09;&#xff1a;20V 漏极电流&#xff08;ID&#xff09;&#xff1a;12.5A 功耗&#xff08;P…

57 - 深入解析任务调度

---- 整理自狄泰软件唐佐林老师课程 文章目录1. 问题1.1 思考1.2 实例分析&#xff1a;问题分析及解决2. 深入讨论2.1 任务调度的定义2.2 关于调度算法的分类2.3 什么时候进行任务调度2.4 任务的分类2.5 关于优先级调度2.6 问题2.7 调度算法的终极目标2.8 课后扩展1. 问题 系统…

在windows11上安装openssh服务端并修改端口号

在windows11上安装openssh服务端并修改端口号 目录1.软件下载地址2.修改端口3.启动ssh原文链接&#xff1a;https://blog.csdn.net/qq_62129885/article/details/1268467751.软件下载地址 Release v9.2.0.0p1-Beta PowerShell/Win32-OpenSSH (github.com) https://github.co…

浅谈智能电力运维管理系统在物业小区的应用分析

安科瑞 李亚俊 0引言 由于部分住宅小区存在电力设施纸质档案破损缺失、产权分界不清、查找故障点所在箱变&#xff08;箱式变电站&#xff0c;下同&#xff09;位置困难或小区出入口路径不明等情况&#xff0c;影响了抢修效率。为此&#xff0c;国网辽宁沈阳市沈北新区供电公…