Vue脚手架安装及项目搭建（mac版)

前提：电脑上已经安装好了npm

vue脚手架全局安装终端命令

$ sudo npm install -g vue-cli

安装完成之后检测

$ vue -V

如果终端输出vue的版本号，那么脚手架就安装成功了，但输入vue-V还有另外一种情况，如下图：屏幕快照 2021-06-06 上午10.44.37

这时就需要用到另外一个指令 vue --version 成功之后，如下图：

屏幕快照 2021-06-06 上午10.47.11

出现版本号，就证明cli以安装完毕

项目搭建

1. 在项目的父级目录下进入终端，此目录任意（在新建的目录下）

 

image.png

1. 安装项目（在当前的目录下）

终端命令

$ vue init webpack pproject-web

这里的pproject-web是自定义的vue的项目名称，该名称不限制，可以任意。至于vue项目的其他依赖模块，我们根据项目需求单独安装

注意！这里可能出现配置不成功的可能，如下图：

 

image.png

出现这种情况需要就是权限问题，需要在指令前加sudo，之后输入电脑设置的密码即可，成功后如下图：

 

 

image.png

 

输入项目名，之后一路回车至vue-router,如需要可选y，如不需要直接n+回车。

 

image.png

如若下载速度实在太慢，可切换为cnpm下载 输入指令 npm config set registry https://registry.npm.taobao.org

之后开始进行自动配置安装，待安装完成之后，打开项目文件夹，出现以下文件，证明安装成功：

 

 

image.png

成功之后cd进入项目文件夹，首先下载依赖，npm install , 之后 npm run build ，主要如遇权限问题，加sudo，跑起来成功后会进入以下页面：

 

 

image.png

 

到这里之后，恭喜你，你已经成功的使用vue-cli搭建了一个完整的vue项目。

补充一条，部分想伙伴解除mac系统的时间不长，可能会对权限问题不适应，mac的权限问题，确实比较麻烦，比如说咱刚建好的项目，一般的权限都是只读，不可写入，这是该该怎么办呢，输入指令sudo chmod -R 777 "你需要读写的项目名"，赋予权限即可。如果觉得麻烦可以费些时间，将mac电脑上的所有文件都赋予权限，输入一下指令sudo chmod -R 777 outcaster/ 即可，觉得有用假的加关注哦亲亲。