文章目录
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项目
理解上面几行指令
完成上一小节的内容后，我们来理解上面几行字的意义：
cd vue使终端进入当前目录下的vue文件夹，比如从E:\Gitbase进入E:\Gitbase\vue。npm install分析并安装当前node项目的所有需要的依赖，Vue.js是基于node工作的，暂时只需要知道，只要安装了新的依赖就输入这个指令就可以，现在您只需要输入一遍就可以完成Vue.js脚手架项目的初始化。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 的默认项目，恭喜你迈出了成功的一大步~