Macbook搭建vue开发环境

一、Vue2.0推荐开发环境

 注：上面的图片转自Vue2.0 新手入门 — 从环境搭建到发布

本人使用的各个工具的版本为：
Homebrew 3.4.6
node.js v17.9.0
npm 8.5.5

cnpm:
webpack 5.72.0

webpack-cli 4.9.2
Vue 2.9.6

一、安装brew

1、打开终端运行以下命令：

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

2、出现选择下载源，我选择1

3、输入开机密码继续下载

4、下载完成后提示重启终端或者运行命令source /Users/yeshide/.zprofile，运行命令source /Users/yeshide/.zprofile即可：

source /Users/yeshide/.zprofile

 5、安装成功后，查看一下brew的版本信息：

brew -v

6、然后看到版本信息如下：

二、安装node.js

1、在终端中运行以下命令：

brew install nodejs

2、等待下载安装完：

3、安装完之后执行以下命令查看版本号

node -v

4、查看nodejs安装目录

which node

5、获取nodejs模块安装目录访问权限

　sudo chmod -R 777 /opt/homebrew/bin/node

6、我的MacBook会出现以下提示

 7、然后依次执行以下命令即可

mkdir ~/.npm-global

npm config set prefix '~/.npm-global'

source ~/.zshrc

8、再次执行第5步的命令“获取nodejs模块安装目录访问权限”，此时即可成功

sudo chmod -R 777 /opt/homebrew/bin/node

如下所示：

三、安装淘宝镜像（npm）

1、执行以下命令安装cnpm淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、执行命令cnpm -v查看版本信息，结果说找不到cnpm命令

3、查看npm的全局安装路径

npm root -g

 4、结果如下，这不是标准的npm全局安装路径：

 5、把npm全局安装路径改为/usr/local/lib/node_modules，执行以下命令：

npm config set prefix /usr/local

6、重新安装npm脚手架

sudo npm install -g @vue/cli

7、重新安装淘宝镜像

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

8、再次执行查看cnpm版本号的命令

cnpm -v

9、此时已经可以查看到cnpm到版本号，说明cnpm安装成功

 

四、安装webpack

1、执行安装命令： 

sudo cnpm install webpack -g

2、安装结果如下：

 3、查看webpack版本号

webpack -v

4、提示webpack-cli未安装

5、我这里执行no,回车。然后输入命令安装webpack-cli

sudo  cnpm install webpack-cli -g

6、再次查看webpack版本信息，现实以下版本号说明已经安装成功 

五、安装vue脚手架

1、执行下面命令安装vue脚手架

sudo cnpm install vue-cli -g

2、结构如下：

3、输入命令查看版本号

vue -V

4、结果如下

 

六、在硬盘上找一个文件夹放工程用的，在终端中进入该目录

cd 目录路径

七、根据模板创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>
如下
vue init webpack-simple demo1

我在执行这一步初始化模版项目的时候非常慢，可以换其他方式来进行测试环境，这一步我是找一个现成的项目测试的。

八、安装项目依赖

cnpm install

九、安装 vue 路由模块vue-router和网络请求模块vue-resource

sudo cnpm install vue-router vue-resource --save

十、启动项目

npm run dev

本文参考原文地址：vue开发环境搭建Mac版 - 简书