2025年vue2.0脚手架的安装（vue脚手架安装在哪）

本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容，并不代表这部分内容不重要，只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端，细节技巧性内容，可以在后续的开发工作中自行发现并掌握。

截止到目前为止，vue已经发布到3.5版本了。理论上来讲前端技术学新的比较好，但是鉴于目前存在一些老项目仍然使用vue2版本，而且vue2基础的语法也会沿用到vue3框架中。所以我打算先从vue2入手，再单独开一个vue3的教程对比着学。了解两者的区别，在面对新老项目时心里不慌。

本次教程从应用角度出发，直接从vue工程开始学习。不要先学原理再应用，而是先应用，感兴趣的再去研究原理。

我是比较反感的，他违背了js作为动态语言的灵魂，所以教程里不会出现ts语法。（此观点仅供大家批判 =。=）

这是我们前端工程经常要使用的东西

1.1 全局打开控制台

键盘按下，在弹出窗内输入cmd回车，打开控制台。（注意此时打开的目录是系统根目录）

在这里插入图片描述

1.2 指定目录打开控制台

在指定文件目录下，选中导航栏，输入cmd后按下弹出cmd控制台窗口。（此时cmd路径为当前目录下）
在这里插入图片描述

1.3 推荐使用vscode集成控制台

如果你按照我的【前端开发入门】前端开发环境配置安装了vscode编辑器，那么你应该可以在指定目录的空白处右键选择文件夹。

在这里插入图片描述

打开后按下按键打开集成终端。也可以在编辑器顶部找到选项卡点击选择。

配置默认命令行工具，一般情况下你的电脑会有、、，推荐使用。按照下图配置默认终端工具，完成后当你之后打开终端都会是。

在这里插入图片描述

使用vscode集成控制台的好处是:

它的根目录就是当前文件夹的目录，方便我们执行命令行代码。
可以便捷的打开多个终端，点击按钮即可创建多个cmd终端。

因为大部分前端工程的依赖包都存放在npm仓库中，我们在创建项目时需要拉取这些依赖包，而这个仓库服务器在国外，如果本地网络环境不好的话，往往会倒在拉取依赖这一步。我们使用淘宝的镜像源替换npm的代理，可以直接从国内服务器下载你需要的依赖，避免一些不必要的麻烦。

查看当前的镜像地址

在这里插入图片描述
设置淘宝镜像

这里设置完成后没有任何返回信息（这是正常的），可以通过上一步查询镜像地址查看一下此时的镜像地址。

参考vue官方教程：vue脚手架安装教程

在控制台输入以下命令，安装：

在控制台输入以下命令，检查是否安装成功，当输出版本号时表示安装完成（版本号可能不同，有就行）

在vscode中打开终端，输入以下命令创建vue工程

选择预设配置，按下键盘方向键和选择自己需要的预设选项，先选第三个看看里边都有啥。
回车键确认下一步

在这里插入图片描述

因为是学习vue工程，所以将默认的选项都取消掉，我们自己将来需要什么就手动加进去。使用取消或勾选选项。
回车键确认下一步

在这里插入图片描述

选择vue版本，选择
回车键确认下一步

在这里插入图片描述

选择专门文件配置babel、eslint或者其他，不要和混在一起
回车键确认下一步

在这里插入图片描述

是否把这次的配置保存起来，下次在创建时直接拿来用？因为是练习项目所以就不存了，键盘输入n
回车键确认下一步

在这里插入图片描述

使用什么包管理工具，用来下载项目依赖的工具而已，选哪个都行。先选吧，感兴趣可以了解一下和（优化了下载速度和node_modules体积）。
回车键确认下一步

在这里插入图片描述

不出什么意外你应该能在终端看到以下内容，你可以按照提示分别输入两个指令启动项目。不过为了缓解强迫症，我建议关掉当前这个vscode编辑器，找到新创建的文件夹，鼠标右键选择该文件夹。或是进入文件夹内，在空白区域鼠标右键选择。

在这里插入图片描述

打开vscode终端，输入启动命令，等待项目启动

启动后你的编辑器应该长这样，此时你可以复制地址，粘贴到随便一个浏览器地址栏打开。或是按住键盘键别松，鼠标左键单击local地址，会自动调起浏览器打开该地址。

在这里插入图片描述

vue工程提供了打包脚本，可以将所有的项目代码根据互相引用关系打包成、、以及静态资源用于交付（图片、视频、音频等等）。如下图所示：

在这里插入图片描述

在终端输入以下脚本打包代码：

等待打包完成，你的终端应该提示如下内容：

在这里插入图片描述

以上，你已经完成了vue2.0版本工程的创建、运行、打包过程。
在此过程中：

熟悉了cmd控制台的使用方法。
了解了npm镜像源设置方法。
跟着过了一遍创建vue项目的全流程。
熟悉如何启动、打包项目。

接下来我们将认识vue工程的所有文件的作用，以及逐步在工程中完成vue语法的学习。

再接再厉~

2025年vue2.0脚手架的安装（vue脚手架安装在哪）

1.1 全局打开控制台

1.2 指定目录打开控制台

1.3 推荐使用vscode集成控制台

相关推荐