VUE——Vue CLI的原理与基本使用

news2024/11/26 17:50:02

摘要

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

  • 通过 @vue/cli 实现的交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service),该依赖:
    • 可升级;
    • 基于 webpack 构建,并带有合理的默认配置;
    • 可以通过项目内的配置文件进行配置;
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合,集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

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

一、Vue-Cli组件

Vue CLI 有几个独立的部分——如果你看到了我们的源代码,你会发现这个仓库里同时管理了多个单独发布的包。

1.1 CLI

CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目,或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。

1.2 CLI 服务

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

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

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

如果你熟悉 create-react-app 的话,@vue/cli-service 实际上大致等价于 react-scripts,尽管功能集合不一样。CLI章节涵盖了它的具体用法。

1.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。我们会在插件和 preset 章节进行深入讨论。

二、Vue-Cli安装

 Vue CLI 现已处于维护模式!,现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。 另外请参考 Vue 3 工具链指南 以了解最新的工具推荐。

Node 版本要求:Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包,安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue --version

如需升级全局的 Vue CLI 包,请运行:

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块(以 @vue/cli-plugin- 或 vue-cli-plugin- 开头),请在项目目录下运行 vue upgrade

用法: upgrade [options] [plugin-name]

(试用)升级 Vue CLI 服务及插件

选项:
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测,默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时,包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容

三、Vue-Cli项目创建

3.1 vue create 命令的方式创建

运行以下命令来创建一个新项目:

vue create hello-world

如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过,如果你仍想使用 vue create hello-world,则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd' 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。

如果你决定手动选择特性,在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

~/.vuerc

被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项,可以编辑这个文件。

在项目创建的过程中,你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc

vue create --help

用法:create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目


选项:

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化,并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

3.2 Vue ui 使用图形化创建

你也可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

3.3 拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

 四、插件和 Preset

博文参考

Vue CLI

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

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

相关文章

互联网企业更需要线上版的产品手册

互联网企业在不断发展变化的市场中&#xff0c;需要更加灵活和快速地适应市场需求&#xff0c;因此&#xff0c;线上版的产品手册对于互联网企业来说是非常重要的。 互联网企业更需要线上版的产品手册的原因 互联网用户更喜欢在线文档 互联网用户更喜欢在线文档&#xff0c;…

中创|没人比我更懂!马斯克发出警告:人类要小心人工智能

马斯克在过去十年对AI的态度一直非常鲜明&#xff0c;很早就对这个问题有深入地思考&#xff1a; 2014 “我们对AI要非常小心&#xff0c;这可能是我们最大的存在威胁。” 2016 “AI的未来发展方向可能并不乐观&#xff0c;起码不会所有结果都是好的。” 2017 “AI会比地…

中原银行 OLAP 架构实时化演进

中原银行 OLAP 架构实时化演进 1. OLAP 实时化建设背景2. OLAP 全链路实时化3. OLAP 实时化探索4. 未来探索方向 中原银行成立于 2014 年&#xff0c;是河南省唯一的省级法人银行&#xff0c;2017 年在香港联交所主板上市&#xff0c;2022 年 5 月经中国银保监会批准正式吸收合…

【问题解决】 网关代理Nginx 301暴露自身端口号

一般项目上常用Nginx做负载均衡和静态资源服务器&#xff0c;本案例中项目上使用Nginx作为静态资源服务器出现了很奇怪的现象&#xff0c;我们一起来看看。 “诡异”的现象 部署架构如下图&#xff0c;Nginx作为静态资源服务器监听8080端口&#xff0c;客户浏览器通过API网关…

跟晓月一起学:mysql中常用的命令汇总

前言 本文主要讲解了MySQL中常用的命令&#xff0c;感谢师父的耐心指导&#xff0c;师父博客&#xff1a;https://zmedu.blog.csdn.net 本文是对MySQL常用的两个命令的总结&#xff0c;一个是select &#xff0c;一个是show命令&#xff0c;很多时候我们监控MySQL需要监控MyS…

ABB 5SHY35L4520 AC10272001R0101/5SXE10-0181 IGCT模块

ABB 5SHY35L4520 AC10272001R0101/5SXE10-0181 IGCT模块 ABB 5SHY35L4520 AC10272001R0101/5SXE10-0181 IGCT模块 2、DCS的软件系统 DCS的软件体系如图2所示&#xff0c;通常可以为用户提供相当丰富的功能软件模块和功能软件包&#xff0c;控制工程师利用DCS提供的组态软件&…

STM32 USART串口

什么是串口 串口是串行接口 (Serial Interface)的简称&#xff0c;它是指数据一位一位地顺序传送&#xff0c;其特点是通信线路简单&#xff0c;只要一对传输线就可以实现双向通信&#xff08;可以直接利用电话线作为传输线&#xff09;&#xff0c;从而大大降低了成本&#xf…

优秀的 Verilog/FPGA开源项目介绍(三十七)- MATH库

DSP介绍 数字信号处理&#xff08; Digital Signal Processing)技术广泛地应用于通信与信息系统、信号与信息处理、自动控制、 雷达、军事、航空航天、医疗、家用电器等许多领域。DSP 技术可以快速地对采集的信号进行量化、变换、滤波、估值 、增强、压缩、识别等处理&#xff…

