前提:电脑上已经安装好了npm
vue脚手架全局安装终端命令
$ sudo npm install -g vue-cli
安装完成之后检测
$ vue -V
如果终端输出vue的版本号,那么脚手架就安装成功了,但输入vue-V还有另外一种情况,如下图:
这时就需要用到另外一个指令 vue --version 成功之后,如下图:
出现版本号,就证明cli以安装完毕
项目搭建
- 在项目的父级目录下进入终端,此目录任意
- 安装项目(在当前的目录下)
终端命令
$ vue init webpack pproject-web
这里的pproject-web是自定义的vue的项目名称,该名称不限制,可以任意。至于vue项目的其他依赖模块,我们根据项目需求单独安装
注意!这里可能出现配置不成功的可能,如下图:
出现这种情况需要就是权限问题,需要在指令前加sudo,之后输入电脑设置的密码即可,成功后如下图:
输入项目名,之后一路回车至vue-router,如需要可选y,如不需要直接n+回车。
如若下载速度实在太慢,可切换为cnpm下载 输入指令 npm config set registry https://registry.npm.taobao.org
之后开始进行自动配置安装,待安装完成之后,打开项目文件夹,出现以下文件,证明安装成功:
成功之后cd进入项目文件夹,首先下载依赖,npm install , 之后 npm run build ,主要如遇权限问题,加sudo,跑起来成功后会进入以下页面:
到这里之后,恭喜你,你已经成功的使用vue-cli搭建了一个完整的vue项目。
补充一条,部分想伙伴解除mac系统的时间不长,可能会对权限问题不适应,mac的权限问题,确实比较麻烦,比如说咱刚建好的项目,一般的权限都是只读,不可写入,这是该该怎么办呢,输入指令sudo chmod -R 777 "你需要读写的项目名",赋予权限即可。如果觉得麻烦可以费些时间,将mac电脑上的所有文件都赋予权限,输入一下指令sudo chmod -R 777 outcaster/ 即可,觉得有用假的加关注哦亲亲。