【Vue系列】Vue3快速构建项目,以及在已有代码情况首次打开如何初始化依赖项

欢迎来到《小5讲堂》
大家好,我是全栈小5。
这是是《前端》序列文章,每篇文章将以博主理解的角度展开讲解,
特别是针对知识点的概念进行叙说,大部分文章将会对这些概念进行实际例子验证,以此达到加深对知识点的理解和掌握。
温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!

在这里插入图片描述

目录

  • 背景
  • 新建项目
  • 已有项目
  • 常见情况

背景

作为后端开发人员,有时候也会基础到前端,特别是在中小型公司,大部分后端开发人员可能都兼任开发前端,
线上版本代码管理也越来越多,当我们从一台新电脑签出Vue前端代码,首次打开一般都是没有依赖文件,需要重新初始化

新建项目

首次打开一个 Vue 3 项目时,需要执行一些操作来准备项目环境。

  • 以下是一些常见的步骤

1.首先,确保已经安装了 Node.js 并且版本在 12.0 或以上。可以在终端(命令行界面)中运行
node --version 命令来检查当前安装的 Node.js 版本。
在这里插入图片描述
2.创建一个新的项目文件夹(你可以在任意位置创建,比如桌面或者特定的代码文件夹),然后进入该文件夹。

3.在终端中,进入到你的项目文件夹下,运行以下命令初始化你的项目

npm init -y

这将初始化一个新的 package.json 文件,并用默认的配置填充。

4.安装 Vue CLI(命令行工具),它提供了创建和管理 Vue 项目的便捷方式。运行以下命令安装 Vue CLI

npm install -g @vue/cli

5.然后,你可以使用 Vue CLI 创建一个新的 Vue 3 项目。在终端中运行如下命令

vue create .

这将创建一个新的 Vue 3 项目,并将其所有的文件和依赖安装到当前文件夹中。

6.接下来,你会被显示一些选项,比如选择预设(default 或者 Manually select features),你可以选择适合你的选项。然后等待项目初始化和依赖安装的完成。

7.当创建完成后,你可以使用以下命令运行你的 Vue 3 项目

npm run serve

这将启动一个本地的开发服务器,可以在浏览器中访问 http://localhost:8080(或者另一个端口,具体自己可以自定义)

已有项目

如果已经打开了一个已经存在的 Vue 3 项目文件夹,接下来需要做的就是初始化相关依赖并启动该项目。

  • 以下是基本的步骤

1.进入到你的项目文件夹中。你可以在终端中使用
cd 命令来进入到该文件夹中。
如果cd无法跳转,那么可以通过斜杠d形式强制跳转,比如:cd /d 具体路径

2.接着,安装相关的依赖。你可以运行以下命令安装依赖

npm install

这将查看package.json文件中列出的所有依赖并安装到当前的 node_modules 文件夹中。
在这里插入图片描述
3.等待依赖安装完成后,你可以使用以下命令来启动你的 Vue 3 项目

npm run serve

启动成功后,就可以看到如下图地址,复制地址到浏览器上即可。
serve这个名称也可以改成自己业务相关名字,比如:npm run my-pro在这里插入图片描述

常见情况

在这里插入图片描述
如果在运行 npm run dev 命令时提示 Missing script: “dev” 的错误提示,
那么很有可能是因为在你的 package.json 文件中并没有定义 dev 脚本。
npm run dev 命令通常用于启动开发服务器。

如果这个命令在你的项目中不存在,那么可以按照以下步骤进行设置

1.打开项目中package.json文件。

2.在scripts对象中添加一个新的键值对,其中键为 “dev”,值为 “vue-cli-service serve”。

"scripts": {"dev": "vue-cli-service serve"
},

3.保存并关闭
package.json 文件。

4.然后,再次尝试运行
npm run dev 命令,就应该能够正常启动开发服务器了。
如果还有其他的脚本需要定义,可以按照上述方式添加到 scripts对象中,比如定义一个 “build” 脚本用于构建生产环境版本的代码

"scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build"
}

在添加或者修改了 package.json 文件中的脚本之后,可以使用 npm run

总结:温故而知新,不同阶段重温知识点,会有不一样的认识和理解,博主将巩固一遍知识点,并以实践方式和大家分享,若能有所帮助和收获,这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。

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

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

相关文章

一天一个设计模式---适配器模式

概念 适配器模式是一种结构型设计模式,用于将一个类的接口转换成客户端所期望的另一个接口。它允许不兼容的接口之间进行协同工作,使得原本由于接口不匹配而无法合作的类能够一起工作。 具体内容 适配器模式主要包括以下几个要素: 目标接…

C 语言结构体和枚举完全指南:成员访问、字符串操作、枚举基础

访问结构体成员 要访问结构体的成员,请使用点语法 (.): // 创建名为 myStructure 的结构体 struct MyStructure {int myNum;char myLetter; };int main() {// 创建名为 s1 的 myStructure 的结构体变量struct MyStructure s1;// 为 s1 的成员分配值s1.myNum 13;s…

Miniconda Python解释器 Conda 包管理器 Pytorch

Miniconda Miniconda 是一个轻量级的 Anaconda 版本,它是一个用于管理 Python 环境和包的开源工具。Anaconda 是一个数据科学和机器学习的开发环境,它包含了许多常用的 Python 包和工具。 与 Anaconda 相比,Miniconda 的安装包更小&#xf…

VBA中类的解读及应用第八讲:实现定时器功能的自定义类事件

