Vue（四）Vue脚手架——手把手教你安装和使用

news2025/1/21 2:47:52

一、什么是Vue脚手架

之前我们使用Vue框架，都是通过脚本的方式引入Vue脚本，在html中运行，但是这只是入门级的操作，下面我们介绍Vue脚手架。

脚手架：脚手架是一类软件的总称，此类软甲用于生成标准化的项目包，这种项目包具备完善的模块，报错提示，代码提示...

并且，脚手架是一套已经包含核心功能和标准文件夹结构的半成品项目源代码，它的优点是标准化，极其便于协作，避免重复搭结构，降低学习成本。在今后所有的项目和新技术，基本都是在脚手架基础上开发的。

二、脚手架的安装和使用

安装脚手架的前提条件：

node版本：要求版本在12以上 —— 检查方式：node -v；

中国镜像：npm config set registry https://registry.npm.taobao.org；

备用镜像：npm config set registry https://registry.npmmirror.com/

在有网的环境下。

安装命令：

npm i -g @vue/cli

满足以上条件，可以安装下载Vue脚手架了。

安装步骤

1）点击电脑桌面，按下键盘 “win+R”键，输入 “cmd” ，然后点击 ”确定“。

2）执行安装全局脚手架软件命令：

window：npm i -g @vue/cli @vue/cli：这是脚手架软件的名字，不能改

mac：sudo npm i -g @vue/cli

注意：

（1）可以通过“vue -v”命令查看是否安装成功；

（2）下载时，可能会失败，可以试一试多执行几次安装命令“npm i -g @vue/cli”；

（3）出现错误提示“4048”，使用管理员模式打开“命令提示窗口”即可。

3）利用脚手架软件生成项目包

注意：在哪个目录下创建项目，就在哪里生成。（路径中千万不能有中文文件名）

（1）生成Vue项目包

生成命令：vue create vue-pro 其中：”vue-pro“是自定义的文件夹名称。

（2）选择配置项

当你执行 vue create vue-pro 命令后，点击确定，会出现下面的选择配置项

其中，前两项都是默认配置，不推荐使用，可以用键盘的 ↑ ↓ 键选择第三个——手动配置

当选择第三项后，点击确定，出现下面的配置选项

由于我们初学，所以我们只用选择下面四项基础配置即可

用空格来选择或者取消，↑ ↓ 方向键来移动，最后用 “回车”确定

选择上述四项配置后，点击确定，会出现下面的配置提示，但是现阶段，我们用不到，直接回车即可。

上面的操作完成后，系统就会给你下载Vue脚手架的项目文件，这里我们静静等待即可！

到这里我们的项目包就已经下载完成了，看到下面的提示，说明项目包已经安装成功✌✌

使用脚手架运行Vue项目

1）Vue的正确打开方式

注意：想要打开一个vue项目包，必须直接在VScode中打开这个项目包，下面介绍打开一个Vue项目的正确姿势：

由于我们的VScode是支持多窗口任务运行的，所以如果当前已经开启了一个项目，可以按照下面的步骤操作:

首先：点击我们的VScode中的 “文件”-> “新建窗口”

然后：点击“打开文件夹” -> 找到我们的项目包，选中，点击“选择文件夹”即可

！！注意：一定要打开的是我们的整个项目包文件！！

2）让Vue项目跑起来！

由于我们的项目包自带服务器，所以必须使用自带的服务器来运行项目。

启动方式：必须在项目包目录下执行！！！

命令：npm run serve

（1）★★ 小技巧：右键单击package.json文件，选择"在集成终端中打开"，可以快速打开运行窗口；

（2）打开运行窗口后，输入“npm run serve”命令后，即可启动我们的Vue项目。

（3）按住Ctrl，点local:右侧的连接，即可自动打开浏览器。

需要注意vue采用的是热编译，修改后无需停止或重启项目，只要一修改，就会立刻自动重新编译，重新运行，自动在界面上显示新内容。

三、脚手架文件结构

如果你有幸看到了这里，那你一定是个幸运儿。因为前面那么复杂的流程你都走完了，并且后台一切正常。

但是如果你后台一片报错，或者运行不下去，你也可以联系我，我们一起探讨一下！

废话不多说，下面让我们通过一张图，来了解一下我们的Vue脚手架项目的文件结构吧！

拓展1、如何运行别人发给你的Vue项目：

由于node_modules文件比较大，所以我们在传项目时一般不会直接传这个文件，当我们收到别人的文件，发现没有node_modules这个文件夹时，这个项目是运行不了的，此时我们只需要：右键单价package.json文件 -> 选择”在集成终端中打开“ -> 输入”npm install“ 下载node_modules中的所有依赖即可。

拓展2、Vue脚手架中Git相关