VSCode在win10上安装Vue开发环境(专治各种慢)
- 安装vscode
- 安装nodejs和npm
- 安装vue
- 创建vue项目
- 启动vue项目
整个环境搭建的过程中,vscode下载是一种慢,而vue项目创建时,也是一种慢,本文重点治这两种慢!
安装vscode
官网地址:
https://code.visualstudio/
但是非常遗憾,下载很慢,经常会断,只得另想办法。
网上有另外的镜像地址可以下载,而我采用了讨巧的方式,在联想软件商城中,也可以直接安装最新的版本,而且速度飞快。
而微软的store中,居然没有vscode提供安装,让我也是一阵无语!
安装nodejs和npm
下载网址:https://nodejs/en/
此处我选择的是14的版本(node-v14.16.0-x64.msi)进行了下载和安装,具体安装过程比较傻瓜,只有一步需要注意:
我在安装的时候,下面的页面勾选了,选择安装了一些工具:
安装nodejs的同时,也会安装npm这个工具,下面是进行测试:
打开windows的cmd命令行工具,分别运行如下命令:
能够看到nodejs的版本号和npm版本号,说明安装成功了!
安装vue
在vscode中,选择顶部的Terminal菜单,点击:New Terminal
然后按照在下图中的位置,输入命令:
npm install -g vue-cli
最后显示vue的版本号,表示安装完成!
如果上述步骤执行有问题,也可以打开windows的命令行工具cmd,cd到同样的目录,执行上述命令。
创建vue项目
在终端(Terminal)中,继续执行命令:
vue init webpack firstvue
其中firstvue为项目名字,可以根据自己的需要,自行修改。
此时,如果发现进度一直卡在了downloading template上,说明国外的数据下载速度有问题。
输入CTRL+C命令,终止命令的执行。
安装cnpm安装工具,该工具会从国内的镜像下载数据,比较快一点。
执行如下命令安装cnpm:
npm install -g cnpm
如下图,表示安装成功!
接着用cnpm安装webpack:
cnpm install -g webpack
再次执行命令,创建vue项目:
vue init webpack firstvue
安装过程中,会有配置问题需要回答,总的原则是,需要进行install或者setup的步骤,全部no,其他yes(参见下图中的第2步骤)
启动vue项目
切换到vue项目目录,执行npm run dev命令,即可启动项目:
在浏览器中访问地址:
http://localhost:8080/
更多推荐
VSCode在win10上安装Vue开发环境(专治各种慢)
发布评论