Vue脚手架，vue-cli

脚手架会向下兼容，一般使用最新版本

一.安装node.js

https://nodejs.org/zh-cn/download/

选择对应系统的Node.js版本，这里我选择的是Windows系统、64位

1）下载完成后，双击安装包，开始安装Node.js

(2)直接点【Next】按钮，此处可根据个人需求修改安装路径，修改完毕后继续点击【Next】按钮

 （3）可根据自身需求进行，此处我选择默认安装，继续点击【Next】按钮

 （4）不选中，直接点击【Next】按钮

 （5）点击【Install】按钮进行安装

 （6）安装完毕，点击【Finish】按钮

 （7）测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口        

     输入：node -v     // 显示node.js版本

                npm -v      // 显示npm版本

二、 环境配置

1.找到安装的目录，在安装目录下新建两个文件夹【node_global】和【node_cache】

 

2.创建完毕后，使用管理员身份打开cmd命令窗口（打开方法见下方Tips），输入

  ①npm config set prefix “你的路径\node_global” （复制你刚刚创建的“node_global”文件夹路径）

npm config set prefix "D:\develop\Node.js\node_global"

 ②npm config set cache “你的路径\node_cache”  （复制你刚刚创建的“node_cache”文件夹路径）

npm config set cache "D:\develop\Node.js\node_cache"

3.配置环境变量

    ①【此电脑】-单击右键-【属性】-【高级系统设置】-【环境变量】

② 在【系统变量】中点击【新建】 

 变量名：NODE_PATH

变量值：C:\Program Files\nodejs\node_global\node_modules

然后你就会发现【node_global】里多出了一个【node_modules】文件夹 

Tips:  如果输入变量值之后没有自动创建【node_modules】文件夹，就在【node_global】下手动创建一个【node_modules】文件夹，再复制你创建的【node_modules】文件夹的路径地址到变量值

 ③编辑【用户变量】中的【Path】

 ④将默认的 C 盘下【 AppData\Roaming\npm 】修改成 【node_global】的路径，点击确定 

 ⑤在【系统变量】中选择【Path】点击【编辑】添加【NODE_PATH】，随后一直点击【确定】 

四、安装淘宝镜像

①安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

 查看是否成功：

npm config get registry

 

 ② 全局安装@vue/cli

npm install -g @vue/cli

③切换到想要创建项目的目录，然后使用命令创建项目

vue create vue_test

运行命令后会出现，选择对应的vue版本，并回车

如下即为成功，失败则检查淘宝镜像是否配置

cd vue_test

npm run serve

 编译完成