Vue CLI 的服务介绍与使用（2024-05-20）

news2024/11/17 11:30:22

1、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

  • 通过 @vue/cli 实现的交互式的项目脚手架。

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

  • 一个运行时依赖 (@vue/cli-service)，该依赖：

    • 可升级；

    • 基于 webpack 构建，并带有合理的默认配置；

    • 可以通过项目内的配置文件进行配置；

    • 可以通过插件进行扩展。

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

2、CLI 该系统中的组件

Vue CLI 有几个独立的部分，你会发现这个仓库里同时管理了多个单独发布的包。

2.1 CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

2.2 CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

  • 加载其它 CLI 插件的核心服务；
  • 一个针对绝大部分应用优化过的内部的 webpack 配置；
  • 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

如果你熟悉 create-react-app 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。

2.3 CLI 插件

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。

3、CLI使用的命令

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。

你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

这是你使用默认 preset 的项目的 package.json：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

你可以通过 npm 或 Yarn 调用这些 script：

npm run serve
# OR
yarn serve

如果你可以使用 npx (最新版的 npm 应该已经自带)，也可以直接这样调用命令：

npx vue-cli-service serve

提示

你可以通过 vue ui 命令使用 GUI 运行更多的特性脚本。

这里有一个 GUI 的 webpack Analyzer：

UI webpack Analyzer

3.1 vue-cli-service serve

用法：vue-cli-service serve [options] [entry]

选项：

  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

除了通过命令行参数，你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器。

命令行参数 [entry] 将被指定为唯一入口 (默认值：src/main.js，TypeScript 项目则为 src/main.ts)，而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。

3.2 vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]

选项：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录的内容
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。

这里还有一些有用的命令参数：

  • --modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。

  • --target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

  • --report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

3.3 vue-cli-service inspect

用法：vue-cli-service inspect [options] [...paths]

选项：

  --mode    指定环境模式 (默认值：development)

你可以使用 vue-cli-service inspect 来审查一个 Vue CLI 项目的 webpack config。

3.4 查看所有的可用命令

有些 CLI 插件会向 vue-cli-service 注入额外的命令。例如 @vue/cli-plugin-eslint 会注入 vue-cli-service lint 命令。你可以运行以下命令查看所有注入的命令：

npx vue-cli-service help

你也可以这样学习每个命令可用的选项：

npx vue-cli-service help [command]

3.5 缓存和并行处理

  • cache-loader 会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache 中——如果你遇到了编译方面的问题，记得先删掉缓存目录之后再试试看。

  • thread-loader 会在多核 CPU 的机器上为 Babel/TypeScript 转译开启。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

docker-如何将容器外的脚本放入容器内，将容器内的脚本放入容器外

docker-如何将容器外的脚本放入容器内，将容器内的脚本放入容器外

文章目录 前言docker-如何将容器外的脚本放入容器内，将容器内的脚本放入容器外、1. docker 如何将容器外的脚本放入容器内1.1. 验证 2. 将容器内的脚本放入容器外 前言 如果您觉得有用的话，记得给博主点个赞，评论，收藏一键三连啊&…
阅读更多...
JKI State Machine的特点与详细介绍

JKI State Machine的特点与详细介绍

JKI State Machine是一种基于状态机的LabVIEW架构，由JKI公司开发。它广泛用于开发复杂的应用程序，提供了一种灵活且可扩展的结构，适用于多种任务的管理和执行。其设计目标是提高开发效率、代码可读性和可维护性。 2. 基本架构 JKI State Ma…
阅读更多...
Spring Boot 中缓存的用法

Spring Boot 中缓存的用法

缓存（Caching）是提升应用性能的重要手段之一，通过减少不必要的数据计算和数据库访问，显著提高系统的响应速度。在 Spring Boot 中，缓存机制被集成得非常好，使得我们能够快速、方便地使用缓存功能。本文将介…
阅读更多...
基于Android studio 订餐、外卖系统

