1.前期准备:
(1)检测电脑是否安装node.js
依次:开始-搜索cmd-回车(或者用快捷键:Windows+R),然后在命令行输入node -v,按下回车键;
如果出现“'node' 不是内部或外部命令,也不是可运行的程序”,说明没有安装node.js;
如果本机没有安装node运行环境或者node版本过低,请下载node 安装包进行安装或者更新至最新的node版本;
下载地址:https://nodejs.org/en/download/
(2) 检测node.js是否安装成功
依次:开始-搜索cmd-回车(或者用快捷键:Windows+R),然后在命令行输入node -v,按下回车键;
如果输出版本号,说明我们安装node 环境成功:
由于新版的nodejs已经集成了npm,所以npm也一并安装好了,我们可以使用npm -v查看 npm 的 版本号:
(3)Tips:淘宝镜像
因为访问外网会很慢,所以有需要的话可以使用淘宝镜像():
打开命令终端,输入: npm install -g cnpm --registry=回车之后,就可以用 cnpm 替代 npm了,下载速度会更快。
2.搭建 vue项目环境
(1)安装vue-cli脚手架
脚手架:快速搭建开发环境
在cmd输入:npm install vue-cli -g,进行全局安装
验证是否安装成功:输入vue,出现vue信息,说明安装成功
(2)创建新项目
> 新建一个项目文件夹(我选择了F盘,在nuonuo-D文件夹中新建了一个名为vue-test的文件夹):
> 进入项目文件夹,在如下图所示位置输入cmd,并回车:
即可在该目录下打开cmd;
> 输入vue init webpack . (注:“.” 代表创建到当前项目下)
(3)安装依赖包
进入项目文件夹:cd vue-test,回车进入项目文件夹:
输入: npm install (或者简写为:npm i)安装依赖包;
完成之后,得到如下目录结构:
(4)运行项目
打开webstorm,通过“磁盘名:”进入项目文件所在的磁盘(如F:),通过“ cd 文件名”最终进入项目文件夹
输入npm start(或者npm run dev)运行项目
在浏览里输入:localhost:8080(默认端口为8080,如果已被占用,会自动往上叠加(如8081))
浏览器显示如下页面,则vue项目搭建成功!