在Mac上安装node、npm、webpack

1.安装node.js

点击下载pkg安装包,进行安装。

2.验证安装状态

输入node -vnpm -v 检查是否安装成功,出现版本号,证明安装成功。

3.安装cli脚手架

在终端输入 npm install --global vue-cli这行命令并执行,执行以后有很大概率出现错误

错误信息

主要错误信息是

The operation was rejected by your operating system.
It is likely you do not have the permissions to access this file as the current user

翻译一下是说我们没有权限,解决方法是:
执行 sudo chown -R $USER /usr/local,
然后输入密码,
再次执行npm install --global vue-cli命令即可。

成功安装脚手架

4.安装webpack

到这里我们已经配置好了node环境,并且安装了脚手架,接下来就可以安装webpack了,执行命令
npm install webpack@3.6.0 -g进行安装。

webpack安装成功

这里需要注意一下,执行完命令以后,我们安装的是vue2.x的版本,这里我忽略掉了,本打算切换完路径以后通过vue create myproject新建项目的,然后vscode就给我提示了.

提示

这里我们可以通过vscode的提示,先执行

npm uninstall -g vue-cli

卸载掉2.x的版本,然后通过

npm install -g @vue/cli

安装3.x的版本再去执行新建项目的命令就可以了.当然我们也可以直接用2.x的方式新建项目,正确做法是将新建项目的命令改成

vue init webpack myproject

执行即可。

项目创建成功

新建好了项目,按照vscode的提示,执行cd myproject命令和npm run dev,将项目运行起来。

项目运行起来了

在浏览器打开地址 http://localhost:8080,看到如下内容,证明项目新建成功。

项目页面

推荐阅读更多精彩内容