基于Android studio 订餐、外卖系统

目录 项目介绍 图片展示 运行环境 获取方式 项目介绍 具有登录，注册，修改密码，查看关于开发信息(可以填写自己的信息) 我的：可以查看菜品详情，填写份数，加入购物车， 购物车：可…
阅读更多...
【IDEA软件应用篇】IDEA基础开发设置和开发快捷键

【IDEA软件应用篇】IDEA基础开发设置和开发快捷键

IDEA是一种集成开发环境，可以运行java代码。 本篇文章你将收获到下面的知识： （1）IDEA如何设置字体大小快捷键 （2）如何解决每次进IDEA时，进去的页面都是上次使用完时的那个页面 （3&am…
阅读更多...
使用yum下载rpm包

使用yum下载rpm包

1、命令格式 yum install --downloadonly --downloaddir<directory> <package-name> --downloadonly&#xff1a;只下载选项而不进行安培训--downloaddir&#xff1a;指定下载目录&#xff0c;默认下载的RPM包会保在/var/cache/yum/x86_64/[centos|fedora-versio…
阅读更多...
Linux系统下Mysql忘记密码怎么解决

Linux系统下Mysql忘记密码怎么解决

一、对Mysql配置文件进行设置 1、找到/etc/mysql/my.cnf路径下&#xff0c;用Vi命令编辑my.cnf配置文件&#xff0c;命令如下&#xff1a; # 以管理员身份登录 sudo su # 输入管理员密码 # 登录成功后&#xff0c;找到Mysql的配置文件-->Mysql配置文件默认在此 cd /etc/my…
阅读更多...
异相（相位不平衡）状态下的合成器效率分析-理论与ADS仿真

异相（相位不平衡）状态下的合成器效率分析-理论与ADS仿真

异相&#xff08;相位不平衡&#xff09;状态下的合成器效率分析-理论与ADS仿真 12、ADS使用记录之功分器设计中简单介绍了威尔金森功分器的设计方法。一般来讲&#xff0c;功分器反过来就能作为合路器使用&#xff0c;在输入信号相位一致的情况下&#xff0c;各种合路器的效率…
阅读更多...
YOLOv8独家改进：mamba系列 | 视觉态空间（VSS）块结合C2f二次创新，提升捕捉广泛的上下文信息 | VMamba2024年最新成果

YOLOv8独家改进：mamba系列 | 视觉态空间（VSS）块结合C2f二次创新，提升捕捉广泛的上下文信息 | VMamba2024年最新成果

💡💡💡创新点：Mamba UNet采用了纯基于视觉Mamba（VMamba）的编码器-解码器结构，融入了跳跃连接，以保存网络不同规模的空间信息。这种设计有助于全面的特征学习过程，捕捉医学图像中复杂的细节和更广泛的语义上下文。我们在VMamba块中引入了一种新的集成机制，以确保编…
阅读更多...
Linux之共享内存mmap用法实例(六十三)

