1.安装node.js
点击下载pkg安装包,进行安装。
2.验证安装状态
输入node -v
和 npm -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
进行安装。

这里需要注意一下,执行完命令以后,我们安装的是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,看到如下内容,证明项目新建成功。

网友评论