一、概念Vue cli就是脚手架。cli全称commandlineinterface即命令行接口二、安装脚手架1.环境准备1下载node.js,并进行安装。node.js提供了javascript的运行环境。2配置node.js的环境变量主要是在环境变量path中添加node.js的安装根目录。例如node.js的安装目录是C:\Program Files\nodejs\则把该目录添加到该path的环境变量中。3验证node.js安装是否成功在命令提示符windows键R键后输入cmd回车中输入以下命令node-v或node--version4npmnode package manager就是node.js的包管理器。它是在node.js安装的过程中会被自动安装不需要你进行单独安装。查看npm的版本命令如下npm -v或者npm --version5)配置npm的镜像npminstall -gcnpm --registryhttps://registry.npmmirror.com6)测试cnpm的版本cnpm -v或cnpm--version7)配置npm下载的依赖的位置cnpmconfigsetcache“d:\cnpm\npm-cache”cnpm config setprefix “d:\cnpm\npm-global”注意路径中不能有中文目录。查看设置的信息可以使用如下命令cnpm config get cache //只查看cache的设置cnpm config getprefix//只查看prefix的设置cnpm configls//查看cnpm的配置2.脚手架vue cli的安装1安装vue/cli3.10的版本cnpminstall vue/cli3.10 -g //-g参数表示是进行的全局安装2查看安装后的版本,如果能出现版本信息表面安装成功。vue -V或vue--version3.创建项目切换到需要创建项目的位置cd路径//例如切换到d盘的cli目录下cdd:\cli创建vue项目vue create项目名称//例如创建的项目名称为myproject命令为vue createmyproject注意在vscode的环境终端中创建项目过程中出现以下问题的解决方案问题vue : 无法加载文件 C:\Program Files\nodejs\vue.ps1因为在此系统上禁止运行脚本。有关详细信息请参阅 https:/go.microsoft .com/fwlink/?LinkID135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 vue create web ~~~ CategoryInfo : SecurityError: (:) []PSSecurityException FullyQualifiedErrorId : UnauthorizedAccess如下图的错误提示解决方案第一步第二步执行Set-ExecutionPolicyRemoteSigned在提示中输入Y完成。还要注意一点如果是使用vscode等编辑器一定要重启一遍才生效切记切记vue createmyproject正常运行后会提示选择何种方式进行创建默认选择default即可其中babel主要用于将es6转为es5eslint主要用于进行语法的检查。Manually selectfeatures表示手动选择设置。使用方向键选择defaultbabeleslint然后回车即可。回车后即可进行创建过程。如果插件下载过程较慢可以进行下载源的更换也即cnpm的镜像的更换。更换的命令如下cnpm config setregistryhttps://mirrors.huaweicloud.com/registry/npm/可使用如下命令查看换源结果cnpm config getregistry如果结果中有https://mirrors.huaweicloud.com/registry/npm/表明成功换源然后再去执行vue createmyproject。如下图vue createmyproject成功执行后会出现如下界面该界面中会有successfully的字样。4.运行项目1切换路径到项目目录下还是以项目myproject为例cdmyproject2运行cnpmrun serveCtrl单击上图中的链接local或Network对应的链接即可在浏览器中打开该项目。在vscode中打开该项目可以看到该项目的结构