《VBA中类的解读及应用》教程【10165646】是我推出的第五套教程,目前已经是第一版修订了。这套教程定位于最高级,是学完初级,中级后的教程。 类,是非常抽象的,更具研究的价值。随着我们学习、应用VBA的深入&#xff0…

Java中输入和输出处理(三)二进制篇

叮咚!加油!马上学完 读写二进制文件Data DataInputStream类 FilFeInputStream的子类 与FileInputStream类结合使用读取二进制文件 DataOutputStream类 FileOutputStream的子类 与FileOutputStream类结合使用写二进制文件 读写二进制代码 package 面…

vue实现-年、月、日、时、分、秒、星期?

一、文章引导 #mermaid-svg-nP4oT3Y4d6oaxUsg {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-nP4oT3Y4d6oaxUsg .error-icon{fill:#552222;}#mermaid-svg-nP4oT3Y4d6oaxUsg .error-text{fill:#552222;stroke:#55222…

Pangolin编译

文章目录 版本编译错误 版本 ubuntu 22 编译 # 复制选择版本(ORB SLAM 需要的版本为0.6) git clone https://github.com/stevenlovegrove/Pangolin.git cd Pangolin/ git checkout v0.6# 编译 mkdir build && cd build cmake .. -DCMAKE_INS…

倍福(Bechhoff) CX8090嵌入式PC控制器开发没有想像中的那么难

笔者曾2023年初曾为云南阜外医院新风系统开发自动控制系统。医院所有新风设备和公区照明全部采用倍福嵌入式PC控制器实现智能控制。其中新风和供水计量通过CX8090实现控制;公区照明通过BC9050实现控制;并采用美国邦纳人机界面(THM035B)实现远…

树形结构的窗口小部件

这段代码是一个使用Qt框架的C程序,实现了一个树形结构的窗口小部件(TreeWidget)。以下是主要的解释: #include "treewidget.h" #include "ui_treewidget.h"TreeWidget::TreeWidget(QWidget *parent) : QWidg…

DB2除法的小数位问题(四舍五入问题)以及其他常用的函数

DB2除法的小数位问题(四舍五入问题)以及其他常用的函数 1. DB2取第一条数据2. DB2 中指定值排序2.1 使用case when2.2 使用decode函数 3. 拼接函数4. 强制转换类型——cast函数5. DB2除法的小数位问题(四舍五入问题)5.1 关于round…

栈和排序.

给你一个1->n的排列和一个栈,入栈顺序给定 你要在不打乱入栈顺序的情况下,对数组进行从大到小排序 当无法完全排序时,请输出字典序最大的出栈序列 输入 第一行一个数n 第二行n个数,表示入栈的顺序,用空格隔开&…

three.js 关键帧动画

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div class"box-right"…

用汇编编写加解密函数

1.data段 data db "hello,sam" key db "key" dataLen dword ? endata byte 10 dup(0) dedata byte 10 dup(0) 2.Encryption&#xff08;加密&#xff09; Encryption procpush ebpmov ebp,esp;加密数据长度,循环次数mov ecx,sizeof data;寄存器不够用…

金和OA jc6 GetAttOut SQL注入漏洞复现

0x01 产品简介 金和OA协同办公管理系统软件(简称金和OA),本着简单、适用、高效的原则,贴合企事业单位的实际需求,实行通用化、标准化、智能化、人性化的产品设计,充分体现企事业单位规范管理、提高办公效率的核心思想,为用户提供一整套标准的办公自动化解决方案,以帮助…

方法 ‘NetWork.call()‘ 的签名与类 ‘Model‘ 中基方法的签名不匹配

方法 ‘NetWork.call()’ 的签名与类 ‘Model’ 中基方法的签名不匹配 这个错误通常出现在 TensorFlow 的 Keras 模型中&#xff0c;表示子类化的模型&#xff08;比如你的 NetWork 类&#xff09;在实现 call 方法时与基类 Model 中定义的 call 方法的签名不匹配。 在这里&am…

语义解析:如何基于SQL去实现自然语言与机器智能连接的桥梁

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 语义解析 定义 作用 语义解析的应用场景 场景一&#xff1a; 场景二&#xff1a; 总结语…

【LeetCode】winter vacation training

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;【LeetCode】winter vacation training 目录 &#x1f449;&#x1f3fb; 有效的字母异位词&#x…

129基于matlab的粒子群算法、遗传算法、鲸鱼算法、改进鲸鱼算法优化最小二乘支持向量机(lssvm)的gam正则化参数和sig2RBF函数的参数

基于matlab的粒子群算法、遗传算法、鲸鱼算法、改进鲸鱼算法优化最小二乘支持向量机&#xff08;lssvm&#xff09;的gam正则化参数和sig2RBF函数的参数。输出适应度曲线&#xff0c;测试机和训练集准确率。程序已调通&#xff0c;可直接运行。 129 matlabLSSVM优化算法 (xiaoh…

什么是k8s和声明式编程?

认识k8s之后&#xff0c;他的操作模式对我来说是一种很不错的体验。他提供了更接近现实世界的面向对象接口。 什么是k8s&#xff1f; Kubernetes&#xff08;K8s&#xff09;是一种开源容器编排平台&#xff0c;用于自动化部署、扩展和管理容器化应用程序。它简化了容器化应用…

【计算机图形学】作业:Bresenham 法绘制圆

题目&#xff1a; 请采用 Bresenham 法绘制圆&#xff08;共 30 分&#xff09;。要求&#xff1a; &#xff08;1&#xff09; 给出算法的文字描述&#xff08;共 15 分&#xff09;。 &#xff08;2&#xff09; 编写函数&#xff0c;在给定圆心坐标和半径的情况下&#xff…