【Vue基础】前端工程化Vue项目

news2025/1/21 15:33:49

一、创建Vue项目步骤

1、新建一个文件夹,起名为vue_project01

2、在该文件夹中打开cmd,输入指令vue ui,打开图形化界面

 3、此时跳转到网页,根据以下步骤配置vue项目

1)项目名命名为test01;选择包管理器为npm;关闭初始化Git仓库

 2)选择手动配置

3)选择Router,其他不变

 3)选择vue版本为2.0;选择语法检测规则为“ESLint with error...”;点击创建项目时在弹出的窗口中选择“创建项目不保存预设”,此时正在下载,预计1分钟,此过程需保持联网。出现Ready时下载完成,如下图1;此时浏览器显示如下图2;自己建的文件夹vue_project01中出现tese01项目,如下图3

  4、用VS Code打开项目test01

5、启动NPM SCRIPTS的serve...如下图2

注:如果没有NPM脚本,需要点击资源管理器右边的“...”,勾选NPM Scripts,如下图1

6、若想修改端口号,比如将8000改为7000,步骤如下:

1)修改代码;终止批处理操做

2)刷新后,链接显示端口为7000,如下图1。点击跟随链接跳转到网页,网页地址栏也显示端口号变为7000,如下图2

二、参考链接

1、前端工程化Vue项目教程

https://www.bilibili.com/video/BV1m84y1w7Tb?p=38&vd_source=841fee104972680a6cac4dbdbf144b50

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

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

相关文章

使用R语言进行方差分析(ANOVA、ANCOVA)(一)