2023 linux驱动中probe函数的返回值,返回0成功。返回负数则失败,这个时候驱动向系统申请的有关资源都会被释放,如中断号,申请的内存等。实际测试。

一、在linux 驱动里面申请一个gpip&#xff0c;&#xff0c;gpip2b4 变换是 76 &#xff0c;dts 如下&#xff1a; m117b45 {compatible "xxx,m117b";reg <0x45>;pinctrl-names "default";pinctrl-0 <&m117b_gpio>;pwdn-gpios <&a…

数据库数据更新:从内存到磁盘,一步步揭开数据的神秘面纱!

大家好&#xff0c;我是小米&#xff01;今天我要和大家分享一下数据库数据更新的流程。作为一名热衷于技术分享的小伙伴&#xff0c;我希望通过本篇文章&#xff0c;帮助大家更好地理解数据库数据更新的过程。废话不多说&#xff0c;让我们开始吧&#xff01; 获取数据 在数据…

PM3328BP-6电源模块PIONEER MAGNETICS

PM3328BP-6电源模块PIONEER MAGNETICS PM3328BP-6电源模块PIONEER MAGNETICS DCS中的先进控制技术 DCS在控制上的最大特点是依靠各种控制、运算模块的灵活组态&#xff0c;可实现多样化的控制策略以满足不同情况下的需要&#xff0c;使得在单元组合仪表实现起来相当繁琐与复杂…

基于GO实现的简易博客,附源码

1、简介 此博客系统主要是基于GO、Gin、Gorm进行开发&#xff0c;以及采用lay-ui框架进行前端界面的开发&#xff0c;项目包含功能众多&#xff0c;基本上涵盖了博客系统的大部分需求。 此项目适合开发者练手学习&#xff0c;同时也适合高校毕业设计的作品。 以下对作品进行…

#经验分享#消防电源强切故障

工业园火灾报警控制器显示&#xff0c;13#厂房电源强切报故障&#xff0c;经过紧急处理&#xff0c;成功解决了故障问题。 据了解&#xff0c;故障原因是71#强切模块被修复大门时损坏模块破碎无法进行修复&#xff0c; 只留有接线底座&#xff0c;测试并检查底座线路正常。 坏…

如何查看jar包的官网地址

https://mvnrepository.com/ 使用artifactId搜索 点击要查看的版本 查看HomePage LicenseApache 2.0CategoriesJSON LibrariesTagsformatjsonOrganizationAlibaba GroupHomePageGitHub - alibaba/fastjson2: &#x1f684; FASTJSON2 is a Java JSON library with excellent…

Citespace和vosviewer文献计量学可视化SCI论文高效写作方法

【基于Citespace和vosviewer文献计量学相关论文 】 文献计量学是指用数学和统计学的方法&#xff0c;定量地分析一切知识载体的交叉科学。它是集数学、统计学、文献学为一体&#xff0c;注重量化的综合性知识体系。特别是&#xff0c;信息可视化技术手段和方法的运用&#xff…

tp6+企业付款到零钱

一 开通条件&#xff0c;就是首先要在微信平台设置好。 以下微信文档里有的&#xff0c;我这里大概掠几项比较重要的。 付款资金 企业付款到零钱资金使用商户号余额资金。 根据商户号的账户开通情况&#xff0c;实际出款账户有做区别&#xff1a; ◆ 默认情况下&#xff0c…

四、kafka集群与可靠性

Kafka集群的目标 1、高并发 2、高可用&#xff08;防数据丢失&#xff09; 3、动态伸缩 Kafka集群规模如何预估 吞吐量&#xff1a; 集群可以提高处理请求的能力。单个Broker的性能不足&#xff0c;可以通过扩展broker来解决。 磁盘空间&#xff1a; 比如&#xff0c;如…

C# 生成XML文档中如何去掉 xmlns=““

如果在XML 文档的指定了默认的命名空间&#xff0c;那么产生的文档中将会出现xmlns“”。 如何去掉这个烦人的xmlns“”? 网络上似乎都没有讲明白。有人提示: 当我们在AppendChild的时候&#xff0c;如果ParentNode是带有xmlns属性的&#xff0c;而你新加的节点&#xff0c;在…

SpringBoot 高校实验室资产管理系统-计算机毕设 附源码85189

SpringBoot高校实验室资产管理系统 摘 要 随着计算机技术的发展&#xff0c;特别是计算机网络技术与数据库技术的发展&#xff0c;使人们的生活与工作方式发生了很大的改观。本课题研究的高校实验室资产管理系统&#xff0c;主要功能模块包括后台首页&#xff0c;轮播图&#…

WindowManager中Surface申请流程

WindowManager中Surface申请流程 1、SurfaceFlinger 和 WindowManager2、WindowManager中Surface申请流程2.1 WMS侧添加界面时scheduleTraversals()2.2 Window更新过程时scheduleTraversals()2.3 Surface初始化申请2.4 简易时序图 3、对应画布Layer创建3.1 简易时序图 android1…