Vue CLI 提供了哪些功能
前言
Vue CLI 为开发者提供了一整套强大且灵活的工具链，极大地提升了开发效率和代码质量。无论是创建项目、管理依赖、配置环境，还是进行测试和优化，Vue CLI 都能为你提供全面的支持。本文将深入探讨 Vue CLI 所提供的各种功能，并展示其在实际开发中的应用。
功能列表
1. 快速创建项目
Vue CLI 最基础的功能就是通过简单的命令创建一个全新的 Vue 项目。只需要运行以下命令：
npm install -g @vue/cli
vue create my-project
Vue CLI 会引导你一步一步配置项目，比如选择模板、配置 TypeScript、添加路由等。最终，它会生成一个包含所有必要依赖和配置的项目结构，让你可以立即开始开发。
2. 图形化用户界面
如果你对命令行不太熟悉，Vue CLI 还提供了一个图形化用户界面（GUI）。你只需要运行：
vue ui
这会启动一个本地服务器，并在浏览器中打开一个图形化界面。在这个界面中，你可以创建、管理、配置项目，安装插件等等，所有操作都非常直观。
3. 插件系统
Vue CLI 采用了插件化的设计，几乎所有功能都是通过插件实现的。创建项目时可以选择安装官方推荐的插件，比如：
- Vue Router
- Vuex
- TypeScript
- ESLint
你也可以在项目创建后使用 vue add 命令来添加新的插件。比如，你想在项目中添加 Vue Router 和 Vuex，只需要运行：
vue add router
vue add vuex
4. 自定义配置
Vue CLI 的配置是高度可定制的。你可以通过 vue.config.js 文件来覆盖默认配置，比如修改 webpack 配置、代理 API 请求、设置环境变量等。比如，你想修改 webpack 的配置，可以这样做：
// vue.config.js
module.exports = {configureWebpack: {plugins: [new MyAwesomeWebpackPlugin()]}
}
5. 开发服务器和热更新
在开发过程中，Vue CLI 提供了一个功能强大的开发服务器，只需要运行以下命令：
npm run serve
这个开发服务器支持热模块替换（HMR），也就是说，当你修改代码并保存时，浏览器会自动刷新，甚至可以只替换修改的部分代码而不刷新整个页面，让开发更加高效。
6. 构建和优化
当你准备发布你的 Vue 应用时，可以使用以下命令进行构建：
npm run build
Vue CLI 会自动进行代码压缩、分割和优化，使你的应用具有更快的加载速度和更好的性能。
7. 单元测试和端到端测试
Vue CLI 支持单元测试和端到端测试，并且提供了配置工具，比如 Jest 和 Cypress。你可以在创建项目时选择需要的测试工具，或者之后使用插件添加。配置好后，可以运行以下命令进行测试：
npm run test:unit
npm run test:e2e
8. 多环境配置
Vue CLI 允许你轻松地管理不同的环境配置，比如开发环境、生产环境和测试环境。你可以在项目根目录下创建 .env 文件来定义环境变量，比如：
// .env.development
VUE_APP_API_BASE_URL=http://localhost:3000// .env.production
VUE_APP_API_BASE_URL=https://api.myapp.com
在代码中使用这些环境变量，可以通过 process.env.VUE_APP_API_BASE_URL 访问。
9. 现代模式和传统模式
Vue CLI 支持现代模式（modern mode）构建，这种模式会生成两套包：一套是支持现代浏览器的 ES2015+ 代码，另一套是传统的 ES5 代码。现代浏览器会优先加载现代包，从而提供更好的性能和更小的包体积。
启用现代模式非常简单，只需在构建命令后添加 --modern 参数：
npm run build --modern
这对于优化应用加载速度非常有帮助，特别是在移动设备上。
10. PWA 支持
Vue CLI 提供了一个 PWA（渐进式 Web 应用）插件，可以帮助你将 Vue 应用转变为 PWA。PWA 能提供离线访问、推送通知等功能，提升用户体验。
要添加 PWA 支持，只需运行以下命令：
vue add pwa
然后你可以在项目中配置 PWA 的相关选项，比如 Service Worker、缓存策略、离线支持等。
11. 国际化支持
如果你的应用需要多语言支持，Vue CLI 也有相应的插件。安装这个插件可以帮助你轻松地管理和翻译多语言内容：
vue add i18n
安装后，你可以在项目中配置多语言选项，并在组件中使用 $t 方法进行翻译。
12. 配置代理
在开发过程中，有时需要将 API 请求代理到不同的服务器。Vue CLI 提供了简单的代理配置，你可以在 vue.config.js 中设置开发服务器的代理选项：
module.exports = {devServer: {proxy: {'/api': {target: 'http://api.example.com',changeOrigin: true,pathRewrite: { '^/api': '' }}}}
}
这样，当你在代码中发 /api 请求时，开发服务器会自动将其代理到 http://api.example.com，并移除前缀 /api。
13. 自动化代码审查和格式化
为了保持代码的一致性和质量，Vue CLI 提供了 ESLint 和 Prettier 插件，可以帮助你自动化代码审查和格式化。你可以在创建项目时选择这些工具，或者之后添加：
vue add eslint
vue add prettier
然后你可以运行以下命令来检查和修复代码：
npm run lint
npm run lint --fix
14. 持续集成支持
Vue CLI 生成的项目结构非常适合与持续集成（CI）工具集成，比如 Travis CI、CircleCI 和 GitHub Actions。你可以在项目根目录中添加相应的配置文件，比如 .travis.yml 或 .github/workflows/ci.yml，来自动化构建和测试流程。
示例：GitHub Actions 配置
name: CIon: [push]jobs:build:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- name: Install dependenciesrun: npm install- name: Run testsrun: npm run test:unit- name: Build projectrun: npm run build
总结
综上所述，Vue CLI 是 Vue.js 生态系统中的重要组成部分，为开发者提供了从项目创建到持续集成的一站式解决方案。它不仅简化了开发流程，还通过插件和自定义配置满足了多样化的需求。无论你是初学者还是经验丰富的开发者，Vue CLI 都是一个不可或缺的工具。希望通过本文的介绍，你能更好地理解和利用 Vue CLI 的强大功能，从而在实际项目中取得更高效、更优质的开发体验。
相关文章：
Vue CLI 提供了哪些功能
前言 Vue CLI 为开发者提供了一整套强大且灵活的工具链，极大地提升了开发效率和代码质量。无论是创建项目、管理依赖、配置环境，还是进行测试和优化，Vue CLI 都能为你提供全面的支持。本文将深入探讨 Vue CLI 所提供的各种功能，并…...
网络爬虫的原理
网络爬虫就是根据网络，把上面的相关信息比如源代码以字符串的形式爬取下来，并且涉及到网站下的一系列网站。 DNS域名解析服务器可以通过ping域名/ip来测试是否连通，dns可以记录网站访问次数，从而评估出网站的使用权重，…...
02_Django路由Router
二、Django路由Router 在实际开发过程中，一个Django 项目会包含很多的 app ，这时候如果我们只在主路由里进行配置就会显得杂乱无章，所以通常会在每个 app 里，创建各自的urls.py路由模块，然后从根路由出发，…...
计算属性和监听属性
Vue.js 中的计算属性与监听属性 Vue.js 是一个流行的前端框架，它提供了许多强大的特性来简化 Web 应用的开发。其中，计算属性（Computed Properties）和监听属性（Watchers）是两个非常重要的概念，…...
JAVA项目-------医院挂号系统
1，项目目的 1、科室管理：新增科室，删除科室（如果有医生在，则不能删除该科室），修改科室。 2、医生管理：录入医生信息，以及科室信息。修改医生信息（主要是修改…...
《Learn Three.js》学习（3）光源
前言： WebGL本身不支持光源，不使用three.js,则需使用着色程序来模拟光源。 学习大纲： Three.js中的光源 特定光源的使用时机 如何调整和配置所有光源的行为 如何创建镜头光晕 光源表 基础光源：THRER.AmbientLight、THERE.Point…...
npm error code ETIMEDOUT 简单排查
今天突然没到一个仓库的ius问题。改完之后想发布npm包 出现下面的场景 npm addUser npm adduser npm notice Log in on https://registry.npmjs.org/ Create your account at: https://www.npmjs.com/login?next/login/cli/12596c8b-ba4a-4763-8a97-215087d380c4 Press ENTER…...
Flink高可用配置（HA）
从Flink架构中我们可以看到，JobManager这个组件非常重要，是中心协调器，负责任务调度和资源管理。默认情况下，每个Flink集群只有一个JobManager实例。这会产生单点故障（SPOF）：如果JobManager崩溃，则无法提交新程序，正在运行的程序也会失败。通过JobManager的高可用性，…...
VITE+VUE3+TS环境搭建
前言（与搭建项目无关）： 可以安装一个node管理工具，比如nvm，这样可以顺畅的切换vue2和vue3项目，以免出现项目跑不起来的窘境。我使用的nvm，当前node 22.11.0 目录 搭建项目 添加状态管理库&…...
windows上安装使用kubectl访问容器内服务
以云服务商提供的容器服务为例： 登录云服务，选择容器服务选择集群管理，选择集群概览点击kubeconfig按钮，进入说明页面官网下载kubectl 1、到 Kubernetes 版本变更 页面，查看 kubernetes 已发行版本，确认需要安装的 kubectl 版本。 2、kubectl 版本和集群的 kubernetes 版…...
软件工程第14章小测
单项选择题 第1题 定义类A和B Class A{ public B methodA(){...} } Class B{ public void methodB(){...} } 下面代码中的耦合是（）。 Class Client{ public static void main(String args){ A oa new A(); a.methodA().methodB(); } } …...
HarmonyOS4+NEXT星河版入门与项目实战（23）------组件转场动画
文章目录 1、控件图解2、案例实现1、代码实现2、代码解释3、实现效果4、总结1、控件图解 这里我们用一张完整的图来汇整 组件转场动画的用法格式、属性和事件，如下所示： 2、案例实现 这里我们对上一节小鱼游戏进行改造，让小鱼在游戏开始的时候增加一个转场动画，让小鱼自…...
word转pdf
在线xml格式化： 在线 XML 格式化 | 菜鸟工具 Java使用FreeMarker自动生成Word文档（带图片和表单） Java使用FreeMarker自动生成Word文档（带图片和表单）_freemarker word模板-CSDN博客 将word转pdf JAVA 使用aspose…...
@bytemd/vue掘金markdown插件预览内容有误
vue项目使用bytemd/vue 来预览字符串格式的markdown内容，总会多出如图的一段代码， 请问有没有大佬知道为什么？ 很急，求教！！！！！...
产品知识培训全面指南
在当今竞争激烈的市场环境中，产品知识已成为企业成功的关键因素。特别是对于软件即服务（SaaS）公司而言，产品的复杂性要求团队对产品有深入的了解，以便有效地与潜在客户沟通并促成交易。本指南将深入探讨产品知识培训的…...
VSCode修改资源管理器文件目录树缩进（VSCode目录结构、目录缩进、文件目录外观）workbench.tree.indent
文章目录 方法点击左下角小齿轮点击设置点击工作台，点击外观，找到Tree: Indent设置目录树的缩进 方法 点击左下角小齿轮 点击设置 点击工作台，点击外观，找到Tree: Indent设置目录树的缩进 "workbench.tree.indent"默认…...
周鸿祎再次“创业”，盯上百度
周鸿祎特地拍了部短剧来推广的新产品，终于上线了。 11月27日晚间，360正式发布多模态内容创作引擎“纳米搜索”。 作为当前AI应用最红的赛道之一，AI搜索已经有腾讯、秘塔、商汤、抖音等公司入局。传统搜索老大百度也在发力。竞争不妨碍有搜索…...
夜神模拟器+安卓7安装burpsuite系统证书
夜神模拟器安卓7安装burpsuite系统证书 安卓 7.0 以上安装 CA 证书： 安卓 5 所安装的 burp 证书是安装到系统根目录下的，从 Android 7.0 开始，系统不再信任用户 CA 证书，所以需要把 CA 证书安装到系统 CA 证书目录。 效果: 导出…...
TavilySearchResults报错
报错 pydantic_core._pydantic_core.ValidationError: 1 validation error for TavilySearchAPIWrapper Value error, Did not find tavily_api_key, please add an environment variable TAVILY_API_KEY which contains it, or pass tavily_api_key as a named parameter. …...
avcodec_alloc_context3，avcodec_open2，avcodec_free_context，avcodec_close
avcodec_alloc_context3 是创建编解码器上下文，需要使用 avcodec_free_context释放 需要使用avcodec_free_context 释放 /** * Allocate an AVCodecContext and set its fields to default values. The * resulting struct should be freed with avcodec_free_co…...
HttpClient
是apache旗下的项目 可以用来提供高效的 最新的 功能丰富的 支持HTTP协议的客户端编程工具包，并且支持HTTP协议最新的版本和建议 核心API HttpClient HttpClientsCloseableHttpClientHttpGetHttpPost 发送请求步骤 创建HttpClient对象创建Http请求对象调用H…...
Flink解决延迟数据问题
总结： 水印：对于迟到数据不长 allowedLateness: 迟到时间很长 侧道输出：对于迟到时间特别长 对于延迟数据的理解： 水印机制(水位线、watermark)机制可以帮助我们在短期延迟下，允许乱序数据的到来。 这个机制很好的…...
基于matlab程序实现人脸识别
1.人脸识别流程 1.1.1基本原理 基于YCbCr颜色空间的肤色模型进行肤色分割。在YCbCr色彩空间内对肤色进行了建模发现，肤色聚类区域在Cb—Cr子平面上的投影将缩减，与中心区域显著不同。采用这种方法的图像分割已经能够较为精确的将人脸和非人脸分割开来。…...
ESP32 wifi smartConfig 配网时密码错误导致一直死循环问题解决
项目场景 硬件：ESP32-LyraT-Mini V1.2开发板，使用的是ESP32-WROVER-E 模组。 程序：基于smart_config示例程序测试 问题描述 烧录程序后，debug打印“smartconfig_example: Scan done”信息后，打开手机app“EspTouch”进行配网，如果密码输入正确，正常的debug信息如下：…...
串口通讯介绍
详情学习 12. 串口通讯与终端设备 — [野火]嵌入式Linux基础与应用开发实战指南——基于i.MX6ULL开发板 文档 (embedfire.com) 问题 DB9接口 RS232,RS485 标准DB9接口(串口通信线标准接口)_485接口接线方法9针-CSDN博客 DB9 各引脚定义 1 DCD 载波检测 2 RX 接收数据…...
出于安全考虑，你的平板电脑已设置为禁止安装来源不明的应用，对于这种工业的安卓平板，应该怎么解决问题呢
在一些工业安卓平板上，出于安全考虑，通常会禁止安装来自未知来源的应用程序。这是为了防止恶意软件或不可信的应用程序被安装到设备上。为了绕过这个限制并安装来自未知来源的应用程序，你可以按照以下步骤进行操作： 1. 启用“未知…...
Java技术复习提升 15IO流
先给各位读者致歉 笔者因身体抱恙 未能及时更新 以后会按时更新 和大家一起学习探究~ 第15章 IO流 15.1 文件 文件就是保存数据的地方 文件流 15.2 常用文件操作 创建文件对象构造器和方法 import org.junit.Test;import java.io.File; import java.io.IOException;publ…...
Oracle 19C Data Guard 单实例1+1部署（Duplicate方式）
环境描述 项目主库备库操作系统CentOS 7.9CentOS 7.9数据库版本Oracle 19.3.0.0Oracle 19.3.0.0ORACLE_UNQNAMEhishisdgIP地址10.172.1.10110.172.1.102Hostnamehisdb01hisdb02SIDhishisdb_namehishisdb_unique_namehishisdg 说明 主库和备库建议采用相同服务器配置。主库和…...
网安小白的端口关闭实践
proceeding 扫描 $ nmap --top-ports 10000 10.162.8.227 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-29 17:07 CST Nmap scan report for star (10.162.8.227) Host is up (0.00023s latency). Not shown: 8367 closed tcp ports (conn-refused) PORT ST…...
微软要求 Windows Insider 用户试用备受争议的召回功能
拥有搭载 Qualcomm Snapdragon 处理器的 Copilot PC 的 Windows Insider 计划参与者现在可以试用 Recall，这是一项臭名昭著的快照拍摄 AI 功能，在今年早些时候推出时受到了很多批评。 Windows 营销高级总监 Melissa Grant 上周表示：“我们听…...
nginx反向代理、负载均衡
nginx反向代理、负载均衡 一、反向代理 proxy模块1、作用2、语法3、配置后端服务器记录真实的客户端地址 二、负载均衡 upstream模块2.1 负载均衡作用2.2 调度算法/策略2.3 配置语法 一、反向代理 proxy模块 1、作用 提升业务的性能、并发能力 隐藏后端真实业务服务器的信息&…...
mysql集群NDB方式部署
1. 基本信息 部署机器角色部署路径192.168.0.1管理节点部署目录: /alidata1/mysql-cluster-8.4.3192.168.0.2管理节点192.168.0.3数据/SQL节点数据目录:192.168.0.4数据/SQL节点/alidata1/mysql-cluster-8.4.3/data/ndb-mgmd192.168.0.5数据节点 – 新增/alidata1/mysql-clust…...
Fabric.js 中文文档
Fabric.js 中文文档 基于canvas画布的实用类Fabric.js的使用 4、Fabric.js 常用的方法&事件 Fabric.js 画布 defaultCursor 属性(1) 官网文档地址：http://fabricjs.com/docs/github 地址：https://github.com/fabricjs/fabric.js Demo地址&#x…...
【面试重难点问题】c++中为什么可以函数重载，但是c语言中不可以
本文章是对于“c中为什么可以函数重载，但是c语言中不可以”这个问题的探究： 当然这是一个值得深入探讨的问题。在面对难题时，我们常常会竭尽全力寻找答案，不惜挖掘三尺以探究竟。面对上面这个问题时，理解计算机系统的…...
Elasticsearch优化汇总
文章目录 引言硬件设置优化禁用swap给系统留足够的内存JVM配置使用更快的硬件,使用 SSD 参数优化分片设计增加Buffer大小(增加吞吐量)预热文件系统 cache es查询设计优化预索引数据使用filter代替query字段映射避免使用脚本优化日期搜索为只读索引执行 force-merge预热全局序号…...
【落羽的落羽 C语言篇】指针·之其四
文章目录 一、字符指针变量二、数组指针变量1. 创建2. 数组指针类型3. 二维数组传参的本质 三、函数指针变量1. 创建2. 函数指针类型3. 函数指针的使用4. 分析两句“有趣”的代码（doge）5. typedef关键字 四、函数指针数组1. 创建2. 函数指针数组的用途—…...
十二、正则表达式、元字符、替换修饰符、手势和对话框插件、字符串截取
1. 正则表达式 1.1 基本使用 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title&g…...
嵌入式的应用领域有哪些
首先给大家介绍一下，STM32是意法半导体（STMicroelectronics）生产的32位微控制器（MCU）系列，采用ARM Cortex-M内核设计，以其高性能、低功耗和广泛的应用而闻名。 那么意法半导体是在…...
git merge ：开发分支与主分支的交互
一、开发分支（dev）上的代码达到上线的标准后，要合并到 master 分支 git checkout dev git pull git checkout master git merge dev git push -u origin master 二、当master代码改动了，需要更新开发分支（dev&#x…...
OGRE 3D----4. OGRE和QML共享opengl上下文
在现代图形应用开发中，OGRE（Object-Oriented Graphics Rendering Engine）和QML（Qt Modeling Language）都是非常流行的工具。OGRE提供了强大的3D渲染能力，而QML则用于构建灵活的用户界面。在某些应用场景中，我们需要在同一个应用程序中同时使用OGRE和QML，并且共享OpenGL…...
ArcGIS 软件中路网数据的制作
内容导读 路网数据是进行网络分析的基础，它是建立网络数据集的数据来源。 本文我们以OSM路网数据为例，详细介绍OSM路网数据从下载，到数据处理，添加属性，完成符合网络分析的网络数据集的全部过程。 01 数据获取 比较…...
Milvus 2.5:全文检索上线,标量过滤提速,易用性再突破！
01. 概览 我们很高兴为大家带来 Milvus 2.5 最新版本的介绍。 在 Milvus 2.5 里，最重要的一个更新是我们带来了“全新”的全文检索能力，之所以说“全新”主要是基于以下两点： 第一，对于全文检索基于的 BM25 算法，我们采…...
Windows常用DOS指令（附案例）
文章目录 1.dir 查看当前目录2.cd 进入指定目录3.md 创建指定目录4.cd> 创建指定文件5.rd 删除指定空目录6.del 删除指定文件7.copy 复制文件8.xcopy 批量复制9.ren 改名10.type 在命令行空窗口打开文件11.cls 清空DOS命令窗口12.chkdsk 检查磁盘使用情况13.time 显示和设置…...
)
搜索二维矩阵 II(java)
题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性： 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 代码思路： 用暴力算法： class Solution {public boolean searchMatrix(…...
Webpack 的构建流程
Webpack 的构建流程可以概括为以下几个步骤： 1. 初始化： Webpack 读取配置文件（webpack.config.js），合并默认配置和命令行参数，初始化Compiler对象。 2. 构建依赖图： 从入口文件开始递归地分…...
Kylin Server V10 下 RocketMQ 主备自动切换模式部署
一、NameServer简介 NameServer 是一个注册中心，提供服务注册和服务发现的功能。NameServer 可以集群部署，集群中每个节点都是对等的关系，节点之间互不通信。 服务注册 Broker 启动的时候会向所有的 NameServer 节点进行注册，注意这里是向集群中所有的 NameServer 节点注册…...
Linux启动中出现“psi: inconsistent task state!”错误可能原因
在Linux系统中，psi: inconsistent task state! 异常日志通常与 PSI（Pressure Stall Information）相关。PSI 是 Linux 内核中的一个特性，用于监控系统资源的压力情况，如 CPU、内存和 I/O 等。该日志信息表明在处理任务状…...
FCBP 认证考试要点摘要
理论知识 数据处理与分析：包括数据的收集、清洗、转换、存储等基础操作，以及数据分析方法，如描述性统计分析、相关性分析、数据挖掘算法等的理解和应用 。数据可视化：涉及图表类型的选择与应用，如柱状图、折线图、饼图…...
——设置服务、关闭端口)
ubuntu防火墙入门(一)——设置服务、关闭端口
本机想通过git clone gitgithub.com:skumra/robotic-grasping.git下载代码，firewall-config中需要为当前区域的防火墙开启SSH服务吗 是的，如果你想通过 git clone gitgithub.com:skumra/robotic-grasping.git 使用 SSH 协议从 GitHub 下载代码࿰…...
yt6801 ubuntu有线连接驱动安装
耀世16pro的有线网卡驱动安装 下载地址: YT6801 千兆PCIE以太网控制器芯片 1. 创建安装目录 mkdir yt68012. 解压驱动文件 unzip yt6801-linux-driver-1.0.27.zip -d yt68013. 进入驱动目录 cd yt68014. 安装驱动 以 root 权限运行安装脚本： sudo su ./yt_ni…...