Vue CLI 服务

news/2024/11/26 5:29:24/

使用命令

在一个 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.ppmy.cn/news/49729.html

相关文章

远程仓库的克隆和上传

要创建项目文件夹下打开Git Bush Here --> git clone 远程仓库地址 ! 没有权限访问 原因: 之前登过别人邮箱号,导致克隆失败 解决: 第一步. C盘->用户->电脑用户名->.gitconfig->用vscode打开删除信息,然后保存即可 . 第二步.电脑搜索找到 凭据管理器->wi…

算法的时间复杂度和空间复杂度(2)

计算斐波那契递归Fib的时间复杂度&#xff1f; long long Fib(size_t N) { if(N < 3) return 1; return Fib(N-1) Fib(N-2); } 因为递归先递推后回归&#xff0c;看起来规律像等比数列&#xff0c;也可以用错位相减法&#xff0c;因为斐波那契数列到第二项就不会再计算了&a…

2023-2029全球粘结剂喷射技术行业调研及趋势分析报告

2022年全球粘结剂喷射技术市场规模约5.8亿元&#xff0c;2018-2022年年复合增长率CAGR约为 %&#xff0c;预计未来将持续保持平稳增长的态势&#xff0c;到2029年市场规模将接近12亿元&#xff0c;未来六年CAGR为11.3%。 本文调研和分析全球粘结剂喷射技术发展现状及未来趋势&a…

【MyBatis】day02参数传递和映射

目录 第四章 Mybatis映射文件详解 第五章 Mybatis中参数传递问题 第六章 Mybatis参数传递【#与$区别】 第七章 Mybatis查询中返回值四种情况 第八章 Mybatis中自动映射与自定义映射 第四章 Mybatis映射文件详解 4.1 映射文件概述 MyBatis 的真正强大在于它的语句映射&am…

flac格式如何转mp3,3招帮你搞定

flac格式如何转mp3&#xff0c;3招帮你搞定的方法来啦。当你的音频是flac格式是不是很头疼&#xff0c;又不知道怎么转mp3 。然后网上搜索出很多方法又不知道从哪个下手&#xff0c;是不是很疑惑&#xff1f;那今天就来看看小编推荐的方法吧&#xff0c;一定让你眼前一亮&#…

四月润润润——十五天黑马第二天

知识点 已了解知识 函数、指针、结构体 C核心编程 面向对象 内存分区模型 C在程序执行时&#xff0c;将内存大方向划分为4个区域 代码区&#xff1a;存放函数体的二进制代码&#xff0c;由操作系统进行管理全局区&#xff1a;存放全局变量和静态变量以及常量栈区&#x…

四种方法可以实现判断字符串包含某个字符

小编介绍过js中使用indexOf() 方法判断字符串包含某个字是一个很好用的方法&#xff0c;但除了这个方法之外&#xff0c;JavaScript中还有四种方法可以实现判断字符串包含某个字符&#xff1a; 1、使用字符串search() 方法 search() 方法用于检索字符串中指定的子字符串&…

天梯赛 L3-025 那就别担心了

原题链接&#xff1a; PTA | 程序设计类实验辅助教学平台 题目描述&#xff1a; 下图转自“英式没品笑话百科”的新浪微博 —— 所以无论有没有遇到难题&#xff0c;其实都不用担心。 博主将这种逻辑推演称为“逻辑自洽”&#xff0c;即从某个命题出发的所有推理路径都会将结…