如何使用node快速搭建一个vue项目

一、开发前的准备

了解vue基础、nodejs基础

首先在项目开发之前需要有vue基础+nodejs的基础，本教程面向学完HTML+CSS+Javascript的用户，并进行学习vue框架的搭建操作

二、开发环境的准备

1、nodejs的环境安装

vue的开发与创建都需要使用到node的环境，所以我们需要先配置node的环境

在安装nodejs时，访问nodejs的官网

Node.js — 在任何地方运行 JavaScript

访问node官网下载对应版本的node，然后双击运行

路径建议选择默认路径

然后可以点击next继续安装，点击Install进行安装即可

出现这个界面表示安装完成，接下来我们打开命令提示符(windows操作系统可以使用WIN+R输入cmd)，在命令提示符中输入

node -v

出现如下图所示界面代表安装完成

如果出现命令不存在提示报错，可能存在环境变量未配置，需要重新配置变量（如能成功显示版本号则跳过）

1、在资源管理器中打开node安装路径，如图是默认安装路径，如果安装时更改了路径，就点开安装时的路径

2、其中目录进入nodejs就可以了，然后我们把目录进行复制，然后右键此电脑->属性->高级系统设置->高级->环境变量->在系统变量板块中，双击Path，

然后双击新建输入刚才复制的nodejs的路径进行保存就ok了

接下来我们重复刚才的步骤，WIN+R，输入cmd，然后输入node，就能看到如图所示的内容就代表安装成功了

2、通过npm安装vue的环境

安装好node环境之后，我们就可以通过node的npm指令来搭建vue环境了

首先我们通过在控制台输入以下命令来进行安装VUE-CLI（vue官方脚手架）

npm install -g @vue/cli

安装完毕之后输入vue -v验证安装是否安装成功

（出现以上样子表示安装成功）

然后我们进行下一步操作

三、使用脚手架搭建vue项目

1、使用命令行工具搭建第一个vue项目

格式：vue create [项目名称]

例如：

vue create my-vue-project

选择第三个自定义选项，按下一步Enter

然后我们就可以根据我们的需要进行选择，按空格进行取消和选中

然后我们可以选择vue的版本，教程选择vue3版本

按照如图所示进行选择就可以了，后续要是配置不一样，有需要用到的地方可以再调整

建议：可以在目标文件夹按住shift右键，选择在终端中打开，然后就可以在对应的目录下创建vue项目了

2、使用vs-codeIDE工具

在创建好项目之后，我们使用vscode工具，打开对应项目的文件夹，并在工具栏中点击新建终端

在终端中输入vue sreve，然后按住ctrl点击第一个链接 

这样就表示vue项目创建成功了