vue-cli 脚手架工具搭建详细步骤

一、安装环境

 1.本机系统：Windows 7
 2.Node.js: v12.16.2-x64位

二、什么是vue-cli

 1.vue-cli是vue官方提供的脚手架工具，脚手架工具简单讲就 是自动将项目需要的环境、依赖等信息都配置好。

三、下载Node.js

打开官网:nodejs.org/zh-cn/downl… 如下图：

三、开始安装

1.下载完成后，点击下载完成的安装包 “node-v12.16.2-x64.msi”，开始安装Node.js

2.点击 【Next】 按钮

3.勾选复选框，并点击【Next】按钮

4.修改好安装目录后，点击【Next】

5.点击【Next】

 6.点击【Finish】按钮完成安装

四、测试

 Node.js已经安装完毕，下一步检测是否安装成功！

1 、 键盘点击【win + R】 输入cmd点击确定，打开cmd黑屏命令 这里我保存的路径是D盘所以输入指令【 D + : 】转入D盘

2 、 ①输入node -v 显示node.js的版本，说明已经安装成功。 ②输入npm -v 显示npm的版本，说明自带的npm也已经安装成功

五、环境配置

 1.将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\node】下
创建两个文件夹【node_global】及【node_cache】(这里是自动生成) 如下图所示:

接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

2. 环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\node\node_global\node_modules】

3.将【用户变量】下的【Path】修改为【D:\node\node_global】

六、创建项目(图形界面方式)

若想使用vue的UI界面来创建项目，需将vue升级到 3.0以上的版本。方法如下↓↓↓2

在命令窗口下采用npm install @vue/cli -g命令装上最新版本的vue。如果有旧版本未卸载，则在命令窗口下采用 npm uninstall vue-cli -g 命令卸载旧版本的vue。

当前版本为5.0.4

打开ui界面 【vue + ui 】等一系列操作...

选择默认即可,需要选择,选择的是Vue2

运行起来的效果

如有瑕疵！欢迎来敲键盘留言！！