使用Vue CLI方式创建Vue3.0应用程序

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。新版本的 Vue CLI 的包名由原来的 vue-cli 改成了 @vue/cli。

在开发大型项目时,需要考虑项目的组织结构、项目构建和部署等问题。如果手动完成这些配置工作,工作效率会非常低。为此,Vue.js 官方提供了一款脚手架生成工具  Vue CLI,通过该工具可以快速构建项目,并实现一下项目的初始配置。

创建 Vue 应用程序的三种方式:

《使用CDN方式创建Vue3.0应用程序》

《使用NPM方式创建Vue3.0应用程序》

《使用Vue CLI方式创建Vue3.0应用程序》

1、Vue CLI 的安装

Vue CLI 是应用 node 编写的指令行工具,如果没有安装 node 可以参考本博文:《Node.js和npm的安装及配置》

需要进行全局安装,如果想安装它的最新版本,指令如下:

npm install -g @vue/cli

说明:

如果想安装 @vue/cli 的指定版本,可以添加安装的版本号。例如:npm install -g @vue/cli5.0.8

安装完成之后,可以在指令行中执行如下指令来检查版本是否正确,并验证 Vue CLI 是否安装成功:

vue --version

执行结果如下:

注意:Vue CLI 需要计算机连接互联网才能安装成功。

2、使用 Vue CLI 创建 Vue 应用程序

使用 Vue CLI 创建项目有两种方式,一种是使用 vue create 指令进行创建,另一种是通过 vue ui 指令启动图形界面进行创建。

2.1 使用 vue create 指令

打开一个新的cmd窗口(按快捷键“Win+R”,输入“cmd”) 

(1)通过 cmd 指令,进入要创建项目的目录

e:            -- 进入E盘
cd /Vue学习   -- 进入我的项目目录

(2)创建 Vue 项目的指令(重点)

在命令提示符窗口中,选择好项目的存储目录后。使用 vue create 指令创建一个名称是 myapp 的项目(注意:项目名称必须小写)。输入如下指令:

vue create myapp

 执行结果如下:

2.2 项目的配置选项

执行指令后,会提示选择一个 preset(预设)。一共有3个选项,前两个选项是默认设置,适合快速创建一个项目的原型。第3个选项“Manually select features”需要手动对项目进行配置。这里使用方向键↓选择“Manually select features”选项。

按 Enter 键,此时会显示项目的配置选项,通过键盘中的上下方向键进行移动,应用空格键进行选择,这里保持默认的 Babel 和 Linter / Formatter 的选中状态。

这些配置选项的说明如下表:

选项说明
Babel转码器,用于将 ES6 代码转换为 ES5 代码
TypeScript微软开发的开源编程语言,编译出来的 JavaScript 可运行于任何浏览器
Progressive Web App (PWA)Support支持渐进式 Web 应用程序
Router路由管理
VuexVue 的状态管理
CSS Pre-processorsCSS 预处理器(如 Less)
Linter / Formatter代码风格检查和格式校验
Unit Testing单元测试
E2E Testing端到端测试

按 Enter 键,此时会提示选择项目中使用的 Vue 的版本,这里选择默认的 3.x 版本。

按 Enter 键,此时会提示选择代码格式和校验选项的配置。第一个选项是指 ESLint 仅用于错误预防,后三个选项是选择 ESLint 和哪一种代码规范一起使用,这里选择默认选项。

按 Enter 键,此时会提示选择代码检查方式,这里选择默认选项“Lint on save”(保存时检测)。

按 Enter 键,此时会提示选择配置信息的存放位置。第一个选项是指在专门的配置文件中存放配置信息,第二个选项是将配置信息存储在 package.json 文件中,这里选择第一个选项。

按 Enter 键,此时会询问是否保存当前的配置。如果选择了保存,以后再创建项目时,就会出现保存过的配置,这里输入 N 表示不保存。

2.2 启动项目

根据提示在指令提示符窗口中输入指令 cd myapp 切换到项目目录,然后输入指令 npm run serve 启动项目。

项目启动后,在浏览器中访问:http://localhost:8080/,生成的页面如下:

说明:

要终止项目的运行,在指令提示窗口中按 Ctrl + C 组合键即可。

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

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

相关文章

【博士每天一篇文献-综述】A survey on few-shot class-incremental learning

阅读时间:2023-12-19 1 介绍 年份:2024 作者:田松松,中国科学院半导体研究所;李璐思,老道明大学助理教授;李伟军,中国科学院半导体研究所AnnLab; 期刊: Neu…

新型发电系统——光伏行业推动能源转型

一、发展背景 “十四五”期间,随着“双碳”目标提出及逐步落实,本就呈现出较好发展势头的分布式光伏发展有望大幅提速。就“十四五”光伏发展规划,国家发改委能源研究所可再生能源发展中心副主任陶冶表示,“双碳”目标意味着国家…

【linux】网络基础(3)——tcp协议

文章目录 TCP协议概括TCP头部格式TCP连接管理建立连接(三次握手)数据传输确认应答机制捎带应答 滑动窗口丢包问题 拥塞控制延时应达 终止连接(四次挥手) TCP协议概括 TCP是一个面向连接的协议,在传输数据之前需要建立连…

04.C1W3.Vector Space Models

目录 Vector Space ModelsWord by Word and Word by DocWord by Document DesignWord by Document DesignVector Space Euclidean DistanceEuclidean distance for n-dimensional vectors Euclidean distance in PythonCosine Similarity: IntuitionCosine SimilarityPrevious …

