【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

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