Vue CLI 服务

news/2024/4/20 16:53:04/文章来源:https://blog.csdn.net/2201_75866484/article/details/130279576

使用命令

在一个 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:

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] 将被指定为唯一入口,而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。

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 会根据构建统计生成报告,它会帮助你分析包中包含的模块们的大小。

vue-cli-service inspect

用法:vue-cli-service inspect [options] [...paths]选项:--mode    指定环境模式 (默认值:development)

你可以使用 vue-cli-service inspect 来审查一个 Vue CLI 项目的 webpack config。更多细节请查阅审查 webpack config。

#查看所有的可用命令

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

npx vue-cli-service help

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

npx vue-cli-service help [command]

缓存和并行处理

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

Git Hook

在安装之后,@vue/cli-service 也会安装 yorkie,它会让你在 package.json 的 gitHooks 字段中方便地指定 Git hook:

{"gitHooks": {"pre-commit": "lint-staged"},"lint-staged": {"*.{js,vue}": ["vue-cli-service lint","git add"]}
}

注意

yorkie fork 自 husky 且并与后者不兼容。

配置时无需 Eject

通过 vue create 创建的项目无需额外的配置就已经可以跑起来了。插件的设计也是可以相互共存的,所以绝大多数情况下,你只需要在交互式命令提示中选取需要的功能即可。

不过我们也知道满足每一个需求是不太可能的,而且一个项目的需求也会不断改变。通过 Vue CLI 创建的项目让你无需 eject 就能够配置工具的几乎每个角落。更多细节请查阅配置参考。

 

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

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

相关文章

电脑突然变成绿屏错误代码无法使用怎么办?