Linux之共享内存mmap用法实例(六十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
通过注意力调节实现更好的文本到图像生成对齐

通过注意力调节实现更好的文本到图像生成对齐

近年来&#xff0c;生成性AI技术在众多领域取得了前所未有的进步。大规模预训练模型的出现激发了各种下游任务中的新应用。这在文本到图像生成领域尤为明显&#xff0c;例如Stable Diffusion、DALL-E 2和Imagen等模型已经显著展示了它们的能力。尽管如此&#xff0c;复杂提示中…
阅读更多...
Go语言的pprof工具是如何使用的？

Go语言的pprof工具是如何使用的？

文章目录 Go语言的pprof工具详解pprof的使用runtime/pprofnet/http/pprof 快速开始获取采样数据通过pprof工具进行性能分析总结 Go语言的pprof工具详解 Go语言作为一个高性能、高并发的编程语言&#xff0c;对性能优化有着极高的要求。在Go语言的标准库中&#xff0c;pprof是一…
阅读更多...
架构篇44：互联网架构模板：“平台”技术

架构篇44：互联网架构模板：“平台”技术

文章目录 运维平台测试平台数据平台管理平台小结当业务规模比较小、系统复杂度不高时，运维、测试、数据分析、管理等支撑功能主要由各系统或者团队独立完成。随着业务规模越来越大，系统复杂度越来越高，子系统数量越来越多，如果继续采取各自为政的方式来实现这些支撑功能，会…
阅读更多...
回溯大法总结

回溯大法总结

前言 本篇博客将分两步来进行&#xff0c;首先谈谈我对回溯法的理解&#xff0c;然后通过若干道题来进行讲解&#xff0c;最后总结 对回溯法的理解 回溯法可以看做蛮力法的升级版&#xff0c;它在解决问题时的每一步都尝试所有可能的选项&#xff0c;最终找出所以可行的方案…
阅读更多...
对安卓手机上损坏的 SD 卡进行故障排除：恢复提示和修复

对安卓手机上损坏的 SD 卡进行故障排除：恢复提示和修复

概括 如果您总是在旅途中&#xff0c;那么您很可能每天都在使用 SD 卡。这些微小但功能强大的闪存已经变得和手机的内部存储一样有用。它们可以存储数据并移动您想要的任何数据类型&#xff0c;因为它们在 Android 设备上添加了额外的存储空间。不幸的是&#xff0c;他们可能会…
阅读更多...
产品推荐 | 基于Xilinx XCKU115的半高PCIe x8 硬件加速卡

产品推荐 | 基于Xilinx XCKU115的半高PCIe x8 硬件加速卡

一、板卡概述 本板卡系我公司自主研发&#xff0c;采用Xilinx公司的XCKU115-3-FLVF1924-E芯片作为主处理器&#xff0c;主要用于FPGA硬件加速。板卡设计满足工业级要求。如下图所示&#xff1a; 二、功能和技术指标 板卡功能 参数内容 主处理器 XCKU115-3-FLVF1924-E 板卡…
阅读更多...
Java网络编程之TCP协议核心机制(三)

Java网络编程之TCP协议核心机制(三)

题外话 最近学习内容很多嗷 正题 延时应答机制 当客户端发送数据到服务器时,服务器不会立即返回ACK,而是等待一会再返回ACK 这段等待时间应用程序可能会消化掉接收缓冲区中的数据,当服务器返回ACK时,就会携带此时接收缓冲区大小的信息 当客户端下次再发送数据的时候就可以…
阅读更多...
JMeter学习笔记一

JMeter学习笔记一

一、JMeter 背景&#xff1a;移动互联网 -- 小程序 移动APPH5 前后端分离&#xff08;java&#xff0c;C&#xff0c;C#&#xff09; H5 JS Vue 接口测试 (Postman,jmeter,Apifox,ApiPost) 我怎么发送请求&#xff1f; Http接口是一个特殊的URL地址&#xff0c;当有人访问这个地…
阅读更多...
Java订餐系统源码 springboot点菜系统源码

Java订餐系统源码 springboot点菜系统源码

Java订餐系统源码 springboot点菜系统源码 源码下载地址&#xff1a;https://download.csdn.net/download/xiaohua1992/89341358 功能介绍&#xff1a; 前台登录&#xff1a;前台登录&#xff1a; ①首页&#xff1a;菜品信息推荐、菜品信息展示、查看更多 ②菜品信息&…
阅读更多...
SQL刷题笔记day3——第二大值

SQL刷题笔记day3——第二大值

1题目 我的错误代码&#xff1a; select emp_no,salary from salaries where salary (select salary from salaries group by salary order by salary limit 1,1 ) order by emp_no asc 正确代码&#xff1a; select emp_no,salary from salaries where salary (select sal…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023