Vue.js项目搭建初始化，基于vue-cli的脚手架 (vue学习 - Ch1.1 初始化)

1. 前置软件安装

安装node.js

Vue.js 基于 node 环境进行运行，所以需要先安装 node.js。

• 通过 nodejs.org 官网页面下载最新版并安装就可以了。
• 通过 Win + R 键打开终端，在里面输入 npm -v 并回车，如果有显示一串数字说明安装成功。

安装vscode

vscode 全称是 visual studio code，目前主流的代码编辑器，同样通过官网下载安装。

• 通过 vscode官网链接 下载安装。

2. 创建Vue.js项目

确定文件存放位置

首先你需要找到一个地方来存储你的项目工程，比如 E:\GitBase (这是您自定义的)，后续将在这个文件夹下建立一个 vueproj 文件夹(这是您自定义的) 来存储整个项目。

• 根据自己的情况来确定项目的存储地点和文件夹名字
• 不推荐 桌面 Desktop 或者 C盘根部 C:\ 来安置项目。

打开项目位置的终端

当你使用 Win + R 键打开终端时你会发现有一个 C:\Users\Administrator 这是你的终端 当前所指向 的文件目录。
我们将通过终端来创建项目，所以必须将这个目录指向你刚刚 确定文件存放的位置，这时你只需要：

• 打开/创建那个位置的文件夹，比如 E:\GitBase，你发现里面什么也没有。
• 点击标有文字 此电脑 > 应用程序(E:) > GitBase 的那个条，输入 cmd，并按下回车。
• 你得到了在 E:\GitBase 目录的终端。

当然你也可以直接通过指令重定向当前文件目录，不过暂时可以先这样做。

在vscode中打开文件夹和终端

理解了上面的终端打开方式，接下来将使用vscode进行这一操作：

• 打开 vscode，如果有提示切换语言，切换到中文。
• 点击屏幕中间的 启动 - 打开文件夹 或者在上方菜单栏选择 文件 - 打开文件夹。
• 找到你的 项目位置目录 比如我这里是 E:\GitBase。

这样就成功打开了文件夹，你会发现左边的 文件目录略缩图 有显示你的文件夹名字，比如我这里是 GitBase，这意味着你将在 vscode 中围绕这个文件夹下的所有内容进行工作。

• 接下来点击 终端 - 新建终端。
• 你就得到了一个在 E:\GitBase 内嵌在vscode中的终端，这更加方便实用。

输入指令创建Vue.js项目

继续上一小节的内容，打开vscode的终端后：

• 输入 npm init vue@latest
• 你会看到一行文字 Vue.js - The Progressive JavaScript Framework，如果没有，请尝试给您的npm换源 (切换下载源服务器)
• 下面提醒您输入您的 project name，比如我这里输入 vue，这将是你后续进行开发的 Vue.js 的主文件夹名。
• 接下来一路按 Enter 回车继续，暂时不需要安装其他扩展。

接下来你应该看到这样几行字，说明创建完成了：

Done. Now run:
  cd vue
  npm install
  npm run dev

3. 启动Vue.js项目

理解上面几行指令

完成上一小节的内容后，我们来理解上面几行字的意义：

1. cd vue 使终端进入当前目录下的vue文件夹，比如从 E:\Gitbase 进入 E:\Gitbase\vue。
2. npm install 分析并安装当前 node 项目的所有需要的依赖，Vue.js 是基于 node 工作的，暂时只需要知道，只要安装了新的依赖就输入这个指令就可以，现在您只需要输入一遍就可以完成 Vue.js 脚手架项目的初始化。
3. npm run dev 这也是一个 node 指令，代表了运行 dev 这一脚本指令，您同样暂时只需要知道，输入这个就可以运行整个项目。

成功启动Vue.js项目

当你输入 npm run dev 并稍等片刻后项目将会成功启动，你将会看到下面的信息：

  VITE v4.0.3  ready in 321 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

此时按住 Ctrl 点击你终端里的 http://127.0.0.1:5173/ 链接就可以打开你的 前端页面 了，到这里已经成功启动了 Vue.js 的默认项目，恭喜你迈出了成功的一大步~