在Mac中搭建Vue项目

292 阅读1分钟

环境准备

1.node安装
下载地址:www.nodejs.com.cn/download.ht…

下载后打开,按照安装引导一步步进行安装即可

界面展示:

image.png

2.检查node版本

打开终端(Terminal)执行:node -v

界面展示:

image.png

3.为了提高安装效率,可以使用淘宝的镜像源

执行命令:

npm install -g cnpm --registry=registry.npm.taobao.org --verbose

全局安装vue-cli -3.x

如果想卸载旧版本,可执行以下命令:

  • 卸载2.x版本 npm uninstall vue-cli -g
  • 卸载3.x版本 npm uninstall @vue/cli -g

注意: 安装vue-clinode.js的版本是有要求的(后期补一篇切换node版本如何操作)

安装vue-cli如果有如下报错,以下有2种解决方案(没报错请忽略):

报错界面展示:

image.png

  1. 使用 sudo (不推荐) 你可以使用 sudo 命令以管理员身份安装 Vue CLI,但这不是推荐的方法,因为使用 sudo 可能会引起一些权限问题。如果你决定使用 sudo,请确保理解你正在执行的操作,并小心操作。
sudo npm install -g @vue/cli
  1. 更改 npm 全局安装目录

你可以更改 npm 的全局安装目录为一个你有写权限的目录。以下是一个例子,将全局安装目录更改为你的用户目录下:

npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH

然后你可以使用以下命令安装 Vue CLI:

npm install -g @vue/cli

界面展示:

image.png

检测是否安装成功

vue version

界面展示:

image.png

创建第一个Vue项目

vue create my-vue-project

界面展示:

image.png

意外报错(没报错请忽略):

界面展示:

image.png

解决方式:

sudo npm cache clean --force

然后重新create项目

运行项目: npm run serve

界面展示:

image.png

image.png