使用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.mzph.cn/pingmian/42097.shtml

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

相关文章

刷题之买股票的最佳时机(leetcode)

买股票的最佳时机 动态规划入门题。 最简单的模拟式解法&#xff1a; class Solution { public:int maxProfit(vector<int>& prices) {//也可以换一种思路&#xff0c;因为只交易一次&#xff0c;那么找出股票最便宜的时候买入&#xff0c;最贵的时候卖出&#xff…

c与c++的内存管理

给出内存四个分区名字&#xff1a;栈区、堆区、全局区&#xff08;俗话也叫静态变量区&#xff09;、代码区&#xff08;也叫代码段&#xff09;&#xff08;代码段又分很多种&#xff0c;比如常量区&#xff09; 当然也会看到别的定义如&#xff1a; 两者都正确&#xff0c;记…

职升网:中级统计师是否属于中级职称?

中级统计师确实属于中级职称。 在统计专业人员的职称体系中&#xff0c;中级统计师占据了重要的位置&#xff0c;它属于中级职称范畴。这个职称体系包括初级、中级、高级和正高级四个层次&#xff0c;每个层次都对应着不同的专业技术岗位等级。初级职称只设助理级&#xff0c;…

【大数据】—FIFA世界杯探索性分析(EDA)

引言 足球&#xff0c;作为全球最受欢迎的运动之一&#xff0c;拥有庞大的粉丝群体和深远的文化影响。自1930年首届FIFA世界杯举办以来&#xff0c;这项赛事已经成为全球体育盛事&#xff0c;吸引了数十亿观众的目光。世界杯不仅是各国足球技艺的较量&#xff0c;更是国家荣誉…

View->裁剪框View的绘制,手势处理

XML文件 <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android…

texStudio使用(小白)

原先使用overleaf在线编译&#xff0c;可能eps格式的图片太大导致需要充钱&#xff0c;所以考虑本地安装 安装教程参考B站视频&#xff1a;B站Latex本地编译器安装&#xff1a;TexLive TextStudio 踩到坑&#xff1a; 1. 编译器位置要选择对 因为BibTex选成了Biber导致出现无…

vb.netcad二开自学笔记1:万里长征第一步Hello CAD!

已入门的朋友请绕行&#xff01; 今天开启自学vb.net 开发autocad&#xff0c;网上相关资料太少了、太老了。花钱买课吧&#xff0c;穷&#xff01;又舍不得&#xff0c;咬牙从小白开始摸索自学吧&#xff0c;虽然注定是踏上了一条艰苦之路&#xff0c;顺便作个自学笔记备忘!积…

海外短剧CPS系统:源码部署与推广分佣全攻略

海外短剧CPS系统&#xff1a;源码部署与推广分佣全攻略 在数字化浪潮下&#xff0c;海外短剧市场日益繁荣&#xff0c;成为众多创业者和投资者的新宠。倾力打造了一款创新的海外短剧CPS分销系统&#xff0c;为广大用户提供了一个全新的赚钱模式。今天&#xff0c;我们就来深入…

Django学习第六天

启动项目命令 python manage.py runserver 取消模态框功能 js实现列表数据删除 第二种实现思路 使用jquery修改模态框标题 编辑页面拿到数据库数据显示默认数据功能实现 想要去数据库中获取数据时&#xff1a;对象/字典 三种不同的数据类型 使用Ajax传入数据实现表单编辑&…

HTML5使用<details>标签:展开/收缩信息

details 标签提供了一种替代 JavaScript 的方法&#xff0c;它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于 details 标签&#xff0c;单击 summary 标签中的内容文字时&#xff0c;details 标签中的其他所有从属元素将会展开或收缩。语法如下&a…

S32DS S32 Design Studio for S32 Platform 3.5 软件安装离线激活

问题描述 重新下载安装 NXP s32系列芯片的集成开发环境&#xff08;IDE&#xff09; S32DS S32 Design Studio&#xff0c;当前版本 S32 Design Studio for S32 Platform 3.5&#xff0c;安装时遇到激活问题 在线激活&#xff0c;激活码哪里来&#xff1f; s32ds 不是免费的&a…

快排的非递归实现

前提 快排的递归实现&#xff0c;在深度过深时会存在栈溢出的风险&#xff0c;所以我们需要掌握快排的非递归写法 快排的实现 单趟实现 上次我们使用了hoare的快排单趟写法&#xff0c;所以这次我们使用前后指针法. 前后指针法 初始状态下&#xff0c;初始化prev为left,cu…

文件上传(本地、OSS)

什么是文件上传&#xff1a;将文件上传到服务器。 文件上传-本地存储 前端 <template> <div><!-- 上传文件需要设置表单的提交方式为post&#xff0c;并设置enctype属性、表单项的type属性设置为file --><form action"http://localhost:8080/wedu/…

Java+ Idea+ Vue产科信息管理系统源码 什么是产科信息管理系统的门诊管理?

Java Idea Vue产科信息管理系统源码 什么是产科信息管理系统的门诊管理&#xff1f; 产科信息管理系统 门诊管理是现代医疗服务的重要组成部分&#xff0c;它借助信息技术手段&#xff0c;对产科门诊的各个环节进行优化和重构&#xff0c;以提高医疗服务效率、提升患者体验、加…

SpringBoot 生产实践:没有父 starter 的打包问题

文章目录 前言一、搜索引擎二、Chat GPT三、官方文档四、小结推荐阅读 前言 今天刚准备写点文章&#xff0c;需要 SpringBoot 项目来演示效果。一时心血来潮&#xff0c;没有采用传统的方式&#xff08;即通过引入 spring-boot-starter-parent 父工程的方式&#xff09;。 &l…

代码随想录-Day48

188. 买卖股票的最佳时机 IV 给你一个整数数组 prices 和一个整数 k &#xff0c;其中 prices[i] 是某支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 k 笔交易。也就是说&#xff0c;你最多可以买 k 次&#xff0c;卖 k 次。 注意…

DHCP服务器

目录 网络传输原则&#xff1a; DHCP: DHCP作用&#xff1a; 优缺点&#xff1a; DHCP的原理&#xff1a; 用虚拟机模拟DHCP服务器​编辑​编辑 网络传输原则&#xff1a; 网络是双向的&#xff0c;网络是有方向的 解释&#xff1a;网络是双向的&#xff1a; …

大数据中的常见数据问题:独断脏

想象你刚刚入职一家声称正在进行"数字化转型"的大型企业,担任大数据开发工程师。在入职的第一周,你满怀热情,迫不及待地想要大展拳脚,用你的技能来推动公司的数据驱动决策。 目录 大数据中的常见数据问题1. 独 - 数据孤岛2. 断 - 数据价值链断层3. 缺 - 标准、治理…

如何搜索查找ICLR论文

记录有几个查找顶级会议文章的网址&#xff0c;不止ICLR ICLR 2024 还会有visualization模式&#xff1a; ICLR 2024 virtual 这个网站也很棒 Paper Copilot ICLR 2024 当然还有一个用图表示各论文相关关系的网站&#xff1a; connected papers

WACV2023论文速览Attention注意力机制相关

Paper1 ScoreNet: Learning Non-Uniform Attention and Augmentation for Transformer-Based Histopathological Image Classification 摘要原文: Progress in digital pathology is hindered by high-resolution images and the prohibitive cost of exhaustive localized an…