2024鲲鹏昇腾创新大赛集训营Ascend C算子学习笔记

异构计算架构(CANN) 对标英伟达的CUDA CuDNN的核心软件层,向上支持多种AI框架,向下服务AI处理器,发挥承上启下的关键作用,是提升昇腾AI处理器计算效率的关键平台。主要包括有各种引擎、编译器、执行器、算…

Tomcat的安装和虚拟主机和context配置

一、 安装Tomcat 注意:安装 tomcat 前必须先部署JDK 1. 安装JDK 方法1:Oracle JDK 的二进制文件安装 [rootnode5 ~]# mkdir /data [rootnode5 ~]# cd /data/ [rootnode5 data]# rz[rootnode5 data]# ls jdk-8u291-linux-x64.tar.gz [rootnode5 data]…

七、函数练习

目录 1. 写一个函数可以判断一个数是不是素数。(素数只能被1或其本身整除的数) 2. 一个函数判断一年是不是闰年。 3.写一个函数,实现一个整形有序数组的二分查找。 4. 写一个函数,每调用一次这个函数,使得num每次增…

Python 面试【★★★★】

欢迎莅临我的博客 💝💝💝,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

营销故事之扩大牙膏开口

职场营销故事“扩大牙膏开口”又可以说是“牙膏开口扩大1毫米”,为十大经典营销故事之一。某品牌的牙膏,包装精美,品质优良,备受顾客喜爱,连续10年营业额保持10%-20%的增幅。可到了第11年,销售业绩却停滞不…

实时数仓Hologres OLAP场景核心能力介绍

作者:赵红梅 Hologres PD OLAP典型应用场景与痛点 首先介绍典型的OLAP场景以及在这些场景上的核心痛点,OLAP典型应用场景很多,总结有四类:第一类是BI报表分析类,例如BI报表,实时大屏,数据中台等…

AntV学习笔记

文章目录 G6 图可视化引擎简单上手复杂一点的案例 S2 多维交叉分析表格简单的一个vue3使用S2的例子 G6 图可视化引擎 G6 是一个简单、易用、完备的图可视化引擎,它在高定制能力的基础上,提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者…

Linux高并发服务器开发(十)反应堆模型和线程池模型

文章目录 1 epoll反应堆2 线程池流程代码 3 复杂版本线程池代码 1 epoll反应堆 文件描述符 监听事件 回调函数 进行封装 创建socket设置端口复用绑定监听创建epoll树将监听文件描述符lfd上epoll树,对应的事件节点包括:文件描述符,事件epoll…

如何在Docker容器中,修改MySQL密码

如果MySQL运行在Docker容器中,修改MySQL密码的方法稍有不同。以下是如何在Docker中修改MySQL密码的步骤: 方法1:使用MySQL命令行工具 1. 找到MySQL容器的ID或者名字: docker ps 2. 进入MySQL容器: docker exec -i…

2024年小米SU7维修手册和电路图线路图接线图资料更新

此次更新了2024年小米SU7维修手册和电路图资料,覆盖市面上99%车型,包括维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图解对照表位置等等! 汽修帮…

QT加载安装外围依赖库的翻译文件后翻译失败的现象分析:依赖库以饿汉式的形式暴露单例接口导致该现象的产生

1、前提说明 VS2019 QtClassLibaryDll是动态库,QtWidgetsApplication4是应用程序。 首先明确:动态库以饿汉式的形式进行单例接口暴露; 然后,应用程序加载动态库的翻译文件并进行全局安装; // ...QTranslator* trans = new QTranslator();//qDebug() << trans->…

无人机云台类型及作用

无人机云台主要分为三种类型&#xff1a; 单轴云台&#xff1a;仅支持单向旋转&#xff0c;适合拍摄平滑的延时摄影和全景照片。 双轴云台&#xff1a;支持水平和垂直旋转&#xff0c;可用于拍摄流畅的视频和运动物体。 三轴云台&#xff1a;全面支持所有旋转轴&#xff0c;…

CASS中按指定距离和方向移动图形

1、绘制一个图形 打开软件&#xff0c;随意绘制一个矩形&#xff0c;并量取左下角点的坐标值&#xff0c;具体如下&#xff1a; 2、按距离移动原理讲解 例1&#xff1a;将图形沿着y轴负方向移动100米&#xff0c;如何实现&#xff1f; 如上图所示&#xff0c;测绘中的坐标系…

办公软件WPS与Office的区别

临近计算机考试很多同学在纠结我是报wps好&#xff1f;还是ms office好&#xff1f;下面就来详细说说。 1、wps属于国内金山公司的办公软件&#xff0c;里面包含word、Excel和PPT。考试是2021年开始的&#xff01; 2、MS&#xff08;Microsoft 微软&#xff09; office属于美…

了解MySQL【事务】的功能:确保数据完整性的关键技术

在数据库管理中&#xff0c;事务是确保数据完整性和一致性的核心机制。特别是对MySQL这样广泛应用的开源数据库系统&#xff0c;掌握事务的使用至关重要。在这篇文章中&#xff0c;我们将全面探讨MySQL事务的工作原理、ACID属性、隔离级别以及最佳实践&#xff0c;从而帮助开发…

Docker安装PostgreSQL详细教程

本章教程,使用Docker安装PostgreSQL具体步骤。 一、拉取镜像 docker pull postgres二、启动容器 docker run -it --name postgres --restart always -e POSTGRES_PASSWORD=123456 -e