电脑突然变成绿屏错误代码无法使用怎么办?有用户使用电脑的时候,电脑桌面变成了绿屏的显示,所有的操作无法继续进行。遇到这个问题要怎么去进行解决呢?来看看详细的解决方法教学吧。 准备工作: 1、U盘一个(…

(原创)Flutter基础入门:手把手教你搭建Flutter混合项目

前言 Flutter是Google开源的构建用户界面(UI)工具包 支持在不同平台构建一致的ui效果 但在实际业务中,一般不会整个APP都用纯Flutter开发 尤其一些老的项目,会采用接入Flutter的方式来混合开发 那么今天就主要讲一下如何搭建一个…

SQLServer:Win/Linux环境安装及一键部署脚本

1. Win安装SQLServer CSDN已有完整安装流程,亲测可用。----》Windows安装SQLServer流程 2. Linux安装 SQLServer 2.1 设置镜像 curl https://packages.microsoft.com/config/rhel/7/mssql-server-2017.repo > /etc/yum.repos.d/mssql-server.repo 2.2 通过y…

深度学习模型参数量与训练数据量的平衡对泛化性能的影响

一、引言 深度学习模型在计算机视觉、自然语言处理等领域取得了显著的成果。为了获得泛化性能良好的模型,研究者需要在模型复杂度和训练数据量之间找到合适的平衡。本文将探讨这两者之间的关系以及如何在实际应用中实现最佳效果。 二、模型复杂度与训练数据量的关…

史上最严宝宝口粮新国标出台,DHA和维生素D可能无需额外补充了

自2023年2月22日起,我国婴幼儿配方食品(以下简称配方奶)新国标开始实施。这意味着2023年2月22日以后在中国上架销售的配方奶必须符合新国标,重新取得国家市场监督管理总局食品评审中心(CFE-SAMR)的注册。这…

改变思想,拥抱毒瘤,让公司走的更远

牛B的人物,早已经厌倦了中英文混杂,他们更进一步,使用中英文缩写,对普通人进行降维打击。更厉害的,造就新的名词,并科普出去。 有几项技术,我从心底里鄙视和厌恶,但每次在技术方案中…

【MCAL_Uart】-1.1-图文详解Uart串口协议

目录 1 什么是UART 2 UART的电平 3 UART的波特率 4 UART帧格式 4.1 start bit起始位 4.2 data bit数据位 4.3 parity bit奇偶校验位 4.4 stop bit停止位 5 什么是8-N-1 6 UART总线负载率计算 结尾 优质博文推荐阅读(单击下方链接,即可跳转&am…

Linux驱动之在Ubuntu下编译驱动模块——学习笔记(12)

为了方便驱动开发学习,了解一下在Ubuntu上进行驱动编译的流程。 一、下载对应的内核源码 首先要通过 uname -a查询一下自己的内核版本。 我这里下载的是 https://mirrors.edge.kernel.org/pub/linux/kernel/v5.x/linux-5.4.tar.gz 二、编译内核 (1&a…

功能安全ISO26262 道路车辆 功能安全审核及评估方法第3部分:软件层面

道路车辆 功能安全审核及评估方法 第3部分:软件层面 Road vehicles - Functional Safety Audit and Assessment Method - Part 3: Software Level (工作组草案) 2022.4.15 前  言 本文件按照GB/T 1.1—2020《标准化工作导则 第1部分…

Pytorch深度学习笔记(十)多分类问题

课程推荐:09.多分类问题_哔哩哔哩_bilibili 目录 1. 多分类模型 2. softmax函数模型 3. Loss损失函数 4.实战MNIST Dataset 之前,在逻辑斯蒂回归中我们提到了二分类任务,现在我们讨论多分类问题。 1. 多分类模型 与二分类不同的是多分…

Hive基础和使用详解

文章目录 一、启动hive1. hive启动的前置条件2. 启动方式一: hive命令3. 方式二:使用jdbc连接hive 二、Hive常用交互命令1. hive -help 命令2. hive -e 命令3. hive -f 命令4. 退出hive窗口5. 在hive窗口中执行dfs -ls /; 三、Hive语法1.DDL语句1.1 创建数据库1.2 两…

Redis 数据存储原理

核心模块如图 1-10。 图1-10 图 1-10 Client 客户端,官方提供了 C 语言开发的客户端,可以发送命令,性能分析和测试等。 网络层事件驱动模型,基于 I/O 多路复用,封装了一个短小精悍的高性能 ae 库,全称是 …

【人工智能】遗传算法

人工智能算法---遗传算法(基础篇) 知识导图:遗传算法(概念)1.初始化种群二进制编码与解码 2.选择操作3.交叉操作4.评估操作5.终止操作 知识导图: 遗传算法(概念) 可以把遗传算法类比…

Docker 快速入门

1、Docker 简介 Docker是一个开源的容器引擎,它可以帮助我们更快地交付应用。Docker可将应用程序和基础设施层隔离,并且能将基础设施当作程序一样进行管理。使用Docker,可更快地打包、测试以及部署应用程序,并可减少从编写到部署…

python的智能换行函数(一堆烦乱的判断)

def zntxt(txt):line30 #设置单行长度js,e,s,rs,aa,nm,x,y{},[],txt,[],,[],0,0n 1 if ord(s[0]) > 127 else 0for i in range(len(s)):m1 if ord(s[i]) > 127 else 0if m!n:rs.append(aa)aas[i]elif ilen(s)-1:aas[i]rs.append(aa)else:aas[i]nmfor i in rs: for j in…

搜索引擎找外贸客户

说起搜索引擎,我们每个人都不陌生,也许第一时间就能想到平日经常使用的“百度一下”和凭借强大算法及丰富功能占据近85%市场份额的谷歌搜索(Statista 2023年1月数据)这些耳熟能详的搜索引擎。对于外贸人而言搜索引擎也是非常实用的…

一文谈谈文心一言对比ChatGPT4.0的差距

对于想体验文心一言的朋友,可以进行申请尝试,快速入口 如果想体验ChatGPT的朋友,可以自行fq注册;但是由于现在限制注册并且不稳定,对于不会用梯子不想注册的朋友可以使用这个进行访问,快速入口 关于ChatG…

PMP证书备考攻略+PMP知识点汇总

一,考PMP好处多 1.能力提升 大型项目,领导专业团队 2.升职加薪 晋升管理岗,优先升职加薪 3.招投标加分 具有PMP证书,企业招标有加分 4.转型利器 助力转型,拓宽职业发展 5.公司支持 企业鼓励学习,报销费用 6…

C++模板使用

感谢你的阅读!!! 目录 感谢你的阅读!!! 举个例子: template 有什么意义为什么要用模板 与typedef的区别 使用方法 模板:隐式实例化与显示实例化 和非模板函数以及多个模板类…