脚手架安装

 一 脚手架的环境配置

1、下载安装node

1下载 | Node.js 中文网https://nodejs.cn/download/

PS：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

2下载安装VScode代码编辑工具

Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com/

二 使用Vue Cli快速构建项目

1.安装脚手架

npm install -g @vue/cli

PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装   //安装淘宝镜像的命令行

          ①  npm install -g cnpm --registry=https://registry.npmmirror.com

          // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

          ②  cnpm install -g @vue/cli

 PS：如需要卸载vue/cli包，可执行以下命令行

         npm uninstall -g @vue/cli

注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：

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

或者，哪个方式快，用哪个

npm config set registry https://registry.npmmirror.com

2.查找版本

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了

如图安装成功

控制台输入vue-V检查安装成功 

3.vue create 命令创建项目

1创建Vue项目

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示： 

等待

 Cmd中的快捷键：选择用长空格，如果界面卡住用enter回车继续。

2 通过图形化创建项目

cmd打开终端，输入命令行vue ui

项目命令行指示

 

三 vue脚手架项目目录说明

1、项目创建成功之后，可以看到项目的目录结构如图所示：

目录结构说明如下：