方差分析(一) 1. ANOVA模型拟合1.1 aov()函数1.2 表达式中各项的顺序 2. 单因素方差分析(One-Way ANOVA)2.1 绘制各组均值及其置信区间的图形2.2 多重比较-TukeyHSD2.2.1 成对比较图2.2.2 多重均值比较-TukeyHSD(更易理…

图的存储(邻接矩阵邻接表)

图的存储 文章目录 图的存储1 邻接矩阵1.1 邻接矩阵存储结构定义1.2 完整代码应用 2 邻接表2.1 邻接表存储结构定义2.2 完整代码应用 1 邻接矩阵 A [ i ] [ j ] 1 A[i][j]1 A[i][j]1 表示顶点i与顶点j邻接,即i与j之间存在边或者弧。 A [ i ] [ j ] 0 A[i][j]0 A…

使用jdk17 搭建Hadoop3.3.5和Spark3.3.2 on Yarn集群模式

搭建Hadoop3.3.5和Spark3.3.2 on Yarn集群模式,使用jdk17 搭建Hadoop3.3.5和Spark3.3.2 on Yarn集群模式1. 创建一台虚拟机2. 安装jdk17(1)下载jdk17(2)安装jdk17(3)配置环境变量 3. 虚拟机之间…

【音视频第15天】webRTC协议(2)

目录 协议ICESTUNNATTURNSDPSDP结构 Signaling and ConnectingSignaling: How peers find each other in WebRTCConnecting and NAT Traversal with STUN/TURN Signalingsdp协议WebRTC如何使用sdpWebRTC会话示例 Connecting为什么WebRTC需要一个专用的子系统来连接?现实世界的…

Day949.遗留系统之殇:为什么要对遗留系统进行现代化? -遗留系统现代化实战

遗留系统之殇:为什么要对遗留系统进行现代化? Hi,我是阿昌,今天学习记录是关于遗留系统之殇:为什么要对遗留系统进行现代化?的内容。 不知道你是否跟曾经一样,身处一个遗留系统的漩涡之中&…

数据结构-基数排序

基数排序是和其他的各类排序方式都不同的方式,之前的各类排序,如快速排序,堆排序,冒泡排序等等,都是通过关键字之间的比较和移动记录这两种操作来实现的,而基数排序不需要记录关键字之间的比较。所谓基数排…

ubuntu 安装vmware tool

1在虚拟机种站到安装vmware-tools 然后重启虚拟机 2在磁盘中可以看到如下文件,将zip文件移动到桌面解压备用 3关闭虚拟机 找到编辑虚拟机设置 4点击左侧 CD/dvd(SATA) 如果是使用镜像文件,改成使用物理驱动器. 5 打开命令行 cd 桌面 (如…

CSS基础——盒子模型的一些属性概念

目录 display visibility overflow 文档流 元素在文档流中的特点 块元素 内联元素 浮动 float 浮动元素特点 清除浮动 clear 小练习 效果图 具体实现 高度塌陷问题 BFC 特点 如何开启BFC 解决方案 本篇的最终练习 效果图如下: 具体实现 disp…

ChatGPT原理解释

写了一本介绍ChatGPT原理的课程 结构如下 01、介绍ChatGPT及其原理 1.1 ChatGPT的概述 1.2 什么是自然语言处理(NLP) 1.3 深度学习与NLP的关系 1.4 GPT模型的介绍 02、GPT原理探讨 2.1 GPT模型的输入与输出 2.2 GPT模型的结构 2.3 GPT模型的预训练方法…

flv怎么无损转换成mp4格式,3大超级方法分享

flv格式是目前在视频分享媒体播放网站上广泛使用的一种视频文件格式,可以在网站窗口中直接播放,这类视频文件还能够有效保护版权。但是有些时候我们可能需要将flv格式的视频转换为其他格式,比如mp4。但是该怎么操作呢? 其实有很多…

数据挖掘:汽车车交易价格预测(测评指标;EDA)

目录 一、前期工作 1.赛题介绍 赛题分析: 分类和回归问题的评价指标有如下一些形式: (下文2.1和2.2会用到) 2.数据简介 3.探索性分析-EDA介绍 二、实战演练 2.1分类指标评价计算示例 2.2回归指标评价计算示例 2.3数据探索…

抠图,扣掉背景图片

Remove Image Backgrounds, Free HD, No Signup - Pixian.AI https://pixian.ai/ 从电脑本地选取图片,然后会自动扣掉背景,点击DOWNLOAD就可以了 第一个:Pixian.AI 这是一款国外的在线抠图网站,把需要扣除背景的图片拖拽进来&am…

简单的了解下 Fetch API 的工作原理

简介 Fetch API是一种现代的Web API,提供了一种异步获取网络资源的方法。由于其简单性、灵活性和一致性,它已经成为Web应用程序中获取数据和资源的流行选择。在本文中,我们将深入探讨Fetch API的核心特性,并了解其工作原理。 Fetc…

Windows逆向安全(一)之基础知识(七)

汇编C语言类型转换 类型转换 类型转换的使用场景 类型转换一般为由数据宽度小的转换成数据宽度大的,不然可能会有高位数据被截断的现象,引起数据丢失 需要一个变量来存储一个数据,刚开始这个数据的数据宽度较小,后来发现存不下…

什么是UML?

文章目录 00 | 基础知识01 | 静态建模类图对象图用例图 02 | 动态建模时序图通信图状态图活动图 03 | 物理建模构件图部署图 UML(Unified Model Language),统一建模语言,是一种可以用来表现设计模式的直观的,有效的框图…

【图像分割】Grounded Segment Anything根据文字自动画框或分割环境配置和基本使用教程

1 环境配置 要求:python>3.8, pytorch>1.7, torchvision>0.8 官方地址:https://github.com/IDEA-Research/Grounded-Segment-AnythingMarrying Grounding DINO with Segment Anything & Stable Diffusion & BLIP & Whisper &am…

命运坎坷的保定县

保定的词语分解 保护而安定之。诗小雅天保:“天保定尔,亦孔之固。”谓稳固地保有。 晋 陆云 大将军宴会被命作诗:“皇皇帝祜,诞隆骏命。四祖正家,天禄保定。” 保定府?保定县? 今天提起“保定…

将“每日造型”变成长久习惯,戴森Airwrap™美发棒为何成为最好的“美丽投资”?

做头发、换发型是一个大工程,这几乎成了一种固定印象。虽然卷发棒已成为几乎“人手必备”的头发造型工具,但使用起来往往“现实很骨感”,不是使用频次极低,就是被束之高阁,每天都自己做头发换造型,只能是一…

陶泓达:4.19黄金原油早间精准策略!

黄金方面: 周二(4月18日)美市早盘,现货黄金一度跌至1991.05美元低点,但随后迅速拉升近20美元,向上触及2010.71美元高点,短线走出V型反转行情。本周,美国经济日历上没有太多关键数据会影响黄金和美元。因此&…

docker的数据卷详解

数据卷 数据卷是宿主机中的一个目录或文件,当容器目录和数据卷目录绑定后,对方修改会立即同步 一个数据卷可以同时被多个容器同时挂载,一个容器也可以被挂载多个数据卷 数据卷作用:容器数据持久化 /外部机器和容器间接通信 /容器…