1. 首先去node.js官网中下载对应的node.js版本软件
安装成功后,window+r在运行窗中输入cmd打开命令提示符窗口,输入node -v回车,如出现版本号,则代表安装成功
C:\Users\ttp46>node -v
v14.7.0
如果未安装或者安装失败会出现下图中的代码:
2. 安装npm
1.何为npm?
-- 在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。
-- 在新版本中的node.js都是内置npm包管理工具
2.检查是否已安装npm及npm版本号
-- 命令提示框中输入npm -v,得到当前npm版本号
C:\Users\ttp46>npm -v
6.14.7
3. 检查当前镜像源及切换至淘宝镜像:
此处切换淘宝镜像是为了能够快速的下载文件,如不配置会从国外地址下载速度很慢
1.检查当前镜像源
npm config get registry
2.在无配置的情况下默认镜像源是:https://registry.npmjs.org
a.切换至淘宝镜像
npm config set registry http://registry.npm.taobao.org/
b.检查是否正确切换,参考第1条,显示taobao则成功切换
3.在切换为淘宝镜像后,npm可以被cnpm所取代,cnpm是阿里巴巴的淘宝团队把NMP官网的插件都同步到了在中国的服务器,提供给我们从这个服务器上稳定下载资源。后面运行时的npm都可以改写为cnpm在提高下载速度的同时减少丢包的风险。
4. 安装cli脚手架
1.首先在命令提示符窗口中输入npm install -g @vue/cli
开始下载cli脚手架文件,有的小伙伴会疑惑于刚才不是说可以开始使用cnpm运行指令了么?但是要注意cnpm命令在安装时是无法直接使用的,如直接使用会报以下错误:
2.所以我们需要稍加调试,命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org
,安装成功后,在执行cnpm -v
命令检查当前版本,如安装正确会显示cnpm当前的版本号,如下图:
3.现在就可以愉快的使用cnpm来取代npm了,接下来开始安装cli脚手架,命令提示符窗口运行指令cnpm install -g @vue/cli
,就开始了飞速的安装过程,如使用npm安装没个十分钟怕是搞不定...接下来你会看到很多行的代码在加载,不要慌,等他结束后运行指令vue -V
,这里的-V的V是大写的其余小写,如果-V写成小写会显示很多信息,正确输入后会返回当前的vue/cli的版本号,如下图:
4.开始创建项目命令提示符窗口中执行vue create myproject
,出现一些选项,安装下图选择即可:提示:回车确定,空格用于多选的选定和反选!!!
5.等待配置完毕,命令提示符窗口中执行vue ui
,会返回一个地址,这个地址就是你的项目管理器的地址,复制到浏览器中打开即可,然后开始创建项目:配置过程中不能关闭命令提示符窗口!!!!!
6.上面步骤都操作完成后,等待创建完毕项目,至此cli脚手架工具就安装完成了。
7.接下来启动项目,在我的电脑中找到创建文件夹的位置,进入到文件夹目录中在地址栏输入cmd回车:
确认命令提示符地址是项目的位置,输入
npm run serve
,这样就启动了项目了:启动成功后,会显示两个地址信息,选一个复制到浏览器中打开就可以看到页面了。