一 脚手架的环境配置
1、下载安装node
1下载 | Node.js 中文网https://nodejs.cn/download/
PS:检查node是否安装成功,并查看版本号:按住电脑的win+R键盘,调出终端控制台,输入命令行:node -v或node --version,如果能出现以下界面,即代码node安装成功。
2下载安装VScode代码编辑工具
二 使用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、项目创建成功之后,可以看到项目的目录结构如图所示:
目录结构说明如下: